angular - 如何不在 Angular2 生产包中包含模拟服务

Question

在构建用于生产的 Angular 2 应用程序时，我们使用

ng build --prod --w --aot 

但是我们的模拟服务也被捆绑和缩小可能是因为我们有

import {XMockService} from "./xxx-mock.service";

这可以防止 tree shaking 丢弃未使用的服务。这是我们简化的 app.module.ts，它在 environment.mock=true 时有条件地延迟加载模拟服务

我想这是一个常见的场景，但我找不到任何答案。

应用程序模块.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 {}

Answer 1

因此根据 main contributors 之一您的问题的解决方案类似于:

// main.ts
import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment, AppModule } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

// environments/environment.ts
export { DevModule as AppModule } from '../app/dev.module';

export const environment = {
  production: false
};
// environments/environment.prod.ts
export { ProdModule as AppModule } from '../app/prod.module';

export const environment = {
  production: true
};

所以它与我之前的回答非常相似，不同之处在于您将使用不同的环境文件，而不是不同的主文件。

上一个答案

最近opened an issue on Angular-cli ，请求允许您执行此操作的功能。如何？通过切换你的 webpack 入口点。现在 Angular-cli 将始终使用相同的入口点 src/main.ts，这个特性背后的想法是你可以指定一个不同的入口点，所以你会有类似 src 的东西/main.dev.ts:

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppDevModule } from './app/app.dev.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppDevModule);

然后您将在 AppDevModule 上导入模拟:

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 {XMockService} from "./xxx-mock.service";

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

export class AppDevModule {}

以这种方式做事的唯一缺点是，您必须保持 AppModule 和 AppDevModule 同步。

你可以通过创建第三个文件来解决这个问题，比如 AppImportsModule:

import {BrowserModule} from "@angular/platform-browser";
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";
import {AppComponent} from "./app.component";
import {environment} from "../environments/environment";

export {AppComponent} //we also export this for simplicity

export const declarations = [
  AppComponent
];

export const imports = [
  BrowserModule,
  FormsModule,
  HttpModule
];

然后在您的 AppModule.ts 或 AppDevModule.ts 上，您只需要导入您的提供程序:

import {NgModule} from "@angular/core";
import {declarations, imports, AppComponent} from "./app.imports.module";
import {XMockService} from "./xxx-mock.service";

@NgModule({
  declarations, // with es6 this is the same as "declarations: declarations"
  imports, //same as above
  providers: [XMockService],
  bootstrap: [AppComponent]
})

export class AppDevModule {}

因此，在未实现该功能之前，我没有更好的解决方案来解决您的问题。