web-dev-qa-db-fra.com

Angular 4 Chargement paresseux et itinéraires ne fonctionnent pas

J'ai un module avec les itinéraires de mon application. L'une de ces routes est un module de chargement paresseux.

Le problème est que ce module de chargement paresseux possède des routes pour les composants enfants. Mais sur la configuration de mon routeur, ces routes n'apparaissent pas ... Ainsi, lorsque j'appelle le module paresseux, rien ne s'affiche sur mon écran.

Voici la configuration de mon routeur (module principal):

export const MODULE_ROUTES: Route[] =[
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard] },
    { path: 'calendar', loadChildren: 'app/dashboard/calendar/calendar-module.module#CalendarModuleModule',canActivate: [AuthGuard]}, 
    { path: '**', component: NoPageFoundComponent, pathMatch: 'full' }
]
.
.
.


@NgModule({
    imports: [
        RouterModule.forChild(MODULE_ROUTES)
.
.
.

Sur mon module paresseux:

export const MODULE_CALENDAR_ROUTES: Route[] = [
    {
        path: 'calendar', component: CalendarComponent, canActivateChild: [AuthGuard, CalendarGuard],
        children: [
            {
                path: '', component: MainCalendarComponent, canActivateChild: [AuthGuard, CalendarGuard]
            },
            {

                path: 'user', component: EditEventComponent, canActivateChild: [AuthGuard, CalendarGuard]
            }
        ]
    }
]

.
.
.

@NgModule({
    imports: [
        SharedModule,
.
.
.
        RouterModule.forChild(MODULE_CALENDAR_ROUTES)

Si j'imprime ma configuration de routeur, les routes indiquées sur mon module différé ne s'affichent pas:

Routes:  [
  {
    "path": "dashboard",
    "canActivate": [
      null
    ]
  },
  {
    "path": "calendar",
    "loadChildren": "app/dashboard/calendar/calendar-module.module#CalendarModuleModule",
    "canActivate": [
      null
    ]
  },
  {
    "path": "**",
    "pathMatch": "full"
  },
  {
    "path": "dashboard"
  }
]

Pouvez-vous m'aider?

angularlazy-loadingangular2-routingangular-module
4
Ali Briceño

Le problème était avec la façon dont j'ai déclaré mon itinéraire sur mon module paresseux:

export const MODULE_CALENDAR_ROUTES: Route[] = [
    {
        path: 'calendar',
        component: CalendarComponent,
        canActivateChild: [AuthGuard, CalendarGuard],
        children: [
            {
                path: '',
                component: MainCalendarComponent,
                canActivateChild: [AuthGuard, CalendarGuard]
            },
            {

                path: 'user',
                component: EditEventComponent,
                canActivateChild: [AuthGuard, CalendarGuard]
            }
        ]
    }
]

La path de CalendarComponent devait changer de:

path: 'calendar', // wrong
component: CalendarComponent,
...

au dessous:

path: '', // right
component: CalendarComponent,
...

Merci à @jotatoledo on gitter qui m'aide à résoudre ce problème.

7
Ali Briceño

dans le module de routage principal que vous avez utilisé forChild pour charger les chemins, il n'y a pas de routeur racine pour charger les enfants.

 @NgModule({
    imports: [
    RouterModule.forChild(MODULE_ROUTES)
  ]})

plutôt que que vous devriez utiliser 

@NgModule({
    imports: [
    RouterModule.forRoot(MODULE_ROUTES)
 ]})

Une autre chose importante à retenir concerne le chargement paresseux que vous devriez utiliser ** ModuleWithProviders ** du module principal

EX

Itinéraire Lazymodule

import { NgModule, ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [{
    path: '',
    component: ConsumerComponent,
    children: [{
        path: '',
        component: DashboardComponent
}]

export const ConsumerRoutingModule: ModuleWithProviders = RouterModule.forChild(routes);

module principal

@NgModule({
    imports: ['ConsumerRoutingModule']
})

il existe un blog intéressant sur la charge paresseuse: tutoriel lazyload

0
Shivam Mishra