AngularJS转换为Angular4再转回AngularJS

Question

我正在逐步将我的应用程序移植到Angular 4。目前，我有一些组件是在Angular 4中，另一些是在AngularJS中。当从AngularJS -> Angular 4 -> AngularJS进行转换时会遇到问题。第一个从JS到4的转换完美地工作，但是接下来，我在主屏幕上使用我的Angular 4组件时遇到了问题。URL发生更改，但页面不会重定向到Angular JS组件，我的ng-outlet不再刷新。

ROUTER在AngularJS中。

使用以下方式对Angular 4组件进行降级：

import {
    Injectable,
    ModuleWithProviders,
    NgModule
} from '@angular/core';

import {
    APP_MODULE_NAME
} from '../../constants';

declare const angular: angular.IAngularStatic;
import {
    downgradeInjectable,
    downgradeComponent
} from '@angular/upgrade/static';


// Singleton Module
@NgModule()
@Injectable()
export class ComponentHelper {
    constructor() {}

    static forRoot(): ModuleWithProviders {
        return {
            ngModule: ComponentHelper
        }
    }

    public static DowngradeFactory(componentName: string, className: any): void {
        angular.module(APP_MODULE_NAME).factory(componentName, downgradeInjectable(className));
    }

    public static DowngradeDirective(componentName: string, className: any): void {
        angular.module(APP_MODULE_NAME).directive(componentName, downgradeComponent({
            component: className
        }))
    }
}

我正在路由器中执行此操作。

{
    path: '/pj/:project_id/ds/:datastore_id/list/ng4/all',
    component: 'downgradeNG4',
    name: 'DowngradeNG4'
}, {
    path: '/pj/:project_id/ds/:datastore_id/search/:search_id/list/all',
    name: 'NormalJS',
    component: 'normalJS'
},

在AngularJS中，我做了这个操作以便将其重定向到NG4组件。

const path = `pj/${self.projectID}/ds/${self.currentDatastoreID}/list/ng4/all`;
$location.path(path);

现在，在Angular 4组件中，如果我点击一个在AngularJS中的UI菜单，即使浏览器中的路径发生变化，它也不会重定向。

并非所有的组件/模块都被降级，我应该降级每个服务和子组件吗？还是只需要（像现在这样）从AngularJS路由器直接调用的组件？

我应该将它们全部降级吗？

- Bobby

---

你的项目中是否使用了 ng-upgrade？ - Amirhossein Mehrvarzi

您能否在StackBlitz（或其他平台）上提供一个复现问题的代码示例？这类问题可能是由混合Angular应用程序中的许多不同原因引起的。 - rdgfuentes

Answer 1

我以前经历过这个过程（从angularjs迁移到angular），我强烈建议您重新编写所有组件，使用angular 6（从angular 4到6有一些基本变化），这将比使用现有方法更省时间。您可以保留html和css，并进行最少的更改。

无论如何，如果您仍然坚持自己的方式，请将其分成可单独工作的部分。您可以在同一页上同时运行angularjs和angular。

如果您需要将数据从angularjs传递到angular，我会使用localstorage等另一种方式来实现。

总之，即使控制台中有错误，理解您的解释中出现的问题也很困难，调试angular需要时间。

- molikh