Угловой 6: один основной защищенный родительский маршрут с модулем

Question

В настоящее время мы создаем приложение для администрирования с использованием Angular 6. Мы только начали, но хотим на раннем этапе применять методы лучших команд и хотим использовать оптимальную структуру и модульность, которые подходят нам лучше всего. Для этого мы решили обработать маршруты для каждого модуля (не хочу иметь раздутый отдельный файл) с использованием RouterModule.forRoot и RouterModule.forChild.

Будучи администрацией, мы хотим, чтобы все приложение было защищено (используя Guard). Однако мы сталкиваемся с проблемой, касающейся родительского маршрута и дочерних элементов, когда речь идет о модульности маршрутов.

Допустим, у нас есть основной AppRoutingModule, который содержит следующее:

const appRoutes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    canActivate: [AuthGuard],
    children: []
  },
  { path: 'oauth/callback', component: AuthComponent }
];

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

Теперь, скажем, у нас есть другой модуль, UsersRoutingModule, который содержит:

const usersRoutes: Routes = [
  {
    path: '/users',
    component: UsersComponent
  }
];

@NgModule({
  exports: [
    RouterModule
  ],
  imports: [
    RouterModule.forChild(usersRoutes)
  ]
})
export class UsersRoutingModule {}

Как мы можем определить маршруты в модулях, такие как приведенные выше, эквивалентны этому:

[
  {
    path: '',
    component: LayoutComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'users', component: UsersComponent }
    ]
  },
  { path: 'oauth/callback', component: AuthComponent }
]

Answer 1

Здравствуйте, вы все делаете правильно, так что не волнуйтесь, лучшая практика (насколько я знаю) состоит в том, чтобы отделить каждый больший (логически связанный) фрагмент кода в отдельном модуле (например, administration.module, * 1002). *, shopping-cart.module, ....). Каждый модуль должен иметь свой собственный модуль маршрутизации (как и второй опубликованный вами фрагмент), и все эти модули должны быть загружены лениво в свой родительский модуль маршрутизации.

// App.module
//** Some imports */
@NgModule({
  imports: [
    ...
    AppRoutingModule,
    ...
  ],
  declarations: [
    ...
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

// App.routing-module

//** Some imports */

const appRoutes: Routes = [
  // Lazy loaded module
  {
    path: 'crisis-center',
    loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
  }
  { path: '**', component: PageNotFoundComponent }
];
 
@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule],
  providers: [CanDeactivateGuard]
})
export class AppRoutingModule {}


//** crisis-center.module/
//** Some imports */
@NgModule({
  imports: [
    ...
    CrisisCenterRoutingModule,
    ...
  ],
  declarations: [
    ...
  ],
})
export class CrisisCenterModule {}

//** crisis-center.routing
//** Some imports */
const crisisCenterRoutes: Routes = [
  {
    path: '',
    component: Some-wrap-component,
    children: [
      {
        path: '',
        component: Some-component
      }
    ]
  }
];
 
@NgModule({
  imports: [
    RouterModule.forChild(crisisCenterRoutes)
  ],
  exports: [
    RouterModule
  ],
})
export class CrisisCenterRoutingModule { }

Если ваш Admin.module очень большой, вы можете разделить логическую форму, например, на несколько модулей (manage-users.module, manage-projects.module, ...) и снова использовать стратегию отложенной загрузки.

P.S. Большая часть кода взята из Angular Docs , надеюсь, это помогло вам, также я советую вам взглянуть на различные preloadingStrategy, если вы хотите реализовать все лучшие практики маршрутизации:)