角4 - レイジーロードルートが機能しません。

Question

レイジーロードルーティングの作業を試みましたが、できませんでした。あなたが私を助けることができれば本当に感謝しています。

私は3つのモジュールPublicModule、AdminModuleとAppModule

これは私が（今公共のモジュールとのために）期待するものであります。

を... /公共=>それは公共のコンポーネント

内の情報が表示されます

これはrouting.module.tsでマイルコードです：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule, Routes} from '@angular/router'; 
import {IndexComponent} from './public/index/index.component'; 

const appRoutes: Routes = [ 
{ 
path: 'test', 
component: IndexComponent, 
data: { title: 'Index' } 
}, 
{path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule'}, 
{path: 'public', loadChildren: 'app/public/public.module#PublicModule'} 
]; 

@NgModule({ 
imports: [ 
CommonModule, 
RouterModule.forRoot(appRoutes) 
], 
exports: [ RouterModule ], 
declarations: [] 
}) 
export class RoutingModule { } 

これはapp.module.ts

で私のコードです

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {MatToolbarModule, MatMenuModule, MatIconModule} from '@angular/material'; 
import {HttpModule} from '@angular/http'; 
import { IndexComponent } from './public/index/index.component'; 
import {RoutingModule} from './routing.module'; 


@NgModule({ 
declarations: [ 
    AppComponent, 
    IndexComponent 
], 
imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    MatToolbarModule, 
    MatMenuModule, 
    MatIconModule, 
    HttpModule, 
    RoutingModule 
], 
providers: [], 
bootstrap: [AppComponent] 
}) 
export class AppModule { } 

最後に、public.module.tsで私のコード

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { PublicComponent } from './public.component'; 
import {RouterModule, Routes} from '@angular/router'; 

const appRoutes: Routes = [ 
{ 
path: '', 
component: PublicComponent 
} 
] 

@NgModule({ 
imports: [ 
CommonModule, 
RouterModule.forChild(appRoutes) 
], 
declarations: [] 
}) 
export class PublicModule { } 

私がに行く場合：

http://127.0.0.1:4200/test =>それは動作しますが、それはindex.component

の情報を表示しますhttp://127.0.0.1:4200/public =>リダイレクト先はhttp://127.0.0.1:4200

私は間違っていますか？それは "公共の作品を表示する必要があります！私の期待通りに。

追加情報：公共のモジュールでこの行RouterModule.forChild(appRoutes)にコメントすると、http://127.0.0.1:4200/publicに行きますが、「公開作品！」は表示されないので、appRoutesに問題があると思います。

Answer 1

私は問題が見つかりました、モジュールで使用されるすべてのコンポーネントは、宣言の設定の内側にある必要があります。

ので、public.module.ts内部の宣言は次のようになります。

declarations: [PublicComponent]