Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to load modules conditionally in Angular 2

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 final transcoded and minified output files.

Is there a better way to accomplish lazy loading modules in angular2?

app.module.ts:

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";
import {AppComponent} from "./app.component";
import {environment} from "../environments/environment";
import {XService} from "./xxx.service";
import {XMockService} from "./xxx-mock.service";

let importedModules: Array<any> = [
  XService
];

if (environment.mock) {
  importedModules.push(
    {provide: XService, useClass: XMockService}
  );
} else {
  importedModules.push(
    XService
  );
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: importedModules,
  bootstrap: [AppComponent]
})

export class AppModule {}
like image 998
David Dehghan Avatar asked Jan 06 '17 06:01

David Dehghan


1 Answers

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.

like image 69
Admir Sabanovic Avatar answered Sep 21 '22 20:09

Admir Sabanovic



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!