AngularJSをAngularに - NgUpgrade

Question

私はAngularJS 1.5を実行しているアプリケーションを持っており、古いコンポーネントをAngularに移行するためにNgUpgradeを使用しようとしています。

私の最初のステップは、両方のフレームワークを並べて実行することです。 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 

は基本的に私は、角度やAngularJSのためapp.jsためapp.module.tsを持っています。

角度のある文書化に続いて、私は両方のフレームワークをブートストラップする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に関連しているので、ほとんどのコードは両方のフレームワークのブートストラップとは無関係です。まず、ng-appをhtmlから削除し、モジュールのコンストラクタの内部でngDoBootstrap（）を呼び出して手動で角度を設定する必要があります。

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); 
 
    } 
 
\t ngDoBootstrap() {} 
 
} 
 

 

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