AngularJS转换为Angular - NgUpgrade

Question

我有一个运行AngularJS1.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.

- Nocktu

---

你找到了解决这个错误的方法吗？ - Basavaraj Bhusani

这是我们AppModule的当前状态。没有任何问题地工作。 - Nocktu

你找到解决方案了吗？模块名称是'myApp'，而现在在引导代码中你将其更改为'app'。这对我来说不起作用。 - Mehdi Raza

Answer 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});
});

- Nocktu