加载多个模块时 Angular 2 RC5 的路由问题

Question

我正在尝试将子模块加载到另一个子模块中，如下图所述：

List of modules with routing info

当我尝试在“主模块”中加载具有自己的路由的子模块“材料模块”时，它会引发以下错误：

browser_adapter.js:84 例外：错误：未捕获（承诺）： TypeError：无法读取未定义的属性“导入”

我想将来在另一个父模块中重用相同的Material.module。

这是我的 app.routing.ts：

const appRoutes: Routes = [{
    path: '',
    redirectTo: '/gologin',
    pathMatch: 'full'
  },
   {
    path: 'gologin',
    loadChildren: 'app/login/login.module'
  },
   {
    path: 'goHome',
    loadChildren: 'app/home/home.module'
}]
export const routing = RouterModule.forRoot(appRoutes, {
  useHash: true
});

我的 Home.route.ts 如下所示：

const appRoutes1: Routes = [{
    path: '',
    component: 'HomeComponent',
    children:[
   {
    path: '',
    loadChildren: 'app/Material/Material.module'
}]}]
export const routing = RouterModule.forChild(appRoutes1);

我的 Home.module.ts 如下所示：

import { routing } from './home.routes';
import {MaterialModule} from '../Material';
import {HomeComponent} from './home';


@NgModule({
  declarations: [
    // Components / Directives/ Pipes
    HomeComponent,

  ],
  imports: [
    MaterialModule,
    routing
  ],
 // providers:[HeaderService]
})
export  class HomeModule {
}

我的 Material.route.ts 如下所示：

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

import { OrderComponent }   from './Order/OrderComponent.component';
import { InventoryComponent }   from './Inventory/InventoryComponent.component';
import { POComponent }   from './PO/POComponent.component';

export const appRoutes1: Routes = [
  {
    path: '',
    component: OrderComponent 
  },
{
    path: '/inventory',
    component: InventoryComponent 
  },
{
    path: '/PO',
    component: POComponent 
  },

];

export const routing = RouterModule.forChild(appRoutes1);

我的 Material.module.ts 如下所示：

@NgModule({
  declarations: [
    // Components / Directives/ Pipes
    OrderComponent ,InventoryComponent ,POComponent 
  ],
  imports: [
        routing //Material.routing
  ],
})
export class MaterialModule {
}

如何在 Angular 2 RC5 的另一个子模块中解决此类子模块加载问题。

Answer 1

这就是我所做的：

app.routes.ts

export const routes: Routes = [
    {path: '', redirectTo: '/login', terminal: true},
    {path: 'login', component: LoginComponent},
    {path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module#DashboardModule', canActivate : [AuthGuardService]}
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

dashboard.module.ts

@NgModule({
    declarations: [
        DashboardComponent
    ],
    imports: [CommonModule, RouterModule, routing, VirementModule, AccountsModule],
    exports: [DashboardComponent],
    providers: [
        AccountsService
    ]
})
export class DashboardModule { }

dashboard.routing.ts

export const routing: ModuleWithProviders = RouterModule.forChild([
    { path: 'accounts', component: AccountsFragment},
    { path: 'transfert/:from/:to', component: BadVirementWizardComponent, data: {backRoute: 'dashboard/accounts'}},
    { path: 'virement', component: BadVirementWizardComponent, data: {backRoute: 'dashboard/accounts'}},
    { path: 'browser', component: BadBrowserComponent}
]);

这在静态加载 (LoginComponent) 下工作得很好，但即使它在延迟加载 (DashboardModule) 下工作，我仍然无法使用多个。

希望对你有帮助。

Answer 2

为了在应用程序的不同部分重用模块，您需要将其设置为 SharedModule ：请参阅Shared NgModule Documentation