Boost Angular’s Performance by Lazy Loading your Modules with devon4ng

Learn how to defer initialization of modules in Angular until it is needed

In single-page-applications as the application size increases its loading speed decreases (since typically the entire application is loaded at once). Lazy loading is a design pattern that defers initialization of objects until it is needed. Angular handles lazy loading through the routing module which redirects to requested pages. Those pages can be loaded at start or on demand. In this tutorial you will build a simple app to understand how lazyloading is implemented in Angular.

Prerequisites

Basic Angular knowledge

Learning goals

In this tutorial you will learn how to:

create an Angular application using the devon command
look how all modules are loaded by an application at the begining (eager loading)
implement lazy loading and understand its concept and advantages

The definition of each step of this tutorial can be found at https://github.com/devonfw-tutorials/tutorials/tree/main/devon4ng-lazy-loading/.

Feel free to report any errors to us or fix them yourself. Errors can be reported by creating an issue in the tutorials repository. To fix the error fork the repository and create a pull request. Errors in the wiki can be reported and fixed in the Tutorial-compiler repository. You can find a description of what to look for when creating a pull request at the devonfw contribution guide: https://devonfw.com/website/pages/community/community.html#community.asciidoc_contributing-to-devonfw. If you want to create a tutorial you can start with the katacoda tutorial and read the description for creating your own tutorials: https://github.com/devonfw-tutorials/tutorials/wiki/Development.

devonfw setup

If you already installed the devonfw IDE, you can skip this step.

Prerequisites

You need to have a tool to extract .tar.gz files. On Windows lower Windows 10 use can use 7-Zip. The most other platforms support this feature by default.
You need to have Git and Curl installed. On Windows you have to install Git for Windows. On Linux systems you might need to install the following tools in case they are not present (sudo apt-get install git curl or sudo yum install git-core curl)

Create a new directory in the location where you want to install the devonfw IDE. If you are using the terminal, navigate to this location and run mkdir devonfw and cd devonfw to create the directory and navigate into it.

Download

Now you have to download the latest release of the devonfw IDE. You can download it from here.

In the Terminal execute Invoke-WebRequest -OutFile devonfw-ide-scripts.tar.gz 'https://repository.sonatype.org/service/local/artifact/maven/redirect?r=central-proxy&g=com.devonfw.tools.ide&a=devonfw-ide-scripts&v=LATEST&p=tar.gz' if you are using Windows.

On Linux use wget -c 'https://repository.sonatype.org/service/local/artifact/maven/redirect?r=central-proxy&g=com.devonfw.tools.ide&a=devonfw-ide-scripts&v=LATEST&p=tar.gz' -O devonfw-ide-scripts.tar.gz -.

On MacOS, depending on your setup, you can either use the same wget command specified for the Linux installation (install wget via homebrew brew install wget) or use any other available download command i.e. curl -o devonfw-ide-scripts.tar.gz https://repository.sonatype.org/service/local/artifact/maven/redirect?r=central-proxy&g=com.devonfw.tools.ide&a=devonfw-ide-scripts&v=LATEST&p=tar.gz.

After that you need to extract the downloaded file. To do this, run tar -xvzf devonfw-ide-scripts.tar.gz. Or you can simply use a tool (e.g. 7-Zip) for this.

Setup

First, you need to prepare a settings repository to specify the tools to be installed within the devonfw IDE. Normally this is done by your project. If you just want to test the devonfw IDE, you can use the default URL, which is https://github.com/devonfw/ide-settings.

For now clone the repository on https://github.com/devonfw/ide-settings or your own fork of it. For this tutorial you have to write DEVON_IDE_TOOLS=(npm ng vscode) into the devon.properties file of the cloned settings repository. These settings will now be passed into the installation process of the devonfw-ide. Start the setup process by executing .\setup 'path/to/settings' (Windows) or bash setup path/to/settings.git (Linux).

You can also just execute .\setup (Windows) or bash setup (Linux) and press Enter when the setup assistent asks for the URL to the settings repository. This will also download the default settings and install the default tools within the devonfw IDE.

Enable routing with router-outlet

Changing of the app.component.html file

In the file app.component.html delete all the content and put in the router-outlet tag.

Prerequisites

Any editor that can edit files

Changing of app.component.html in any Editor

To change the file app.component.html, you have to open it in any editor. Open the editor and choose in the file context menu in the top left corner Open … mostly also keyboard shortcut ctrl+o works. Based on your operating system a window with the file explorer opens. You have to navigate to app.component.html and select it. Select the right folder manually by selecting the folders from the path devonfw/workspaces/main/level-app/src/app and select the file app.component.html. You confirm this with the Open button in the bottom right corner app.component.html will be opened in a new editor window.

Copy the following text.

<router-outlet></router-outlet>

Now insert the copied text into the opened app.component.html. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app.component.html has been changed.

Create the modules and their components

Create the first-routing.module.ts file

Next you will create the feature modules and components for the app. You will follow the structure shown in the image in the first step. You can use the CLI command devon ng generate module along with the --routing flag to generate the modules, and devon ng generate component command to generate the components.

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating first-routing.module.ts in any Editor

Create first-routing.module.ts in any Editor and insert the following data into it. .

Opening a new file can be done by going to the file context menu in the top left corner of the editor and select New or New File or mostly also the keyboard shortcut ctrl+n will also work. The editor opens a new editor window for an untitled file that can be edited now.

Copy the following text.

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

const routes: Routes = [];

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

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/first-routing.module.ts. Select the directory devonfw/workspaces/main/level-app/src/app/first. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste first-routing.module.ts in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and first-routing.module.ts has been created and filled with some data.

Create the first.module.ts file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating first.module.ts in any Editor

Create first.module.ts in any Editor and insert the following data into it. .

Copy the following text.

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

import { FirstRoutingModule } from './first-routing.module';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FirstRoutingModule
  ]
})
export class FirstModule { }

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/first.module.ts. Select the directory devonfw/workspaces/main/level-app/src/app/first. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste first.module.ts in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and first.module.ts has been created and filled with some data.

Create the second-left-routing.module.ts file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating second-left-routing.module.ts in any Editor

Create second-left-routing.module.ts in any Editor and insert the following data into it. .

Copy the following text.

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

const routes: Routes = [];

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

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/second-left/second-left-routing.module.ts. Select the directory devonfw/workspaces/main/level-app/src/app/first/second-left. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste second-left-routing.module.ts in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and second-left-routing.module.ts has been created and filled with some data.

Create the second-left.module.ts file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating second-left.module.ts in any Editor

Create second-left.module.ts in any Editor and insert the following data into it. .

Copy the following text.

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

import { SecondLeftRoutingModule } from './second-left-routing.module';
import { ContentComponent } from './content/content.component';


@NgModule({
  declarations: [ContentComponent],
  imports: [
    CommonModule,
    SecondLeftRoutingModule
  ]
})
export class SecondLeftModule { }

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/second-left/second-left.module.ts. Select the directory devonfw/workspaces/main/level-app/src/app/first/second-left. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste second-left.module.ts in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and second-left.module.ts has been created and filled with some data.

Create the second-right-routing.module.ts file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating second-right-routing.module.ts in any Editor

Create second-right-routing.module.ts in any Editor and insert the following data into it. .

Copy the following text.

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

const routes: Routes = [];

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

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/second-right/second-right-routing.module.ts. Select the directory devonfw/workspaces/main/level-app/src/app/first/second-right. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste second-right-routing.module.ts in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and second-right-routing.module.ts has been created and filled with some data.

Create the second-right.module.ts file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating second-right.module.ts in any Editor

Create second-right.module.ts in any Editor and insert the following data into it. .

Copy the following text.

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

import { SecondRightRoutingModule } from './second-right-routing.module';
import { ContentComponent } from './content/content.component';


@NgModule({
  declarations: [ContentComponent],
  imports: [
    CommonModule,
    SecondRightRoutingModule
  ]
})
export class SecondRightModule { }

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/second-right/second-right.module.ts. Select the directory devonfw/workspaces/main/level-app/src/app/first/second-right. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste second-right.module.ts in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and second-right.module.ts has been created and filled with some data.

Create the first.component.html file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating first.component.html in any Editor

Create first.component.html in any Editor and insert the following data into it. .

Copy the following text.

<div style="text-align:center">
  <h1>
    Welcome to 1st level module
  </h1>
  <img
    width="300"
    alt="Angular Logo"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
  />
</div>
<div style="display: flex; align-items: center; justify-content: center">
  <button routerLink="./second-left">Go to left module</button>
  <button routerLink="./second-right">Go to right module</button>
</div>

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/first/first.component.html. Select the directory devonfw/workspaces/main/level-app/src/app/first/first. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste first.component.html in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and first.component.html has been created and filled with some data.

Create the first.component.scss file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating first.component.scss in any Editor

Create first.component.scss in any Editor and insert the following data into it. .

Copy the following text.

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/first/first.component.scss. Select the directory devonfw/workspaces/main/level-app/src/app/first/first. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste first.component.scss in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and first.component.scss has been created and filled with some data.

Create the first.component.ts file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating first.component.ts in any Editor

Create first.component.ts in any Editor and insert the following data into it. .

Copy the following text.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.scss']
})
export class FirstComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/first/first.component.ts. Select the directory devonfw/workspaces/main/level-app/src/app/first/first. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste first.component.ts in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and first.component.ts has been created and filled with some data.

Create the content.component.html file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating content.component.html in any Editor

Create content.component.html in any Editor and insert the following data into it. .

Copy the following text.

<div style="text-align:center">
  <h1>
    Welcome to 2nd level module (left)
  </h1>
  <img
    width="300"
    alt="Angular Logo"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
  />
</div>
<div style="display: flex; align-items: center; justify-content: center">
  <button routerLink="/first">Go back</button>
</div>

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/second-left/content/content.component.html. Select the directory devonfw/workspaces/main/level-app/src/app/first/second-left/content. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste content.component.html in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and content.component.html has been created and filled with some data.

Create the content.component.scss file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating content.component.scss in any Editor

Create content.component.scss in any Editor and insert the following data into it. .

Copy the following text.

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/second-left/content/content.component.scss. Select the directory devonfw/workspaces/main/level-app/src/app/first/second-left/content. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste content.component.scss in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and content.component.scss has been created and filled with some data.

Create the content.component.ts file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating content.component.ts in any Editor

Create content.component.ts in any Editor and insert the following data into it. .

Copy the following text.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss']
})
export class ContentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/second-left/content/content.component.ts. Select the directory devonfw/workspaces/main/level-app/src/app/first/second-left/content. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste content.component.ts in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and content.component.ts has been created and filled with some data.

Create the content.component.html file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating content.component.html in any Editor

Create content.component.html in any Editor and insert the following data into it. .

Copy the following text.

<div style="text-align: center">
  <h1>Welcome to 2nd level module (right)</h1>
  <img
    width="300"
    alt="Angular Logo"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
  />
</div>
<div style="display: flex; align-items: center; justify-content: center">
  <button routerLink="/first">Go back</button>
</div>

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/second-right/content/content.component.html. Select the directory devonfw/workspaces/main/level-app/src/app/first/second-right/content. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste content.component.html in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and content.component.html has been created and filled with some data.

Create the content.component.scss file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating content.component.scss in any Editor

Create content.component.scss in any Editor and insert the following data into it. .

Copy the following text.

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/second-right/content/content.component.scss. Select the directory devonfw/workspaces/main/level-app/src/app/first/second-right/content. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste content.component.scss in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and content.component.scss has been created and filled with some data.

Create the content.component.ts file

Prerequisites

Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).
Any Editor that can edit files

Creating content.component.ts in any Editor

Create content.component.ts in any Editor and insert the following data into it. .

Copy the following text.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss']
})
export class ContentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/level-app/src/app/first/second-right/content/content.component.ts. Select the directory devonfw/workspaces/main/level-app/src/app/first/second-right/content. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste content.component.ts in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and content.component.ts has been created and filled with some data.

Configure routing

Changing of the app-routing.module.ts file

To move between the components you will now configure the routes. You can refer the image in the first step to understand how you will configure the routes. In app-routing.module.ts you will add a path 'first' to FirstComponent and a redirection from '' to 'first'. And then import the FirstModule in the main app.module.ts

Next, for the feature modules, you will add the routes 'first/second-left' and 'first/second-right' pointing to their respective ContentComponent in first-routing.module.ts. And then import SecondLeftModule and SecondRightModule in first.module.ts

Prerequisites

Any editor that can edit files

Changing of app-routing.module.ts in any Editor

To change the file app-routing.module.ts, you have to open it in any editor. Open the editor and choose in the file context menu in the top left corner Open … mostly also keyboard shortcut ctrl+o works. Based on your operating system a window with the file explorer opens. You have to navigate to app-routing.module.ts and select it. Select the right folder manually by selecting the folders from the path devonfw/workspaces/main/level-app/src/app and select the file app-routing.module.ts. You confirm this with the Open button in the bottom right corner app-routing.module.ts will be opened in a new editor window.

Copy the following text.

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

const routes: Routes = [
  {
    path: 'first',
    component: FirstComponent
  },
  {
    path: '',
    redirectTo: 'first',
    pathMatch: 'full',
  },
];

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

Now insert the copied text into the opened app-routing.module.ts. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app-routing.module.ts has been changed.

Changing of the app.module.ts file

Prerequisites

Any editor that can edit files

Changing of app.module.ts in any Editor

To change the file app.module.ts, you have to open it in any editor. Open the editor and choose in the file context menu in the top left corner Open … mostly also keyboard shortcut ctrl+o works. Based on your operating system a window with the file explorer opens. You have to navigate to app.module.ts and select it. Select the right folder manually by selecting the folders from the path devonfw/workspaces/main/level-app/src/app and select the file app.module.ts. You confirm this with the Open button in the bottom right corner app.module.ts will be opened in a new editor window.

Copy the following text.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FirstModule } from './first/first.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FirstModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now insert the copied text into the opened app.module.ts. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app.module.ts has been changed.

Changing of the first-routing.module.ts file

Prerequisites

Any editor that can edit files

Changing of first-routing.module.ts in any Editor

To change the file first-routing.module.ts, you have to open it in any editor. Open the editor and choose in the file context menu in the top left corner Open … mostly also keyboard shortcut ctrl+o works. Based on your operating system a window with the file explorer opens. You have to navigate to first-routing.module.ts and select it. Select the right folder manually by selecting the folders from the path devonfw/workspaces/main/level-app/src/app/first and select the file first-routing.module.ts. You confirm this with the Open button in the bottom right corner first-routing.module.ts will be opened in a new editor window.

Copy the following text.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContentComponent as ContentLeft} from './second-left/content/content.component';
import { ContentComponent as ContentRight} from './second-right/content/content.component';
import { FirstComponent } from './first/first.component';

const routes: Routes = [
  {
    path: '',
    component: FirstComponent
  },
  {
    path: 'first/second-left',
    component: ContentLeft
  },
  {
    path: 'first/second-right',
    component: ContentRight
  }
];

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

Now insert the copied text into the opened first-routing.module.ts. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and first-routing.module.ts has been changed.

Changing of the first.module.ts file

Prerequisites

Any editor that can edit files

Changing of first.module.ts in any Editor

To change the file first.module.ts, you have to open it in any editor. Open the editor and choose in the file context menu in the top left corner Open … mostly also keyboard shortcut ctrl+o works. Based on your operating system a window with the file explorer opens. You have to navigate to first.module.ts and select it. Select the right folder manually by selecting the folders from the path devonfw/workspaces/main/level-app/src/app/first and select the file first.module.ts. You confirm this with the Open button in the bottom right corner first.module.ts will be opened in a new editor window.

Copy the following text.

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

import { FirstRoutingModule } from './first-routing.module';
import { FirstComponent } from './first/first.component';

import { SecondLeftModule } from './second-left/second-left.module';
import { SecondRightModule } from './second-right/second-right.module';

@NgModule({
  declarations: [FirstComponent],
  imports: [
    CommonModule,
    FirstRoutingModule,
    SecondLeftModule,
    SecondRightModule,
  ]
})
export class FirstModule { }

Now insert the copied text into the opened first.module.ts. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and first.module.ts has been changed.

Eager loading vs Lazy Loading

Changing of the app-routing.module.ts file

If you run the project at this point you can see in the terminal that just the main file is built. ![compile-eager](./assets/compile-eager.png)

Go to port 4200 and check the Network tab in the Developer Tools. We can see a document named "first" is loaded. If you click on [Go to right module] a second level module opens, but there is no 'second-right' document. ![second-lvl-right-eager](./assets/second-lvl-right-eager.png)

Now we will modify the app to lazily load the modules. Modifying an angular application to load its modules lazily is easy, you have to change the routing configuration of the desired module (for example FirstModule). Instead of loading a component, you dynamically import it in a loadChildren attribute because modules acts as gates to access components "inside" them. Updating this app to load lazily has four consecuences: no component attribute, no import of FirstComponent, FirstModule import has to be removed from the imports array at app.module.ts, and change of context.

Also, in first-routing.module.ts you can change the path for the ContentComponent`s from `first/second-left and first/second-right to simply second-left and second-right respectively, because it aquires the context set by AppRoutingModule.

Prerequisites

Any editor that can edit files

Changing of app-routing.module.ts in any Editor

Copy the following text.

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

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

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

Changing of the app.module.ts file

Prerequisites

Any editor that can edit files

Changing of app.module.ts in any Editor

Copy the following text.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Changing of the first-routing.module.ts file

Prerequisites

Any editor that can edit files

Changing of first-routing.module.ts in any Editor

Copy the following text.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContentComponent as ContentLeft} from './second-left/content/content.component';
import { ContentComponent as ContentRight} from './second-right/content/content.component';
import { FirstComponent } from './first/first.component';

const routes: Routes = [
  {
    path: '',
    component: FirstComponent
  },
  {
    path: 'second-left',
    component: ContentLeft
  },
  {
    path: 'second-right',
    component: ContentRight
  }
];

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

Lazily load the second left module

Changing of the first-routing.module.ts file

Now when you check the terminal running the app, you could see the lazy loaded modules getting generated along with the main bundle. Also, if you check the Network tab in the developer tools, you could see the (lazy) modules getting loaded when needed. Since, FirstModule is the first path we visit, it is getting loaded at first only. ![compile-first-lazy](./assets/compile-first-lazy.png) ![first-lvl-lazy](./assets/first-lvl-lazy.png)

Now, lets make the SecondLeftModule load lazily. For this, you need to change component to loadChildren and refer SecondLeftModule in the file first-routing.module.ts. Next, you need to remove SecondLeftModule from the imports array of first.module.ts. After that you need to route the ContentComponent within the second-left-routing.module.ts.

Prerequisites

Any editor that can edit files

Changing of first-routing.module.ts in any Editor

Copy the following text.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContentComponent as ContentLeft} from './second-left/content/content.component';
import { ContentComponent as ContentRight} from './second-right/content/content.component';
import { FirstComponent } from './first/first.component';

const routes: Routes = [
  {
    path: '',
    component: FirstComponent
  },
  {
    path: 'second-left',
    loadChildren: () => import('./second-left/second-left.module').then(m => m.SecondLeftModule),
  },
  {
    path: 'second-right',
    component: ContentRight
  }
];

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

Changing of the first.module.ts file

Prerequisites

Any editor that can edit files

Changing of first.module.ts in any Editor

Copy the following text.

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

import { FirstRoutingModule } from './first-routing.module';
import { FirstComponent } from './first/first.component';

import { SecondRightModule } from './second-right/second-right.module';

@NgModule({
  declarations: [FirstComponent],
  imports: [
    CommonModule,
    FirstRoutingModule,
    SecondRightModule,
  ]
})
export class FirstModule { }

Changing of the second-left-routing.module.ts file

Prerequisites

Any editor that can edit files

Changing of second-left-routing.module.ts in any Editor

To change the file second-left-routing.module.ts, you have to open it in any editor. Open the editor and choose in the file context menu in the top left corner Open … mostly also keyboard shortcut ctrl+o works. Based on your operating system a window with the file explorer opens. You have to navigate to second-left-routing.module.ts and select it. Select the right folder manually by selecting the folders from the path devonfw/workspaces/main/level-app/src/app/first/second-left and select the file second-left-routing.module.ts. You confirm this with the Open button in the bottom right corner second-left-routing.module.ts will be opened in a new editor window.

Copy the following text.

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

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

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

Now insert the copied text into the opened second-left-routing.module.ts. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and second-left-routing.module.ts has been changed.

If you now check the terminal, you could also see second-left-second-left-module along with the first-first-module and the main bundle getting generated. ![second-lvl-lazy](./assets/second-lvl-lazy.png)

Also, in the Network tab of the developer tools, you could see the second-left-second-left-module.js is only loading when we click on the [Go to left module] button ![second-lvl-left-lazy](./assets/second-lvl-left-lazy.png)

Lazy loading is a pattern useful when new features are added, these features are usually identified as modules which can be loaded only if needed as shown in this tutorial, reducing the time spent loading an application.

_{Last updated 2023-11-20 10:42:49 UTC}