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

See post below. This is the current state of our AppModule. Working without a problem. — Nocktu
– Nocktu, Commented Nov 17, 2017 at 22:12
Did you find the solution of this? the module name was 'myApp' and now in bootstrap code you changed it to 'app'. This doesn't work for me. — Mehdi Raza
– Mehdi Raza, Commented Oct 18, 2022 at 12:26

Nocktu · Accepted Answer · 2017-11-18 00:20:38Z

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

Collectives™ on Stack Overflow

AngularJS to Angular - NgUpgrade

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related