Question

我正在尝试将Lazy Loading实现到我的应用程序中，但遇到了一个问题，我已经坚持了几个小时。

我有我的主 app.module.ts 文件：

import { AppComponent } from './app.component';
import { OverviewComponent } from './application/overview/overview.component';

@NgModule({
  declarations: [
    AppComponent,
    OverviewComponent,
  ],
  imports: [
    RoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

我还有一个 routing.module.ts 文件：

const appRoutes: Routes = [
  { path: '', redirectTo: 'overview', pathMatch: 'full' },
  { path: 'overview', component: OverviewComponent },
  { path: 'search', loadChildren: '../../application/search/search.module#SearchModule' },  
  { path: 'policy', loadChildren: '../../application/policy/policy.module#PolicyModule' },
  { path: 'claim', loadChildren: '../../application/claim/claim.module#ClaimModule' }
];

然后我想延迟加载的 search.module.ts 在模块中，向其中的 search.module.ts 如下所示：

import { SearchRoutingModule } from './search-routing.module';
import { MaterialModule } from '../../configuration/material/material.module';
import { SharedModule } from '../../application/shared/shared.module';
import { SearchComponent } from '../search/search.component';

@NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    SharedModule,
    SearchRoutingModule
  ],
  declarations: [SearchComponent]
})
export class SearchModule { }

最后，我们有 search-routing.module.ts

import { SearchComponent } from '../search/search.component'  

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

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

export class SearchRoutingModule { }

由于某种原因，应用程序正确加载并显示Overview组件。一旦我导航到/搜索，我就会收到错误消息：

组件概述组件不是任何NgModule的一部分，或者模块尚未导入模块。错误：组件概述组件不是任何NgModule的一部分，或者模块尚未导入模块。

有没有人知道为什么会这样。

Answer 1

如果您需要在OverviewComponent中使用SearchModule，那么您需要将声明HomeComponent的模块导入SearchModule。

如果，HomeComponent在主AppModule中声明了OverviewComponent;也许您应该将AppModule移到共享模块中，然后将该共享模块导入SearchModule和addResourcePath

在Angular 4应用程序中{懒惰加载

1 个答案: