Angular 4 - 懶加載路由不起作用

我試圖讓懶加載路由工作，但我不能。如果你能幫助我，我真的很感激。Angular 4 - 懶加載路由不起作用

我有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，但它不顯示「public works！」，所以我認爲appRoutes出了問題。

來源

2017-10-17 Andrès Mauricio Peña Carmona