AngularJS到Angular - NgUpgrade

Question

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

在角度文档之后，我创建了一个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.

Answer 1

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

upgrade.bootstrap（document.body，[＆＃39; app＆＃39;]，{strictDi：true}）;将负责引导您的AngularJS应用程序。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;