How to load modules conditionally in Angular 2

Question

The code below can conditionally load a mock service based on different Angular-cli environment variables. However it has a side effect that the mock services get built into the

Answer 1

You might try something similar to this.

main.ts

platformBrowserDynamic().bootstrapModule(RootModule);

root.module.ts

@NgModule({
  imports: [
    LandingModule,
    UserModule
  ],
  entryComponents: [PageComponent, UserComponent],
})
export class RootModule {

  constructor(private router: Router .....) {
  }

  ngDoBootstrap(ref: ApplicationRef) {
    const isUserPageRequested = this.shouldGoToUser();
    if (isUserPageRequested) {
      this.router.resetConfig(userRoutes);
      ref.bootstrap(UserComponent);
    } else {
      ref.bootstrap(PageComponent);
    }
  }
}

PageComponent is declared in LandingModule and UserComponent is declared in UserModule. This way it is possible to conditionally load module while it works when compiled with aot.