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

Question

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

angularangular2-routing

3

我正在尝试按照以下图片中的描述在另一个子模块中加载一个子模块：

带有路由信息的模块列表

当我尝试在“主页模块”中加载具有自己路由的“Material模块”时，它会抛出以下错误：

browser_adapter.js:84 异常：错误：未捕获（在承诺中）：类型错误：无法读取未定义的“import”属性

我想在将来的另一个父模块中重用相同的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中，如何解决这种子模块加载到另一个子模块的问题。

- Irus

你能提供完整的 app.routing.ts、home.module.ts 和 home.route.ts 吗？ - Patrice

@Patrice，我已经更新了问题并提供了完整的细节。 - Irus

尝试静态加载模块（而非使用loadChildren）我发现这样更易于理解和工作。在Home.module中，虽然通过路由动态加载MaterialModule，但你应该选择静态导入。静态导入会预加载模块，达不到延迟加载的目的。 - Patrice

2个回答

0

为了在应用程序的不同部分重复使用一个模块，您需要将其制作为 SharedModule：请参见Shared NgModule Documentation。

- Patrice

谢谢。我也使用了共享模块。但是我需要使用一个在另一个子模块中具有路由的模块。 - Irus

你应该将这些额外的信息包含在你的新回答中。 - Nicolas Henneaux

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Patrice · Accepted Answer

这是我所做的：

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）一起工作，我仍然不能在多个...中工作。

希望这有所帮助。