AngularJS 到 Angular - NgUpgrade答案

【问题标题】：AngularJS to Angular - NgUpgradeAngularJS 到 Angular - NgUpgrade
【发布时间】：2017-10-23 16:30:35
【问题描述】：

我有一个运行 AngularJS 1.5 的应用程序，我正在尝试使用 NgUpgrade 开始将旧组件迁移到 Angular。

我的第一步是让两个框架并行运行。但是在使用 NgUpgrade 时，我收到以下错误：

Unhandled Promise rejection: [$injector:modulerr] Failed to instantiate module $$UpgradeModule due to:
Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module undefined due to:
Error: [ng:areq] Argument 'module' is not a function, got undefined

基本上我有一个用于 Angular 的 app.module.ts 和一个用于 AngularJS 的 app.js。

根据 Angular 文档，我创建了一个 main.ts 来引导这两个框架。

import { AppModule } from './app.module';

import { UpgradeModule } from '@angular/upgrade/static';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    console.log('Bootstrap both Angular and AngularJS ');
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['myApp'], {strictDi: true});
});



For creating my bundle, I'm using webpack.

【问题讨论】：

您找到解决此错误的方法了吗？
见下面的帖子。这是我们 AppModule 的当前状态。工作没有问题。

标签： javascript angularjs angular

【解决方案1】：

这是我们模块的当前状态。大多数代码与引导这两个框架无关，因为它与 Redux 有关。首先，您需要从 html 中删除 ng-app，然后在 Module 的构造函数中，您需要调用 ngDoBootstrap() 来手动引导 angular。

upgrade.bootstrap(document.body, ['app'], {strictDi: true});将负责引导您的 AngularJS 应用程序。

export class AppModule {
    constructor(private ngRedux: NgRedux<any>, @Inject(DIGEST_MIDDLEWARE) digestMiddleware: any) {
        const reducer = combineReducers({
            actions: actionsReducer,
            ...coreReducers
        });
        const initialStete = {
            actions: actionsInitialState,
            ...coreState
        };

        // digestMiddleware needs to be last, to support use in AngularJS 1.x
        const store = createStore(reducer, initialStete, applyMiddleware(thunk, logger, digestMiddleware) );
        ngRedux.provideStore(store);
    }
	ngDoBootstrap() {}
}


platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
	const upgrade = platformRef.injector.get(UpgradeModule);
	upgrade.bootstrap(document.body, ['app'], {strictDi: true});
});

【讨论】：