【Angular】app.module.tsからルーティングのRoute設定を分離する

ファットになりがちなapp.module.tsファイルから、ルーティングの設定を分離したい

バージョン情報

• Angular: 5.2.9

ルーティングの設定を分離する

Before

app.module.tsの中にルーティングのRoute設定も含まれている

src/app/app.module.ts:

// ...省略
import { RouterModule, Routes } from '@angular/router';

// ...省略

// Route設定
const myRoutes = [
  { path: 'private', component: PrivateComponent },
  { path: '', component: ExchangeListComponent }
];

@NgModule({
  declarations: [AppComponent, ExchangeListComponent, PrivateComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    NgReduxModule,
    BrowserAnimationsModule,
    MatTableModule,
    // RouterModule
    RouterModule.forRoot(myRoutes)
  ],
  // ...省略
})
export class AppModule {
  // ...省略
}

After

ルーティングのRoute設定については、app.module.tsから切り出して、app.routes.ts内に移動する

src/app/app.module.ts:

// ...省略
import { RouterModule } from '@angular/router';
// 追加
import { myRoutes } from './app.routes';

// ...省略

// Route設定はapp.routes.tsに移動

@NgModule({
  declarations: [AppComponent, ExchangeListComponent, PrivateComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    NgReduxModule,
    BrowserAnimationsModule,
    MatTableModule,
    // RouterModule
    RouterModule.forRoot(myRoutes)
  ],
  // ...省略
})
export class AppModule {
  // ...省略
}

ルーティングのRoute設定が記載されているファイル

src/app/app.routes.ts:

import { PrivateComponent } from './private/private.component';
import { ExchangeListComponent } from './exchange-list/exchange-list.component';
import { Routes } from '@angular/router';

export const myRoutes: Routes = [
  { path: 'private', component: PrivateComponent },
  { path: '', component: ExchangeListComponent }
];