CODEWITHSUNDEEP
angulartypescriptroutes
rst
rst

Reputation: 2724

Defining relative routing in Angular

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...

Upvotes: 0

Views: 133

Answers (2)

SiddAjmera
SiddAjmera

Reputation: 39462

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

  1. 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'
    }]
  }
];
  1. 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.

Upvotes: 1

Sunil
Sunil

Reputation: 11243

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

Upvotes: 1

Related Questions