Angular 2：复杂模块架构中路由器树未正确加载

Question

我有一个复杂的模块架构来分隔我的 Angular2 应用程序中的域。 好吧，我遵循英雄之旅教程中的路由架构，每个模块都有自己的 app-routing.module 来声明路由：

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

在我的 app-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 {}

在我的 features-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/features/order 时工作正常，但我可以导航到 localhost:3000/order 也能正常工作。

Angular2 中的映射路由器是如何工作的？我的路由有问题吗？我只需要功能/订单 URL 即可。

非常感谢。

Answer 1

人们，

我以另一种方式成功实现了，我必须删除分层模块中模块的导入，以便 Angular-route 不使用 RootRoutes 加入路由，这样我的组件是独立的和延迟加载的。如果有人需要类似的东西，请弄清楚我的架构：

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

在我的 app-routing-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 {}

按照我的顺序-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 中创建一个具有此架构的存储库，我将使用链接更新此评论。

谢谢！