带有子路由的Angular 8延迟加载

Question

I am writing an Angular 8 app and I am trying to lazy load some modules. However, when the page loads, I get this error:

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

Specifically, I wish to load a module when a route is hit and a component loads. The problem is that the component is part of the module.

Here is code for the sub module, where the component is defined:

@NgModule({
  imports: [],
  declarations: [
    ...
    ProfileComponent
  ],
  exports: [
    ...
    ProfileComponent
  ]
 })
 export class ProfileModule { }

Here is the route definition in the parent module trying to dynamically load the sub-module:

const routes: Routes = [
  {
   path: 'projects/profile/:id', component: ProfileComponent,  
     loadChildren: () => {
       return import('./profile/profile.module').then(m => m.ProfileModule);
     },
     children: [
       { path: 'list/:id', component: ListComponent, outlet: 'sidebar' },
       { path: 'risk/:id', component: RiskComponent, outlet: 'sidebar' },
       ...
   ]
 }

Is there a way to load the Component and Module on navigate? I tried moving the offending ProfileComponent into the parent module, but it expects all of its sub components to exist when I navigate to the page (which is counter to the lazyloading). I can create a landing page that uses no sub components where I can click to redirect to my route that dynamically loads the sub module, but I would rather not add another layer of clicking to the app.

Answer 1

why just not use in parent module

const routes: Routes [{path:'projects/profile/:id', loadchildren: './profile/profile.module#ProfileModule']

and then in subModule

const subRoutes: Routes .....
@NgModule({
imports: [RouterModule.forChild(subRoutes)]
exports: [RouterModule]

for more info you can check Angular Routing & Navigation => Milestone 3: Heroes feature

Hope this helps ;-)

Answer 2

Structure of your app:

├── parent.module.ts/
│   ├── profile.module.ts/
│       └──profile.component.ts/

• If profile module hasn't been loaded yet, profile component doesn't exist in parent module's context, hence you got the error, "the module has not been imported into your module".

If I didn't misunderstand your question, you should declare another set of routes in ProfileModule like this:

ProfileModule (Not Parent Module)

const routes: Routes = [
   { path: '', component: ProfileComponent }, // /projects/profile/1
   { path: 'list/:id', component: ListComponent, outlet: 'sidebar' }, // /projects/profile/1/list/15 
   { path: 'risk/:id', component: RiskComponent, outlet: 'sidebar' } ///projects/profile/1/risk/20
]

//and then import it into your parent module RouterModule

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

ParentModule - remove ProfileComponent

const routes: Routes = [
  {
   path: 'projects/profile/:id', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule)
  }
]

It is correct to use the import keyword for lazy loading in Angular 8 since the string syntax has been deprecated but you can keep it less verbose by removing the return keyword.