Angular2 nie może znaleźć modułu zagnieżdżonego

Question

Pracuję nad aplikacją internetową z dwoma modułami najwyższego poziomu i kilkoma modułami pod każdym z nich. Przykład:

• publicznego

  • rejestracja
  • logowanie

• portal

  • dashboard
  • Wynika
  • nominacje

Każdy z modułów zagnieżdżonych ma jeden lub więcej potencjalnych tras, usług i komponentów. Moduły publiczne i portalowe mają również inne wymagania dotyczące układu.

Co chciałbym zrobić, to podzielić mój kod na moduły dla każdej głównej sekcji powyżej. Jednak, gdy próbuję załadować moduł jako dziecko innej trasie, pojawia się błąd stwierdzając modułu nie można znaleźć:

error_handler.js:46 
EXCEPTION: Uncaught (in promise): Error: Cannot find module './dashboard/dashboard.module'. 

Oto moje pliki routingu:

/app/app.routing.ts 

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

export const appRouting: ModuleWithProviders = RouterModule.forRoot([ 
    { 
    path: 'portal', 
    loadChildren: 'portal/portal.module#PortalModule' 
    }, 
    { 
    path: '', 
    loadChildren: 'public/public.module#PublicModule' 
    } 
]); 


/app/portal/portal.routing.ts 

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { PortalComponent } from './portal.component'; 

export const portalRouting: ModuleWithProviders = RouterModule.forChild([ 
    { 
    path: '', 
    component: PortalComponent, 
    children: [ 
     { 
     path: 'dashboard', 
     loadChildren: './dashboard/dashboard.module#DashboardModule' 
     } 
    ] 
    } 
]); 

Moduł "panel" żyje na: /app/portal/dashboard/dashboard.module.ts, ale bez względu na to, do czego ustawię ścieżkę modułu w loadChildren, nie może go znaleźć.

Co robię źle? Używam WebPack zamiast SystemJS.

Answer 1

Korzystanie z ładowarki obietnicy es6 wydaje mi się skuteczne. Oto moje routery do tego punktu ...

app/app.routing.ts 
import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

export const appRouting: ModuleWithProviders = RouterModule.forRoot([ 
    { 
    path: 'portal', 
    loadChildren:() => require('es6-promise!./portal/portal.module')('PortalModule') 
    }, 
    { 
    path: '', 
    loadChildren:() => require('es6-promise!./public/public.module')('PublicModule') 
    } 
]); 

app/portal/portal.routing.ts 
import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { PortalComponent } from './portal.component'; 

export const portalRouting: ModuleWithProviders = RouterModule.forChild([ 
    { 
    path: 'portal', 
    component: PortalComponent, 
    children: [ 
     { 
     path: 'dashboard', 
     loadChildren:() => require('es6-promise!./dashboard/dashboard.module')('DashboardModule') 
     }, 
     { 
     path: 'results', 
     loadChildren:() => require('es6-promise!./results/results.module')('ResultsModule') 
     } 
    ] 
    } 
]); 

app/portal/dashboard/dashboard.routing.ts 
import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { DashboardComponent } from './dashboard.component'; 

export const dashboardRouting: ModuleWithProviders = RouterModule.forChild([ 
    { 
    path: '', 
    component: DashboardComponent 
    } 
]); 

i widzę prawidłową moc moich <router-outlet> tagów.

Answer 2

Poprawną ścieżką do modułu deski rozdzielczej będzie app/portal/dashboard/dashboard.module.

Z jakiegoś powodu webpack potrzebuje bezwzględnej ścieżki w tym przypadku. Nie zapomnij zrestartować serwera po zmianie ścieżki.