Defining relative routing in Angular

Question

Update

I changed forRoot with forChild according to the answers.

So, basically I have to issues, let this be a submodule,

@NgModule({
  imports: [
    CommonModule,
    ARoutingModule,
    BModule
  ],
  declarations: [AppsComponent, ...],
  exports: [
    AppsComponent, ...
  ]
})
export class AModule { }

and

@NgModule({
  imports: [
    CommonModule,
    BRoutingModule
  ],
  declarations: [AppsComponent, ...],
  exports: [
    AppsComponent, ...
  ]
})
export class BModule { }

So AModule is being imported by the root module and both modules, AModule and BModule shall define their own routes, something like

// ./A/A-Routing.module.ts
const routes: Routes = [
  {
   path: 'A',//<-- this shall route to www.site.com/A
   component: AComponent
  }
  ];

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

and in SubSub I have

// ./A/B/B-Routing.module.ts
const routes: Routes = [
  {
   path: 'B', //<-- this shall route to www.site.com/A/B
   component: BComponent,

   ]
  }
  ];

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

Is this possible? When using a path printing, I can get the sub-routes, but not the subsub routes (i.e. B). And can I define the routes in B without knowing the path before that? so define B without knowing A

www.site.com/something/else

define routes for else without knowing something?

Here is a stackblitz example, main works, but the Subs don't...

RouterModule.forRoot([]) is used for routing only in the root module of the application. For using routes in other modules, use RouterModule.forChild([]) — Sachin Gupta
– Sachin Gupta, Commented Nov 10, 2018 at 16:56

SiddAjmera · Accepted Answer · 2018-11-10 18:51:18Z

1

There are a few things that you'll have to fix to make it work properly.

You'll have to add an opening route for your SubModule which will be a Lazy Loaded Module. You'll do this in your main-routing.module.ts file

const routes: Routes = [
  {
    path: 'main',
    component: MainComponent,
    children: [{
      path: 'sub',
      loadChildren: './sub/sub.module#SubModule'
    }]
  }
];

You'll then create a module named SubModule and the SubRoutingModule will act as a routing module for this SubModule. You'll declare your Sub1Component and Sub2Component here:

import { Sub1Component, Sub2Component } from './sub.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SubRoutingModule } from './sub-routing.module';

@NgModule({
  declarations: [Sub1Component, Sub2Component],
  imports: [SubRoutingModule]
})
export class SubModule { }

So now your routes will change to :

<a routerLink="/main/sub/sub1">Sub1</a> | 
<a routerLink="/main/sub/sub2">Sub2</a>

Here's an Updated StackBlitz for your ref.

edited Nov 10, 2018 at 18:51

answered Nov 10, 2018 at 16:29

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rst Over a year ago

I need to have multiple routing files at different locations.

SiddAjmera Over a year ago

There's a serious architectural issue with your Current Implementation. Can you please share a more concrete example of your modules and probably a minimal stackblitz sample replicating your issue?

rst Over a year ago

Stackblitz example in the op.

SiddAjmera Over a year ago

@rst, please go through my updated answer. Hopefully this should help you achieve what you're trying to.

Sunil · Accepted Answer · 2018-11-10 16:37:21Z

1

Change forRoot to forChild in SubSubRoutingModule

// ./Sub/subsub/SubSub-Routing.module.ts
const routes: Routes = [
  {
   path: 'subsub', //<-- this shall route to www.site.com/sub/subsub
   component: SubSubComponent,
   ]
  }
 ];

@NgModule({
  imports: [RouterModule.forChild(routes)], //<-- change here
  exports: [RouterModule],
  declarations: []
})
export class SubSubRoutingModule { }

answered Nov 10, 2018 at 16:37

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

5 Comments

rst Over a year ago

That works, but SubSub (I changed it in the OP to A and B, thought that was more clearer) get routet to the root, i.e. /subsub instead of /Sub/subsub

Sunil Over a year ago

You should implement with Lazy Module. Look at this demo for reference stackblitz.com/edit/angular-hcerdo

rst Over a year ago

I have added a stackblitz example

Sunil Over a year ago

Here is the modified version of your demo stackblitz.com/edit/angular-3mjttd

rst Over a year ago

That's exactly what I was Looking for! Excellent

Collectives™ on Stack Overflow

Defining relative routing in Angular

2 Answers 2

4 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related