webpack plugin: allow more than one entryModule

[gjdev]

We would like to be able to configure multiple entryModules in the @ngtools/webpack plugin. Angular itself is able to bootstrap multiple modules in the same page, which makes it a pity that @ngtools/webpack does not currently allow this.

I would like to know if this can be considered for a future release. If it's not too much work, and somebody can point me in the right directions I may be able to provide a pull-request for this myself.

[tonimitrevski]

same problem

[chrisnicola]

As I understand it ngc itself doesn't care about entry modules, so am I correct that this purpose of knowing the entry module is to find where it is bootstrapped and replace the JIT bootstrap code with the AOT bootstrap code? If that is the case then would it not be fairly trivial to support multiple root modules?

Also I think an array property like rootModules would be much clearer in terms of intention and purpose.

[rajac]

facing same problem in our application which is not SPA based and has multiple entryModules. Is there any workaround for now?

[chrisnicola]

@rajac even SPA based apps have reasons to have multiple entry points. They may be broken up into different application modules for reasons but individual those may be SPAs. Ultimately webpack is a build tool and needs to be able to support flexible build scenarios.

[keyiis]

I need this function too!

plugins: [
    new AotPlugin({
      tsConfigPath: 'tsconfig.aot.json',
      entryModule: 'app/a.module#AppModule'
    }),
    new AotPlugin({
      tsConfigPath: 'tsconfig.aot.json',
      entryModule: 'app/b.module#AppModule'
    })
]

or

plugins: [
    new AotPlugin({
      tsConfigPath: 'tsconfig.aot.json',
      entryModule: ['app/a.module#AppModule','app/b.module#AppModule']
    })
]

[jlu344]

I definitely need this also.. Has it been decided whether this will be in a future release?

[jlu344]

I created a workaround for this, since I only have 2 entry modules. I created an entry module wrapper and specified this module as the entry module. The entry module would dynamically set the bootstrap component based on the url. Since each entry module had its own set of Routes, I had to reset the routes every time main.ts is run.

entryModule.ts
import { NgModule, ApplicationRef } from '@angular/core';
import { Router } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app/components/app/app.component';
import { AppModule, CellCultureRoutes } from './app/app.module';
import { AccountsComponent } from './app/components/accounts/accounts.component';
import { AccountsModule, AccountRoutes } from './app/accounts.module';

const isAccountURL = window.location.href.toLocaleLowerCase().indexOf('accounts')>=0;

@NgModule({
imports: [
BrowserAnimationsModule,
BrowserModule.withServerTransition({
appId: 'my-app-id'
}),
AppModule,
AccountsModule
],
entryComponents: [ AppComponent, AccountsComponent ]
})
export class EntryModule {

constructor(private router: Router) {
}

ngDoBootstrap(ref: ApplicationRef) {
    if (isAccountURL) {
        this.router.resetConfig(AccountRoutes);
        ref.bootstrap(AccountsComponent);
    } else {
        this.router.resetConfig(CellCultureRoutes);
        ref.bootstrap(AppComponent);
    }
}

}

[andreialecu]

@jlu344 That approach kind of defeats the purpose of AoT's main benefit of Tree Shaking, since you're going end up with all the code of both modules in both builds.

[mgechev]

This is out of the scope of the CLI. I'd strongly recommend you to explore customizing your build with ngx-build-plus.