Lazy Loading in Angular | Lazy Loading Modules in Angular | Angular 8 La...

For now our project structure should look like this.

Adding features to our Application

app-routing.module.ts

import { NgModule } from '@angular/core';

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

const routes: Routes = [

{ path:'home', loadChildren:() => import('./home/home.module').then(m=> m.HomeModule) },

{ path:'about', loadChildren:() => import('./about/about.module').then(m=> m.AboutModule)},

{ path:'services', loadChildren:() => import('./services/services.module').then(m=> m.ServicesModule)},

{ path:'demo1', loadChildren:() => import('./demo1/demo1.module').then(m=> m.Demo1Module)},

{ path:'demo2', loadChildren:() => import('./demo2/demo2.module').then(m=> m.Demo2Module)},

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

And our app.component.html like this.

<nav class="navigation">

  <div class="container">

    <a [routerLink] ="['/home']">Home</a>

    <a [routerLink] ="['/about']">About Us</a>

    

    <div class="dropdown">

      <button class="dropbtn">Services 

        <i class="fa fa-caret-down"></i>

      </button>

      <div class="dropdown-content">

        <a [routerLink] ="['/services']">Services</a>

        <a [routerLink] ="['/demo1']">Demo1</a>

        <a [routerLink] ="['/demo2']">Demo2</a>

      </div>

    </div> 

  </div>

  </nav>

<div class="container">

<router-outlet></router-outlet>

</div>