AngularJS to 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 

基本上我有角爲AngularJS的app.module.ts和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，['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}); 
 
});