Angular2延迟加载因共享模块而失败答案

【问题标题】：Angular2 Lazy loading Fails with a shared moduleAngular2延迟加载因共享模块而失败
【发布时间】：2017-05-16 20:42:48
【问题描述】：

我创建了一个成功延迟加载的 AccountModule，但是当我将我的 SharedModule 添加到 AccountModule 时，我的应用似乎忘记了我所有急切加载的模块，并且出现错误：

组件 FoodComponent 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。

其中FoodComponent 是一个急切加载的组件，在通过延迟加载调用AccountModule 之前，它都已正确加载和渲染。如果我从应用程序中删除该组件，那么下一个急切加载的组件会发送相同的问题。我的SharedModule 是什么导致了这一切？

shared.module.ts

// ... imports ...

@NgModule({
  imports: [
    CommonModule,
    MaterialModule.forRoot(),
    ReactiveFormsModule,
    AppRoutingModule
  ],
  declarations: [     
    CalNavComponent, 
    IngredientsListComponent, 
  ],
  exports: [ 
    MaterialModule, 
    ReactiveFormsModule, 
    CommonModule, 
    AppRoutingModule,

    CalNavComponent, 
    IngredientsListComponent, 
  ],
  providers: [ 
    UserDataService 
  ],
})
export class SharedModule { }

account.module.ts

// ... imports ...

const routerConfig: Routes = [{
  path: '',
  component: AccountComponent
}]

@NgModule({
  imports: [
    SharedModule, /* Works fine when this is gone */
    RouterModule.forChild(routerConfig)
  ],
  declarations: [ 
    AccountComponent
  ],
  exports:[
    AccountComponent
  ]
})
export class AccountModule { } // adding 'default' results in "cannot find module at app/features/account/account.module"

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: 'food', 
    pathMatch: 'full'
  },
  { 
    path: 'account',
    loadChildren: 'app/features/account/account.module#AccountModule'
    // component: AccountComponent, /* This worked fine*/
  },
  {
    path: 'food',
    component: FoodComponent
  },
  //... more paths
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule {
  constructor() { }
}

【问题讨论】：

为什么要从共享中导出AppRoutingModule？并不是说这是问题所在，但这是非常可疑的代码。
我想我已经遵循了一个过时的路由模块教程。我已经使用 ModuleWithProviders 解决了这个问题，并将其添加到 AppModule 单独。我会把答案放在一起。

标签： angular typescript lazy-loading

【解决方案1】：

显然我正在关注一个过时的AppRoutingModule 教程。我改用了ModuleWithProviders 模块，而不是传统的NgModule 模块。

account.routing.ts

import { AccountComponent } from './account.component';
import { ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [{
  path: '',
  component: AccountComponent
}]

export const AccountRouting: ModuleWithProviders = RouterModule.forChild(routes)

account.module.ts

import { AccountRouting } from './account.routing';
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { AccountComponent } from '../account/account.component';

@NgModule({
  imports: [
    SharedModule,
    AccountRouting
  ],
  declarations: [ 
    AccountComponent
  ],
  exports:[
    AccountComponent
  ]
})
export class AccountModule { }

app.routing.ts

import { FoodComponent } from './features/food/food.component';
// import { AccountComponent } from './features/account/account.component';
import { ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


const routes: Routes = [
  {
    path: '',
    redirectTo: 'calendar',
    pathMatch: 'full'
  },
  { 
    path: 'account',
    loadChildren: 'app/features/account/account.module#AccountModule'
    //component: AccountComponent,
  },
  {
    path: 'food',
    component: FoodComponent
  },
  //... more routes
];

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

【讨论】：