无法导航到角度6中的延迟加载路线

Question

I have looked at the following but i still can't navigate to the lazy loaded route(s). I have removed canLoad and canActivate for testing purposes. In my case, my parent route needs to receive an id.

How can I navigate to lazy loaded module child routes?

https://www.concretepage.com/angular/angular-canload-guard-example

Please take a look at PROJECTS SUB ITEMS SECTION -- LAZY LOADED in app routing module.

App Module

@NgModule({
  declarations: [
    AppComponent,
    FooterComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    //RouterModule,
    AppMaterialModule, //angular material components
    AppRoutingModule, //all routes are specified here, sub and line components module is specified here which in turn uses its own routing module
    AppSharedModule, //shared modules
    AppComponentsModule, //this has the components declared
    NgIdleKeepaliveModule.forRoot()
  ],
  //Title is the service by angular, using it for putting in document titles, check app.component
  providers: [Title, DataService, AuthService, AuthGuard, UtilityEnumService, LocalStorageService, ErrorMessageService, GroupService, ProgressBarService ], 
  bootstrap: [AppComponent]
})
export class AppModule { }

App Routing Module

const appRoutes: Routes = [
  { path: '', component: HomeComponent, pathMatch: "full", data: { title: 'Home' } }, 
  { path: 'home', component: HomeComponent, data: { title: 'Home' } },

  /****************   PROJECTS MAIN SECTION *********************/
  { path: 'projects', component: ProjectsComponent, canActivate: [AuthGuard], data: { title: 'Projects' } },
  { path: 'projects/add', component: ProjectEditComponent, canActivate: [AuthGuard], data: { title: 'Add Project' } }, //new project
  { path: 'projects/:projectId', component: ProjectDetailComponent, canActivate: [AuthGuard], data: { title: 'Project Detail' } }, //detail - keep it before below edit
  { path: 'projects/:projectId/edit', component: ProjectEditComponent, canActivate: [AuthGuard], data: { title: 'Edit Project' } },

  /****************   PROJECTS SUB ITEMS SECTION -- LAZY LOADED *********************/
  {
    /* for easy loading, moved the sub and line to app-routing-sub-line.module and used inside app-components-sub-line.module */
    path: 'projects/:projectId/sub', loadChildren:'./app-components-sub-line.module#AppComponentsSubAndLineModule'
  },

  /****************   default, keep it at the bottom *********************/
  { path: '**', component: PageNotFoundComponent, data: { title: 'Page Not Found' } }
];

const routingConfig: ExtraOptions = {
  paramsInheritanceStrategy: 'always',
  preloadingStrategy: PreloadAllModules
}

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes, routingConfig) 
  ],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

App Routing Sub and Line -- These need to be lazy loaded

const appSubAndLineRoutes: Routes = [
  {
    //for lazy loading the parent route needs to be empty since we have placed this inside the app-routing.module
    //path: 'projects/:projectId/sub', component: ProjectSubComponent, canActivate: [AuthGuard], data: { title: 'Project Sub' },
    path: '', component: ProjectSubComponent, data: { title: 'Project Sub' },
    children: [
      //catch all
      { path: '', component: SelectTheItemComponent, data: { title: 'Project Sub' } },
      { path: 'add', component: ProjectSubEditComponent, data: { title: 'Add Sub' } }, //new sub project
      { path: ':subId', component: ProjectSubDetailComponent, data: { title: 'Sub View' } }, //View - keep it before below edit
      { path: ':subId/detail-list', component: ProjectSubDetailListComponent, data: { title: 'Sub Detail' } }, //Detail - keep it before below edit
      { path: ':subId/edit', component: ProjectSubEditComponent, data: { title: 'Edit Sub' } },
      { path: ':subId/config-edit', component: ProjectSubConfigComponent, data: { title: 'Edit Sub Config' } },
      { path: ':subId/line/add', component: ProjectSubLineEditComponent, data: { title: 'Add Sub Line' } },
      { path: ':subId/line/:lineId/edit', component: ProjectSubLineEditComponent, data: { title: 'Edit Sub Line' } },
      { path: ':subId/line/:lineId/config', component: ProjectSubLineConfigComponent, data: { title: 'Config Sub Line' } },
      { path: ':subId/line/:lineId/view', component: ProjectSubLineViewComponent, data: { title: 'View Sub Line' } }
    ]
  }
];

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

export class AppRoutingSubAndLineModule { }

App Component Sub and Sub Line declarations module

This has the import for the sub and line routing module. After looking at the examples, i don't think that i need to import routing module anywhere else.

@NgModule({
  declarations: [
    ProjectSubComponent,
    ProjectSubListComponent,
    ProjectSubDetailComponent,
    ProjectSubEditComponent,
    ProjectSubConfigComponent,
    ProjectSubDetailListComponent,
    ProjectSubLineEditComponent,
    ProjectSubLineConfigComponent,
    ProjectSubLineViewComponent,
    ProjectSubLineHdrComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingSubAndLineModule, //sub and line routing module
    AppSharedModule //shared module
  ],
  exports: [
  ]
})

export class AppComponentsSubAndLineModule { }

And finally navigating to the route

this.router.navigate(['projects', id, 'sub']);

What am i missing here guys? My route needs to get an ID. When i import the routes and components separately inside the app module, i can navigate to these fine.

Answer 1

The order of imports in app module matters. After fixing the order, it is now working .

@NgModule({
  declarations: [
    AppComponent,
    FooterComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppMaterialModule, //angular material components
    RouterModule,
    AppSharedModule, //shared modules
    AppComponentsModule, //this has the general components decalred that we havent put in shared or child modules
    AppRoutingModule, //all general routes are here. keep it last
    NgIdleKeepaliveModule.forRoot()
  ],
  //Title is the service by angular, using it for putting in document titles, check app.component
  providers: [Title, DataService, AuthService, AuthGuard, UtilityEnumService, LocalStorageService, ErrorMessageService, GroupService, ProgressBarService ], 
  bootstrap: [AppComponent]
})