Ndtyjky

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

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'

    }]

  }

];

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

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