5

I have a fully functional large AngularJS/Angular 4 hybrid application. Since the beginning of this project I have only had one AngularJS module and one Angular 4 module. As time went by, the Angular 4 part started growing more and more and I decided to start using NgModules to organize the code better and eventually use lazy loading. While the application is in hybrid mode, I wanted to also refactor the AngularJS module into several modules and load them from my Angular 4 modules.

I'm currently bootstrapping the application as shown below and it works fine. But let's say that I add an AngularJS module called Ng1AppModuleTwo which I want only to get loaded when I lazy load an Angular 4 module called Ng4AppModuleTwo, how can I achieve that?

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { Ng1AppModule } from './app'
import { Ng4AppModule } from './app.module'

platformBrowserDynamic().bootstrapModule(Ng4AppModule).then(ref =>
{
    (<any>ref.instance).upgrade.bootstrap(document.body, [Ng1AppModule.name]);
});

I've searched for examples everywhere and all the examples of hybrid applications have only one AngularJS module. I tried the following code to try to load the second AngularJS module but I get an Angular error saying:

Unhandled Promise rejection: [ng:btstrpd] App already bootstrapped with this element

export class Ng4AppModuleTwo
{
    constructor(upgrade: UpgradeModule)
    {
        upgrade.bootstrap(document.body, [Ng1AppModuleTwo.name]);        
    }    
}

Any help would be greatly appreciated, thanks!

eflat
  • 919
  • 3
  • 13
  • 34
jurgen w
  • 243
  • 1
  • 2
  • 14

0 Answers0