Question

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

Component 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"

应用-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() { }
}

Answer 1

显然我正在学习过时的AppRoutingModule教程。我没有使用传统的NgModule模块，而是切换到ModuleWithProviders模块。

<强> 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)

Angular2延迟加载失败，共享模块

1 个答案: