Не удается перейти на ленивый маршрут загрузки в угловых 6 - PullRequest
Новая
       6

Не удается перейти на ленивый маршрут загрузки в угловых 6

0 голосов
/ 29 августа 2018

Я посмотрел на следующее, но я все еще не могу перейти к ленивым загруженным маршрутам. Я удалил canLoad и canActivate для целей тестирования. В моем случае мой родительский маршрут должен получить идентификатор.

Как мне перейти на ленивый загруженный модуль дочерних маршрутов?

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

Пожалуйста, посмотрите на PROJECTS SUB ITEMS SECTION -- LAZY LOADED в модуле маршрутизации приложения.

Модуль приложения 

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

Модуль маршрутизации приложений 

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 и Line - они должны быть загружены лениво 

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

Модуль объявлений Sub и Sub Line Компонентов приложения

Имеется импорт для модуля вспомогательной и линейной маршрутизации. Посмотрев на примеры, я не думаю, что мне нужно импортировать модуль маршрутизации где-либо еще. 

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

И, наконец, навигация по маршруту 

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

Что мне здесь не хватает, ребята? Мой маршрут должен получить удостоверение личности. Когда я импортирую маршруты и компоненты отдельно внутри модуля приложения, я могу перейти к этим нормам.

1 Ответ

0 голосов
/ 30 августа 2018

Порядок импорта в модуле приложения имеет значение. После исправления заказа он теперь работает. 

@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]
})
...