Многоуровневая маршрутизация в угловых 6

Question

У меня есть один модуль по умолчанию app.module.ts в этом модуле я определяю один маршрут как:

 const mainRoutes: Routes = [
      {path:'',component:FrontComponent},
    ] 
    @NgModule({
      declarations: [
        AppComponent,
        AdminComponent,
        FrontComponent
      ],
      imports: [
        BrowserModule,
        FrontModule,
        AdminModule,
        RouterModule.forRoot(mainRoutes)
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

И у меня есть еще один модуль admin.module.ts это дочерний модуль приложения, и я использую для него маршрутизациюнапример:

const routes: Routes = [
    { path: 'admin',
      component: AdminComponent,
      children:[
        {path:'',component:AdminmainComponent},
        {path:'home',component:HomeComponent},
        {path:'matches',component:MatchesComponent},
        {path:'tournament',component:TournamentComponent},
        {path:'teams',component:TeamsComponent}
        ]
    }
      ];

    @NgModule({const routes: Routes = [
  {
    path: 'menus', component: MenusComponent, children: [
      { path: 'create', component: CreateComponent },
      { path: 'list', component: ListComponent },
      { path: 'view/:id', component: ViewComponent },
      { path: 'edit/:id', component: CreateComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MenusRoutingModule { }
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class AdminRoutingModule { }

admin.module.ts содержит еще один модуль меню подмодуля и является дочерним по отношению к администратору, содержит некоторые компоненты, такие как создание, просмотр, редактирование. Я хочу направить его следующим образом:

const routes: Routes = [
{
    path: 'menus', component: MenusComponent, children: [
          { path: 'create', component: CreateComponent },
          { path: 'list', component: ListComponent },
          { path: 'view/:id', component: ViewComponent },
          { path: 'edit/:id', component: CreateComponent }
        ]
      }
    ];

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

Но я получил ошибку в консоли [object object]

Answer 1

В вашем модуле приложения необходимо указать маршрут администратора с отложенной загрузкой

const mainRoutes: Routes = [
      {path:'',component:FrontComponent},
      {path:'admin', loadChildren: './admin.module#AdminModule'
    ] 
    @NgModule({
      declarations: [
        AppComponent,
        AdminComponent,
        FrontComponent
      ],
      imports: [
        BrowserModule,
        FrontModule,
        AdminModule,
        RouterModule.forRoot(mainRoutes)
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Тогда в вашем админ-модуле есть маршруты для администратора и маршрут ленивого меню загрузки таким же образом

const routes: Routes = [
    { path: 'admin',
      component: AdminComponent,
      children:[
        {path:'',component:AdminmainComponent},
        {path:'home',component:HomeComponent},
        {path:'matches',component:MatchesComponent},
        {path:'tournament',component:TournamentComponent},
        {path:'teams',component:TeamsComponent},
        {path:'teams',loadChildren: './menu.module.ts#MenuModule'},
        ]
    }
      ];

    export class AdminRoutingModule { }

И определите маршруты для вашего меню в вашем модуле меню

Answer 2

У модуля меню загрузка ленивая и будет выглядеть так:

Админ роутинг

export const adminRoutes: Routes = [
{
    path: "admin", (...)
    children: [

        {
            path: "admin",
            children: [
               {path:'', pathMatch:'full',component:AdminmainComponent},
               {
                  path: "menus", 
                  // if you want lazy
                  loadChildren: "./components/menus/menus.module#MenusModule"
                  // if not... then:
                  //children: [...menuRoutes]
              },
             {path:'home',component:HomeComponent},
             {path:'matches',component:MatchesComponent},
             {path:'tournament',component:TournamentComponent},
             {path:'teams',component:TeamsComponent}


            ]

    ]
}, ... ];

и в menu.module:

 const menuRoutes = [
        { path: 'create', component: CreateComponent },
              { path: 'list', component: ListComponent },
              { path: 'view/:id', component: ViewComponent },
              { path: 'edit/:id', component: CreateComponent }
    ]

если вы делаете что-то подобное, то ваши модули должны загружаться лениво (если вы измените LoadStrategy)