Как загрузить модули условно в Angular 2

Нижеприведенный код может условно загрузить макет службы на основе различных переменных среды Angular -cli. Однако у него есть побочный эффект, заключающийся в том, что макетные службы встроены в окончательные транскодированные и минитизированные выходные файлы.

Есть ли лучший способ выполнить ленивые модули загрузки в 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 {}

Ответы

Ответ 1

Вы можете попробовать что-то похожее на это.

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 объявлен в LandingModule и UserComponent объявлен в UserModule. Таким образом можно условно загрузить модуль, когда он работает при компиляции с помощью aot.