AngularJS到Angular - NgUpgrade

Question

I have a app running AngularJS 1.5 and I'm trying to use NgUpgrade to start migrating old components to Angular.

My first step it's to have both frameworks running side by side. But when using NgUpgrade, I'm getting the following error:

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

Basically I have an app.module.ts for Angular and app.js for AngularJS.

Following angular documentation, I created a main.ts to bootstrap both frameworks.

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

This is the current state of our module. Most of the code is irrelevant to bootstrap both framework, since it's related with Redux. First, you need to remove the ng-app from the html and then inside of the constructor of the Module you need to call ngDoBootstrap() to bootstrap angular manually.

upgrade.bootstrap(document.body, ['app'], {strictDi: true}); will take care of bootstrapping your AngularJS application.

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