Winkel-4 Lazy Loading und Routen, die nicht arbeiten

Habe ich ein Modul mit dem Strecken meiner app. Eine dieser Routen ist ein lazy loading-Modul.

Das problem ist, dass dieses lazy loading module haves innerhalb eines Routen für die untergeordneten Komponenten. Aber auf mein router config diese Routen nicht angezeigt wird... Also ich nenne das faul-Modul nicht alles zeigen auf meinem Bildschirm.

Hier ist mein router config (main-Modul):

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)
.
.
.

Auf meine faul-Modul:

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)

Wenn ich drucken meine router config dieser Routen declaren auf meine faul-Modul nicht anzeigen:

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

Können Sie mir helfen?

haben Sie gesehen, dass irgendein Fehler in der Konsole nämlich nicht gefunden-Modul oder so etwas..

InformationsquelleAutor Ali Briceño | 2017-06-04

  1. 7

    War das problem mit der Art und Weise habe ich erklärt, meine route auf meinem lazy-Modul:

    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]
            }
        ]
    }
]

    Den path von CalendarComponent musste geändert von:

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

    dem unten:

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

    Dank @jotatoledo auf gitter, die mir helfen, dieses Problem zu lösen.

    InformationsquelleAutor Ali Briceño

  2. 0

    in das main Modul von routing -, die Sie verwendet haben forChild laden die Wege, es gibt keinen root-router zu laden Kinder.

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

    dann eher, dass Sie verwenden sollten, 

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

    Eine weitere wichtige Sache zu erinnern, über lazy loading, die Sie nutzen sollten ** ModuleWithProviders** core Modul

    EX

    Lazymodule route

    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);

    main_module

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

    gibt es einen interessanten blog über das lazy load :
    lazyload-tutorial

    InformationsquelleAutor Shivam Mishra

Schreibe einen Kommentar