J'essaie d'utiliser Angular2-crumbs avec lazy loader components dans mon projet. D'une façon ou d'une autre, le fil d'Ariane fonctionne bien, mais mon composant chargeur paresseux ne charge pas et ne renvoie aucune erreur dans le console non plus.Angular2-miettes et composant de chargement paresseux
Ce que j'ai compris du Angular2-crumbs code qu'il ne fonctionne qu'avec les composants enfants. Puisque mon exigence est d'utiliser le chargement paresseux, ce que j'ai fait, c'est que je redirige de app à root composant où j'ai tous les composants de chargement paresseux sous les enfants du composant root.
L'arrangement de mon code est donné ci-dessous:
app.routing.modules.ts
export const routes: Routes = [
{path: '', redirectTo: 'root', pathMatch: 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
CoreModule,
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(routes)
]
providers: []
bootstrap: [AppComponent]
})
export class AppModule {
}
app. component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
app.component.html
<router-outlet></router-outlet>
root-routing.module.ts
@NgModule({
imports: [
RouterModule.forChild([
{
path: '', component: RootComponent, children: [
{ path: '', component: HomeComponent },
{
path: 'screen/home', component: HomeComponent, data: { breadcrumb: 'Home' }, children:[
{ path: 'orders', loadChildren: './../app/orders/module#Module', data: { breadcrumb: 'Order management'} },
{ path: 'stocks', loadChildren: './../app/stocks/module#Module', data: { breadcrumb: 'Stock management' } },
]
}
]}
])
],
exports: [ RouterModule ]
})
export class RootRoutingModule {}
root.module.ts
@NgModule({
declarations: [
HomeComponent,
RedirectComponent,
RootComponent
],
imports: [
CoreModule,
BrowserModule,
BrowserAnimationsModule,
BreadcrumbModule.forRoot(),
HttpClientModule,
RootRoutingModule
],
providers: [
BannerService,
BlockService,
CanDeactivateGuard,
ConfirmationService,
CoreService,
GenericService,
HttpClient,
MessageService,
RedirectComponent,
]
})
export class RootModule {
}
root.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'root',
templateUrl: 'src/root/root.component.html',
styleUrls: ['src/root/root.component.css']
})
export class RootComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
root.component.html
<breadcrumb></breadcrumb>
<router-outlet></router-outlet>
Il n'y a pas de documentation supplémentaire fournie dans le Angular2-crumb repo donc je n'ai pas la moindre idée comment résoudre ce problème.
Si quelqu'un peut m'aider, je vous en serais reconnaissant.
Merci !!!