如何在Angular 2中有条件地加载模块

Question

以下代码可以根据不同的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 {}

- David Dehghan

---

懒加载 https://angular.io/guide/ngmodule#app-routing 使用 loadChildren: 'app/path/to/YourModuleFileName#YourModuleClassName，在该模块中，您可以导入其他模块以进行惰性加载... 但使用 import 您最终会下载 XService 和 XMockService。我正在寻找一种在引导时基于主机仅下载所需模块的方法，使用单个代码库。嗯 - Joe Velez

Answer 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 编译时可以有条件地加载模块。

- Admir Sabanovic

---

非常有帮助。运行得很好。谢谢！ - Pawan Pillai

如此被低估的答案。 - 1984

Answer 2

我刚刚是这样做的：

export class AppModule {

  constructor(@Inject(PLATFORM_ID) platformId: Object) {

    if(isPlatformBrowser(platformId)) {
      import('@angular/fire/analytics').then(a => {
        a.provideAnalytics(() => a.getAnalytics())
      });
    }
  }
}

- Jonathan