Angular2: router-outle for each module

Question

I have angular app having multiple modules (modules A, B are lazy loaded):

MainModule, ModuleA, ModuleB

Currently all content is loaded in AppComponent (it have router-outle tag). What I would like to achive is that I will have:

AppComponent, ComponetA, ComponentB

each having router-outle each module will have content in its own component. Thanks for any sugestions how to achive that.

Answer 1

I will give you the "simplified" main structure that you need with 2 levels (main level (forRoot), and other modules level loaded by "Lazy loading" (forChild), ok?). You always can make it more complex, adding guards, more nested levels, etc.

So, it would be something like that (you have to change to your own components):

1. MainModule (app-module.ts)

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
import { AppComponent } from './components/App.component';
import { PageAComponent} from './modules/module-a/components/page-a.component';
import { PageBComponent} from './modules/module-b/components/page-b.component';
 
const routes: Routes = [
  {
    path: '',
    component: MainComponent ,
  },
  {
    path: 'patha', 
    component: PageAComponent,
    children: [{
      path: '',
      loadChildren: () => import('./modules/module-a/module-a.module').then(m => m.AModule)
    }],
    },
{
    path: 'pathb', 
    component: PageBComponent,
    children: [{
      path: '',
      loadChildren: () => import('./modules/module-b/module-b.module').then(m => m.BModule)
    }],    
  },
  {
    path: '**',
    redirectTo: '',
  },
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

2. AModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PageAComponent } from './pages/page-a/page-a.component';
import { RegisterComponent } from './components/register/register.component';
import { LoginComponent } from './components/register/register.component';

const routes: Routes = [
  {
    path: '', // takes the "base path" defined in its parent routes (in app.module.ts)
    component: PageAComponent, 
    pathMatch: 'full', 
    children: [
      {
        path: 'login', // For instance
        component: LoginComponent,
      },
      {
        path: 'register', // For instance
        component: RegisterComponent,
      },
      {
        path: '**',
        // component:LoginComponent
        redirectTo: 'login',
      },
    ],
  },
];
 
@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AModule { }

3. BModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PageBComponent } from './pages/page-b/page-b.component';
import { ListComponent} from './components/list/register.component';
import { EditComponent} from './components/edit/edit.component';

const routes: Routes = [
  {
    path: '', , // takes the "base path" defined in its parent routes (in app.module.ts)
    component: PageBComponent, 
    pathMatch: 'full', 
    children: [
      {
        path: 'list', // For instance
        component: ListComponent,
      },
      {
        path: 'edit', // For instance
        component: EditComponent,
      },
      {
        path: '**',
        // component:LoginComponent
        redirectTo: 'list',
      },
    ],
  },
];
 
@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class BModule { }

4. In the AppComponent you would have your main < router-outlet>< / router-outlet>

5. Then, in PageAComponent and PageBComponent you would have only < router-outlet>< / router-outlet> as well. (You can think in pages kind a components that only serve to have the < router-outlet> in its html, ascting as a "containers" for the child module components).

That's all. For sure you have to "tune up" name's components/paths/modules to suit your own, but you have the structure and the sugestions that you were asking for.