2017年03月07日

Angular2のloadChildrenでモジュールの遅延読み込みを行う

Angular2のloadChildrenを利用するとモジュールの遅延読み込みが可能になる。たまにしか読み込まれないモジュールなどは遅延読み込みの対象にしておこうapp.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<a routerLink="/">TOP</a>
<a routerLink="/sub">Sub</a>
<router-outlet></router-outlet>
`,
})
export class AppComponent {}

app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing';

@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }

app.routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
{ path: 'sub', loadChildren: './app/sub/sub.module#SubModule' }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }

sub.component.ts
import { Component } from '@angular/core';

@Component({
template: `<h1>Sub</h1>`
})
export class SubComponent{}


import { NgModule } from '@angular/core';
import { SubRoutingModule } from './sub.routing';
import { SubComponent } from './sub.component';
subComponent.ts
@NgModule({
imports: [
SubRoutingModule
],
declarations: [SubComponent]
})
export class SubModule { }

sub.routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SubComponent } from './sub.component';

const routes: Routes = [
{ path: '', component: SubComponent },
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class SubRoutingModule { }
posted by ねこまんま at 14:22 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック