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 {}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With