Angular 4应用程序内部的延迟加载

Question

I am trying to implement Lazy Loading into my application but am coming across an issue which I have been stuck on for a couple of hours.

I have my main app.module.ts file:

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

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

I also have a routing.module.ts file:

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' }
];

Then I want to Lazy Load the search.module.ts module in, to which the search.module.ts looks like the following:

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 { }

Finally, we have the 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 { }

For some reason the application loads up correctly and displays the Overview component fine. As soon as I navigate to /search I get an error saying:

Component OverviewComponent is not part of any NgModule or the module has not been imported into your module. Error: Component OverviewComponent is not part of any NgModule or the module has not been imported into your module.

Does anyone have an idea to why this is happening.

Answer 1

If you need to use the OverviewComponent somewere in your SearchModule , then you need to import the module in which HomeComponent is declared into your SearchModule .

If, here HomeComponent is declared in the main AppModule ; maybe you should move OverviewComponent into a shared module and import that shared module into both AppModule and SearchModule