最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Split routes into separate modules in angular 6 - Stack Overflow

programmeradmin1浏览0评论

I'm working on an Angular 6 application. Currently I'm struggling with routing. I'm interested, whether mine structure, what I have imagined can work or not. So it looks like this:

App module - contains main routing with some parent route, where layout is defined. Like this:

const routes: Routes = [
{
    path: 'login',
    ponent: LoginComponent
},
{
    path: '',
    ponent: LayoutComponent,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
    // {
    //   path: 'brands',
    //   loadChildren: 'app/modules/brands/brands.module#BrandsModule',
    //   pathMatch: 'prefix'
    // }
    ]
}
];

@NgModule({
    imports: [RouterModule.forRoot(routes), BrandsModule, ItemsModule],
    exports: [RouterModule],
    providers: [BosRouteLoader]
})
export class RoutingModule {}

One of mine feature module defines its own routing in a module like this:

const routes: Routes = [
{
    path: 'brands',
    children: [
    { path: '', ponent: BrandListComponent },
    { path: ':id', ponent: BrandDetailComponent },
    { path: '**', redirectTo: '' }
    ]
}];


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

I would like to achieve that every feature module will define its own routing and those routes are registered as a child routes of the App module.

With lazy loading I can manage it but then I have to define one more route always in mine App module, however I just want to define it in feature module.

If I do it without lazy loading, then mine parent route in App ponent is never hit. So if I go to http://localhost/brands it will load the appropriate BrandLisComponent but without LayoutComponent.

Is ther a way to define routes in feature module and register them as a child of main main routing module?

I'm working on an Angular 6 application. Currently I'm struggling with routing. I'm interested, whether mine structure, what I have imagined can work or not. So it looks like this:

App module - contains main routing with some parent route, where layout is defined. Like this:

const routes: Routes = [
{
    path: 'login',
    ponent: LoginComponent
},
{
    path: '',
    ponent: LayoutComponent,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
    // {
    //   path: 'brands',
    //   loadChildren: 'app/modules/brands/brands.module#BrandsModule',
    //   pathMatch: 'prefix'
    // }
    ]
}
];

@NgModule({
    imports: [RouterModule.forRoot(routes), BrandsModule, ItemsModule],
    exports: [RouterModule],
    providers: [BosRouteLoader]
})
export class RoutingModule {}

One of mine feature module defines its own routing in a module like this:

const routes: Routes = [
{
    path: 'brands',
    children: [
    { path: '', ponent: BrandListComponent },
    { path: ':id', ponent: BrandDetailComponent },
    { path: '**', redirectTo: '' }
    ]
}];


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

I would like to achieve that every feature module will define its own routing and those routes are registered as a child routes of the App module.

With lazy loading I can manage it but then I have to define one more route always in mine App module, however I just want to define it in feature module.

If I do it without lazy loading, then mine parent route in App ponent is never hit. So if I go to http://localhost/brands it will load the appropriate BrandLisComponent but without LayoutComponent.

Is ther a way to define routes in feature module and register them as a child of main main routing module?

Share Improve this question edited Jul 26, 2018 at 16:23 Kingmaker asked Jul 26, 2018 at 15:56 KingmakerKingmaker 5191 gold badge6 silver badges21 bronze badges 2
  • If you're using child-routing for BrandRountingModule, you need to give it a ponent property, not only children! and then use <router-outlet> tag to address those children. But generally I didn't get what you want to achieve. What is ItemListComponent and localhost/items ?! – imans77 Commented Jul 26, 2018 at 16:06
  • @imans77 I want to achieve that if I go to /brands route then LayoutComponent and BrandListComponent will be active. Right now only brandComponent is active without layout... – Kingmaker Commented Jul 26, 2018 at 16:31
Add a ment  | 

2 Answers 2

Reset to default 5

The concept is that you define a module routing in your higher-level module and then define its children in your desired module.

So in your case, you need to tell the angular that, hey when someone goes to brands route, use BrandsRoutingModule routings.

So in your app module, you're going to have:

{
    path: 'brands',
    loadChildren: 'app/modules/brands/brands.module#BrandsModule',
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
}

This tells that you need to load the routing of that module if the user goes to /brand.

Then in your BrandsRoutingModule, you need to define routes to be:

{
    path: '',
    ponent: LayoutComponent,
    children: [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', ponent: BrandListComponent },
        { path: ':id', ponent: BrandDetailComponent },
        { path: '**', redirectTo: '' }
    ]
}

So whenever we route to /brands, we shall see the LayoutComponent as a main route relative to that and then the BrandListComponent and others will e as his children. But to show his children, you also need to put this line of code in your layout.ponent.html:

<router-outlet></router-outlet>

this tells angular that, hey if he's going to for example /brands/2, you need to load the BrandDetailComponent inside the LayoutComponent, literally as his child.

Hope it helps.

Imans77's answer works for lazy loaded modules (although the string from of LoadChildren is now deprecated). However, with eager loaded modules, if you want to tidy up the main routes module and split the file accross different modules, you could try the following approach:

app-routing.module.ts

const MODULE_ROUTES = [...module1Routes, module2Routes];

const routes: Routes = [

  { path: 'path1', ponent: Path1Component },
  { path: 'path2', ponent: Path2Component },
  ...MODULE_ROUTES,
];

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

Instead of declaring all children of every ponent/module in the main routing file, you could create a *.route.ts file for each feature module, in which you could just declare and export routes in a normal way. For example:

export const module1Routes: Routes = [
{
    path: 'brands',
    children: [
        { path: '', ponent: BrandListComponent },
        { path: ':id', ponent: BrandDetailComponent },
        { path: '**', redirectTo: '' }
    ]
}];

By importing it in the main routing file, they would immediately be available for Angular.

发布评论

评论列表(0)

  1. 暂无评论