Pfthb

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