Question

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

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

browser_adapter.js：84 EXCEPTION：错误：未捕获（在承诺中）： TypeError：无法读取未定义
的属性'import'

我希望将来在另一个Parent模块中重用相同的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
});

My Home.route.ts如下所示：

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

My 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

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

2 个答案: