In this article i would like to share dynamic router concepts in angular 8. First, install the CLI using the npm package manager:

npm install -g @angular/cli 

Next, create a new angular application using the following CLI command

ng new a8App

Once the project created successfully. your package.json file should like this.

Next create the following new modules

  1. home
  2. list

use the following code to create those modules

ng g m home --routing
ng g m list --routing

Create one component on each module using the following command

//creates a component under home modules 
ng g c ./home/home
//creates a component under list module
ng g c ./list/list

Next, configure the routes of each component in both modules.

Open your home-routing.module.ts file and configure the routes.

Your module file code should like this

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from './home/home.component';

const routes: Routes = [
{path: '', component: HomeComponent}
];

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

Then, open your list-routing.module.ts file and configure the path

Your module file code should like this

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ListComponent} from './list/list.component';

const routes: Routes = [
{path: '', component: ListComponent}
];

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

Next, configure the routes in the app-routing.module.ts file

your final code should like this

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

const routes: Routes = [
{path: '', redirectTo: 'home', pathMatch: 'full'},
{path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule)},
{path: 'list', loadChildren: () => import('./list/list.module').then(m => m.ListModule)}
];

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

change your app.component.html file code like the following

<router-outlet></router-outlet>

Next add a button on your home component to navigate to list component. add a button to your list component to navigate to home component.

home.component.html file code will be

<p>
home works!
</p>
<button [routerLink]="'/list'">Go to List</button>

list.component.html file code will be

<p>
  list works!
</p>
<button [routerLink]="'/home'">Go to Home</button>

now run your application and test.

Application initially loads your home component
Click the Go to List button, application navigates to list component.