child route configuration with Angular 8

Question

I have an app with angular 8 in which a have created two module:

• testModule and SimulatorModule

the simulator is having a routing file but the testModule doesn't.

I want to load all the component in the Simulator as children of the TestComponent found in TestModule.

But when I run the app expecting test component to be lunch, I'm always redirect to appComponent.

these are the code:

**//app.routing.ts**
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
{
 path: '', 
 redirectTo: 'simulator',
 pathMatch: 'full'
},
{
 path: 'simulator',
 loadChildren: './simulator/simulator.module#SimulatorModule'
}
]
 @NgModule({
  imports: [
  RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })
 ],
 exports: [RouterModule],
 providers: []
 })
 export class AppRoutingModule {}

and

//simulator.routing.module
import { NgModule } from '@angular/core';
import { RouterModule, Routes, Route } from '@angular/router';

import { SimulatorPageComponent } from '@app/simulator/simulator-page/simulator-page.component';
import { Test } from '@app/test/test.service';


const routes: Routes = [
  Test.childRoutes([
    {
      path: '',
      component: SimulatorPageComponent
    }
  ])
];

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

and

  //Test.service
  static childRoutes(routes: Routes): Route {  
    return {
      path: '',
      component: TestComponent,
      children: routes,
      data: { reuse: true }
    };
  }

who has an idea please of what is not going on!

Answer 1

I use it like below. Ofc, you might do it any other way.

Folder strukcute:

• /default
• /foo
  • /sub
• /foo-bar

src/app/app-routing.module.ts

const routes: Routes = [
    {
        path: '', // localhost:4200/
        loadChildren: () => import('./default/default.module').then(m => m.DefaultModule), // lazy load
    },
    {
        path: 'foo', // localhost:4200/foo
        loadChildren: () => import('./foo/foo.module').then(m => m.FooModule), // lazy load
    },
    {
        path: 'foo/bar', // localhost:4200/foo/bar
        loadChildren: () => import('./foo-bar/foo-bar.module').then(m => m.FooBarModule), // lazy load
    },
    {
        path: 'baz', // localhost:4200/baz
        component: BazComponent,
    },
];

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

app.component.html

<header><!-- code --></header>
<main>
    <router-outlet></router-outlet>
</main>
<footer><!-- code --></footer>

Because I use loadChildren, I need a component loading. So I need more "xy-routing.module.ts" in ./default, ./foo and ./foo-bar directories:

For example foo-routing.module.ts what included into foo.module.ts.

const routes: Routes = [
    {
        path: '', // every time is ''. Ofc, you can use ':id' here -> when /foo/100   
        component: FooComponent
    }
];

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

---

If you want to use <router-outlet></router-outlet> in src/app/foo-bar/foo-bar.component.html

src/app/foo-bar/foo-bar-routing.module.ts

onst routes: Routes = [
    {
        path: '',
        component: FooBarComponent,
        children: [
            {
                path: 'sub', // localhost:4200/foo/bar/sub
                loadChildren: () => import('./sub/sub.module').then(m => m.SubModule) // src/app/foo-bar/sub/sub.module.ts
            },
        ]
    },
];

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