レイジーは、新しいコンポーネントをロードあらかじめ用意された他のコンポーネントのような塊が

Question

角度スターターでない私は、角度のため、このスターターパック使用しています：私は怠惰な負荷に新しいコンポーネントが、＃をしようとしています https://github.com/gdi2290/angular-starter

を.chunk.jsがテストコンポーネント用にロードされていません。既に作成されたコンポーネントに対して、他のchunk.jsがロードされています。

コンポーネントを作成して遅延ロードする特定の方法はありますか。

テストコンポーネントのコードです。

index.ts

export { TestModule } from './test.module'; 

test.component.ts

import { 
    Component, 
    OnInit, 
} from '@angular/core'; 

@Component({ 
    selector: 'app-test', 
    templateUrl: './test.component.html', 
    styleUrls: [ './test.component.css', ], 
}) 

export class TestComponent implements OnInit { 
    public ngOnInit() { 
     console.log('Hello from the Test Component'); 
    } 
} 

test.module.ts

import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

import { routes } from './test.routes'; 
import { TestComponent } from './test.component'; 

@NgModule ({ 
    declarations: [ 
     TestComponent, 
    ], 
    imports: [ 
     CommonModule, 
     FormsModule, 
     RouterModule.forChild(routes), 
    ] 
}) 

export class TestModule { 
    public static routes = routes; 
} 

ここtest.routes.ts

import { TestComponent } from './test.component'; 

export const routes = [ 
    { path: '', children: [ 
     { path: '', component: TestComponent }, 
    ]}, 
]; 

アプリ成分

app.routes.ts

import { Routes } from '@angular/router'; 
import { HomeComponent } from './home'; 
import { AboutComponent } from './about'; 
import { NoContentComponent } from './no-content'; 

import { DataResolver } from './app.resolver'; 

export const ROUTES: Routes = [ 
    { path: '',  component: HomeComponent }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent }, 
    { path: 'detail', loadChildren: './+detail#DetailModule'}, 
    { path: 'barrel', loadChildren: './+barrel#BarrelModule'}, 
    { path: 'test', loadChildren: './+test#TestModule'}, 
    { path: '**', component: NoContentComponent }, 
]; 

から変更されたコードであります

app.component.ts

/** 
* Angular 2 decorators and services 
*/ 
import { 
    Component, 
    OnInit, 
    ViewEncapsulation 
} from '@angular/core'; 
import { AppState } from './app.service'; 

/** 
* App Component 
* Top Level Component 
*/ 
@Component({ 
    selector: 'app', 
    encapsulation: ViewEncapsulation.None, 
    styleUrls: [ 
    './app.component.css' 
    ], 
    template: ` 
    <nav> 
     <a [routerLink]=" ['./'] " 
     routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}"> 
     Index 
     </a> 
     <a [routerLink]=" ['./home'] " 
     routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}"> 
     Home 
     </a> 
     <a [routerLink]=" ['./detail'] " 
     routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}"> 
     Detail 
     </a> 
     <a [routerLink]=" ['./barrel'] " 
     routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}"> 
     Barrel 
     </a> 
     <a [routerLink]=" ['./about'] " 
     routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}"> 
     About 
     </a> 
     <a [routerLink]=" ['./test'] " 
     routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}"> 
     Test 
     </a> 
    </nav> 

    <main> 
     <router-outlet></router-outlet> 
    </main> 

    <pre class="app-state">this.appState.state = {{ appState.state | json }}</pre> 

    <footer> 
     <span>WebPack Angular 2 Starter by <a [href]="url">@AngularClass</a></span> 
     <div> 
     <a [href]="url"> 
      <img [src]="angularclassLogo" width="25%"> 
     </a> 
     </div> 
    </footer> 
    ` 
}) 
export class AppComponent implements OnInit { 
    public angularclassLogo = 'assets/img/angularclass-avatar.png'; 
    public name = 'Angular 2 Webpack Starter'; 
    public url = 'https://twitter.com/AngularClass'; 

    constructor(
    public appState: AppState 
) {} 

    public ngOnInit() { 
    console.log('Initial App State', this.appState.state); 
    } 

} 

私はChromeブラウザにGoogleのデベロッパーコンソールからすべてのエラーを得ていないことだし、ルートが作業を行います。それはちょうどチャンクではありません。

私は現在、角度4を使用しています。

ご協力いただければ幸いです。ありがとうございました。

Answer 1

あなたapp.component.tsにこの方法を試してください。

<a routerLink="/test/1" 
    routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}"> 
    Test 
</a> 

とあなたのtest.routes.ts

import { TestComponent } from './test.component'; 

export const routes = [ 
    { path: '1', component: TestComponent}, 
];