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!