title: How not to include mock services in Angular2 production bundle
body: <p>When building an angular 2 app for production we use</p>
  
  <pre><code>ng build --prod --w --aot 
  </code></pre>
  
  <p>But our mock services also get bundled and minified probably because we have </p>
  
  <pre><code>import {XMockService} from "./xxx-mock.service";
  </code></pre>
  
  <p>and that prevents the tree shaking from dropping the unused service. Here is our simplified app.module.ts which conditionally lazy-loads the mock service when environment.mock=true</p>
  
  <p>I would imagine this is a common scenario but I can't find any answers for it.</p>
  
  <p>app.module.ts:</p>
  
  <pre><code>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&lt;any&gt; = [
    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 {}
  </code></pre>