ビルド対象のモジュールを環境ごとに分ける

What want?

• environmentごとにビルド対象のモジュールを分ける
• webpack.config.jsは触らない。angular-cli.jsonも触らない。nodeやgulpのビルドスクリプトも用意しない。
• environment.tsをプレーンな設定ファイルにする。Angularオブジェクト（guardやcomponent）を持ち込まない。

How to do?

• routing定義でLazyLoadingModuleへの参照パスをenvironmentによって切り替えることでビルド対象を切り替える

Example

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { environment } from '../environments'

// 通常のルート定義
const routes: Routes = [
  {
    path: '',
    component: TopComponent,
  },
  {
    path: 'user',
    loadChildren: './users/users.module#UsersModule'
  },
];

//　環境ごとの追加ルート
const additionalRoutes: Routes = !environment.production ? [
  {
    path: 'develop',
    loadChildren: './develop/develop.module#DevelopModule'
  },
] : [
  {
    path: 'analyze',
    loadChildren: './analyze/analyze.module#AnalyzeModule'
  },
];

@NgModule({
  imports: [RouterModule.forRoot(
    // ルートを結合する
    [...routes, ...additionalRoutes]
  )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

以上で、ng buildつまりdev環境ならdevelop.moduleがビルドされ、ng build --prodつまりproduction環境ならanalyze.moduleがビルドされる。

webpackのloader段階で参照関係を解決できていないと失敗するため、additionalRoutesの持ち方はArray.pushの引数などにせず上記のように変数で持つと良い。

Conclusion

• LazyLoadingModuleを利用することで、ビルド設定を変えずenvironmentファイルもプレーンに保ち、angularアプリ内で環境毎のビルド対象をコントロールすることができる。