Angular 2：在複雜模塊體系結構中路由器樹未正確加載

我有一個複雜的模塊體系結構來分隔我的Angular2應用程序中的域。喏，我是一個路由木構建築中的英雄之旅教程至極每個模塊有自己的應用程序，routing.module申報路線：Angular 2：在複雜模塊體系結構中路由器樹未正確加載

app.module.ts（APP-routing.module.ts）
- features.mdoule.ts（features-routing.module.ts）。
  - order.module.ts（order-routing.module.ts）。

在我的應用程序，routing.module.ts：

const appRoutes: Routes = [ 
 
    { path: '', redirectTo: "dashboard", pathMatch: 'full'}, // always first 
 
    { path: '', loadChildren:() => AuthModule }, 
 
    { path: '', loadChildren:() => FeaturesModule, canActivate: [AuthGuard]}, 
 
    { path: '**', component: PageNotFoundComponent } // always last 
 
]; 
 

 
@NgModule({ 
 
    imports: [ 
 
    RouterModule.forRoot(appRoutes) 
 
    ], 
 
    exports: [ 
 
    RouterModule 
 
    ] 
 
}) 
 
export class AppRoutingModule {}

在我的特點，routing.module.ts：

const featuresRoutes: Routes = [ 
 
    { path: 'features', loadChildren:() => OrderModule }, 
 
// ... other modules 
 
]; 
 

 
@NgModule({ 
 
    imports: [ 
 
    RouterModule.forChild(featuresRoutes) 
 
    ], 
 
    exports: [ 
 
    RouterModule 
 
    ] 
 
}) 
 
export class FeaturesRoutingModule {}

在我的訂單routing.module.ts：

const orderRoutes: Routes = [ 
 
    { path: 'order', component: OrderListComponent, data: { info: { title: 'Orders' } } } 
 
]; 
 

 
@NgModule({ 
 
    imports: [ 
 
    RouterModule.forChild(orderRoutes) 
 
    ], 
 
    exports: [ 
 
    RouterModule 
 
    ] 
 
}) 
 
export class OrderRoutingModule {}

在情況下，當我瀏覽到localhost：3000 /特徵/順序工作完美，但我可以導航到本地主機：3000 /訂單，也可以工作。

Angular2中的映射路由器是如何工作的？我的路由有問題嗎？我只需要功能/訂單網址作品。

非常感謝。

來源

2017-03-15 Eron Alves

人，

我成功地以另一種方式實現的，我不得不刪除我的模塊分層模塊進口角航線不參加與RootRoutes的路線，這樣我的組件是獨立和懶惰Loadeds。弄清楚我的建築，如果有人需要類似的東西：

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
 
     import { NgModule } from '@angular/core'; 
 
     import { FormsModule } from '@angular/forms'; 
 
     import { HttpModule } from '@angular/http'; 
 

 
     import { AppRoutingModule } from './app-routing.module'; 
 
     import { CoreModule } from './core/core.module'; 
 
     import { AuthModule } from './auth/auth.module'; 
 
     import { PartialsModule } from './partials/partials.module'; 
 

 
     import { AppComponent } from './app.component'; 
 

 
     const modules = [ 
 
      BrowserModule, 
 
      FormsModule,  
 
      HttpModule, 
 
      CoreModule, 
 
      AuthModule, 
 
      PartialsModule, 
 
     // FeaturesModule, I remove the import declaration, only app- routing.module.ts imports my module for Lazy Loading 
 
      AppRoutingModule 
 
     ]; 
 

 
     const components = [ 
 
      AppComponent 
 
     ]; 
 

 
     @NgModule({ 
 
      declarations: [ 
 
      ...components 
 
      ], 
 
      imports: [ 
 
      ...modules 
 
      ], 
 
      providers: [], 
 
      bootstrap: [...components] 
 
     }) 
 
     export class AppModule { }

在我的應用程序的路由-module.ts：

const routePath = 'features'; 
 

 
const routeData = { 
 
    info: { 
 
     title: 'Features', 
 
     withoutNavigate: true 
 
    } 
 
}; 
 

 
const featuresRoutes: Routes = [ 
 
    { path: routePath, loadChildren:() => OrderModule , data: routeData} 
 
]; 
 

 
@NgModule({ 
 
    imports: [ 
 
    RouterModule.forChild(featuresRoutes) 
 
    ], 
 
    exports: [ 
 
    RouterModule 
 
    ] 
 
}) 
 
export class FeaturesRoutingModule {}

在我的order-routing.module中。TS：

const orderRoutes: Routes = [ 
 
     { path: 'order', component: OrderListComponent, data: { info: { title: 'Orders' } } } 
 
    ]; 
 

 
    @NgModule({ 
 
     imports: [ 
 
     RouterModule.forChild(orderRoutes) 
 
     ], 
 
     exports: [ 
 
     RouterModule 
 
     ] 
 
    }) 
 
    export class OrderRoutingModule {}

我要去創建這個架構在github上的存儲庫，我該怎麼更新的鏈接此評論。

謝謝！

來源

2017-03-15 21:22:50

Angular 2：在複雜模塊體系結構中路由器樹未正確加載

回答

相關問題