Angular 4 - Routes de chargement paresseux ne fonctionne pas

J'ai essayé de faire fonctionner le routage de charge paresseux, mais je ne pouvais pas. J'apprécie vraiment si vous pouvez m'aider.Angular 4 - Routes de chargement paresseux ne fonctionne pas

J'ai 3 modules PublicModule, AdminModule et AppModule

C'est ce que je pense (pour l'instant avec le module public):

.../publique => il doit afficher l'information à l'intérieur volet public

Ceci est du code à mi 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 { }

Ceci est mon code dans 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 { }

enfin, mon code dans 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 { }

Si je vais:

http://127.0.0.1:4200/test => cela fonctionne, il affiche les informations de index.component

http://127.0.0.1:4200/public => il redirige vers http://127.0.0.1:4200

Qu'est-ce que je fais mal? Il devrait afficher "travaux publics!" comme je l'attendais. Infos supplémentaires: si je commente cette ligne RouterModule.forChild(appRoutes) dans le module public, il va à http://127.0.0.1:4200/public mais il ne montre pas "travaux publics!", Donc je pense que quelque chose ne va pas avec appRoutes.

Source

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