DEV Community: Mayank Dubey

Manually Lazy load Components in Angular 8

Mayank Dubey — Tue, 15 Oct 2019 12:56:56 +0000

Angular is amazing! It is fast and smooth once loaded in the browser, but most often the start-up time suffers. Improving the start-up time for Angular apps is crucial for getting a high-quality app and a better user experience. Reducing the app's bundle size is one of the many ways to help with that, and that is where lazy loading comes into play. You must be familiar with lazy loading via Angular routes. In this article, we are going to explore how we can manually lazy load components.

What is Lazy Loading?

Lazy loading or "On-demand loading" is a programming practice where we delay the loading of an object until its needed. In simple terms, you put off doing something which is not required at the moment.

Why do we need lazy loading? Well, single-page applications tend to be fast once loaded but initial loading time often suffers. This is because of a huge amount of javascript that needs to be downloaded and interpreted by the browser to boot up the Javascript app. To deal with this we need to reduce the size of the main javascript bundle necessary to boot the app (for angular apps main.js). This can be achieved with lazy loading. We don't load unused bits (modules) and load them on demand.

For example, we have settings area in our app which users rarely visit. Until necessary, we do not want to load the JavaScript corresponding to the settings area. At the latest, when the user clicks on the corresponding menu item, we can fetch the Javascript file (module) and load up that section of our app.

For this to work, our compiled code for that settings area must be isolated in a dedicated Javascript file, so that we can fetch it at runtime when needed. This sounds complex. Thankfully, Angular provides this functionality and does all the file bundling for us.

Lazy Loading in Angular

Great, we know what lazy loading is, but how does it work in Angular? Or what can be lazy-loaded in Angular? As the title suggests, you might say a Component. However, that's not entirely possible.

In Angular, the most basic unit is a module. A module is a mechanism to group components, directives, pipes and services that are related. So, modules are necessary for Angular to know which dependencies are required and which components are used in the template. Therefore, the most basic unit that can be lazy-loaded in Angular is a module, and with the module come the bundled components that we are interested in.

The easiest way to lazy-load modules is via routes:

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
 {
    path: 'settings',
    loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule)
  },
];

The loadChildren property takes a function that returns a promise using the browser's built-in syntax for lazy loading code using dynamic imports import('...').

But we want more control over lazy loading, and not just with routes. We want to open a dialog, and lazy load its containing component just when a user opens that specific dialog.

Manual Lazy Loading of Modules

Angular 8 uses the browser's built-in dynamic imports import('...').

Dynamic import() introduces a new function-like form of import that caters to those use cases. import(moduleSpecifier) returns a promise for the module namespace object of the requested module, which is created after fetching, instantiating, and evaluating all of the module’s dependencies, as well as the module itself.

In simple terms, dynamic import() enables async loading of JS Modules. So, we don't have to worry about creating a dedicated JS bundle for our module, dynamic import() feature will take care of it.

Let's do it. First, we will generate a module which we will load lazily:

ng g m lazy

then we will generate an entry component for lazy module:

ng g c --entryComponent=true --module=lazy lazy

Our lazy.module.ts file should look like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyComponent } from './lazy/lazy.component';


@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [LazyComponent],
  entryComponents: [LazyComponent]
})
export class LazyModule {
  // Define entry property to access entry component in loader service
  static entry = LazyComponent;
}

We need to define our lazy widgets:

import { NgModuleFactory, Type } from '@angular/core';

// This will create a dedicated JS bundle for lazy module
export const lazyWidgets: { path: string, loadChildren: () => Promise<NgModuleFactory<any> | Type<any>> }[] = [
  {
    path: 'lazy',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  }
];

// This function will work as a factory for injecting lazy widget array in the main module
export function lazyArrayToObj() {
  const result = {};
  for (const w of lazyWidgets) {
    result[w.path] = w.loadChildren;
  }
  return result;
}

Define the injection token to inject lazy widgets in the service:

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

export const LAZY_WIDGETS = new InjectionToken<{ [key: string]: string }>('LAZY_WIDGETS');

Create a LazyLoaderService:

import { Injectable, Injector, Compiler, Inject, NgModuleFactory, Type, ViewContainerRef } from '@angular/core';
import { LAZY_WIDGETS } from './tokens';

@Injectable({
  providedIn: 'root'
})
export class LazyLoaderService {

  constructor(
    private injector: Injector,
    private compiler: Compiler,
    @Inject(LAZY_WIDGETS) private lazyWidgets: { [key: string]: () => Promise<NgModuleFactory<any> | Type<any>> }
  ) { }

  async load(name: string, container: ViewContainerRef) {
    const tempModule = await this.lazyWidgets[name]();

    let moduleFactory;

    if (tempModule instanceof NgModuleFactory) {
      // For AOT
      moduleFactory = tempModule;
    } else {
      // For JIT
      moduleFactory = await this.compiler.compileModuleAsync(tempModule);
    }

    const entryComponent = (moduleFactory.moduleType as any).entry;
    const moduleRef = moduleFactory.create(this.injector);

    const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);

    container.createComponent(compFactory);
  }


}

LazyLoaderService loads the module with dynamic import(). If it's compiled ahead of time then we just take it as it is. If we are using JIT mode we have to compile it. After, we inject all the dependencies in the module.
Now to load the component into view we have to instantiate the component dynamically. This can be done with componentFactoryResolver. After resolving the entry component we just load it inside the container.

Provide the widgets and LazyLoaderService in AppModule:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LazyLoaderService } from './lazy-loader.service';
import { LAZY_WIDGETS } from './tokens';
import { lazyArrayToObj } from './lazy-widgets';

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

That's it, just call the LazyLoaderService and manually load LazyComponent into the view.

We've seen that lazy loading can help us a lot to optimize our Angular application. This process enables us to isolate the component we want to show in dialog or anywhere else and we don't need to bundle it up with the main module.

Here's a GitHub repo with the complete code:
https://github.com/binary-sort/lazy-angular

Using docker with NodeJS for local development

Mayank Dubey — Wed, 11 Sep 2019 16:07:59 +0000

Setting up projects on different machines can be a tedious task because it takes a lot of time and sometimes version problem occurs. The new member has to waste a lot of time tuning the environment before he/she can start contributing. Wouldn't it be cool if you and your team members could work on the same code base without worrying about everyone's system configuration??

This is where Docker can help us. Docker allows you to locally run the same environment across all machines and with little tweaks it can also be used for production. In this blog, we are going to create a NodeJS web app with PostgreSQL using Docker.

What is Docker?

Docker is a tool used to create, deploy and run applications using containers.
Containers allow us to create all in one package for our application with all the required libraries and environment dependencies. The application shipped as a container will run on any other Linux machine regardless of custom settings that could be different from the machine used to write and test the code.

So, you can share your application with anyone and they will be able to run and work on your application without much effort.

DockerFile, Docker Image & Containers

Dockerfile, Docker Images & Docker Containers are three important terms that you need to understand while using Docker.

DockerFile: DockerFile is a file which contains a set of commands used to create an image. These are the same commands you can run on the command line to create an image.

Docker Image: Docker Images can be thought of as templates used to create a container. Docker Images can be shared through the docker registry. Docker Hub is a public registry which allows multiple users to use and collaborate on the images.

Docker Container: In simple terms, a docker container is a running instance of an image.

Docker Compose

Docker Compose is a tool that let us easily define and run multiple containers. You write a YAML file known as a compose file (docker-compose.yml) which contains details about services, networks, and volumes to set up the docker application. You can create separate containers, host them and get them to communicate with each other.

Let's get a quick overview of services, networks, and volumes:

Service: Docker service will be the image for a microservice within the context of some larger application. When you create a service, you specify which container image to use and which commands to execute inside running containers. Examples of services might include an HTTP server, a database, or any other type of executable program that you wish to run in a distributed environment.

Network: A Docker network allows the services to communicate with each other or with other non-Docker workloads. We are using a network to connect the server container with the database container.

Volumes: Volumes are directories (or files) which exists out of the docker filesystem and exists as normal directories (or files) on the host filesystem (your machine). This allows us to bind our working directory with our server container.

Let's create a NodeJS app using docker

We will create our node app the usual way, with npm:

npm init

This will prompt you for several things, such as the name and version of your application. You can accept defaults for most of them except for entry point.
For entry point enter app.js.

entry point: (index.js) app.js

This will create a package.json file which will look like this:

{
  "name": "app-name",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now install express:

npm install express --save

Add following code to app.js file:

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send(
    `<h1>Docker is fun!</h1>`
  )
})

app.use((err, req, res, next) => {
  if (err) {
    console.error(err);
    res
      .status(err.statusCode || err.status || 500)
      .send(err || {});
  } else {
    next();
  }
});

const server = app.listen(3000, () => {
  console.log('App listening on port', server.address().port);
});

Add start script in package.json:

...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },
...

To have this run on your local machine, run the following command:

npm start

The application will start at http://localhost:3000.

Now that our node application is up and running, we can use docker. We will create services for nodejs and database.

Create Dockerfile and place the following code in it:

# Official docker image for Node.js
FROM node:10

# Create app directory
WORKDIR /app

# Install app dependencies
# A wildcard is used to ensure both
# package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install
RUN npm install -g nodemon

# Bundle app source
COPY . .

EXPOSE 3000
CMD [ "nodemon" ]

Now we will create a compose file with details about the services, in our case web and database.

version: '3'

services:
  web:
    build:
      context: .
      dockerfile: ./Dockerfile
    ports:
      - 3000:3000
    volumes:
      - .:/app
    networks:
      - app-network
    depends_on:
      - db

  db:
    image: library/postgres:11.3-alpine
    restart: unless-stopped
    ports:
      - 10000:5432
    networks:
      - app-network
    environment:
      - POSTGRES_USER=db_user
      - POSTGRES_PASSWORD=db_password

networks:
  app-network:
    driver: bridge

Let's understand what is going on in this file:

We defined two services web and db. The web service is using a Dockerfile to build the image whereas db service building the image directly from the configuration provided.
The containers are using a network named app-network to communicate with each other. You can provide the database connection information to the web app.
As we will use these containers for local development, any updates in the local directory should be reflected into the container. To achieve this we will mount a volume. This volume will map local directory to the working directory in the container.

Now that we have a compose file, run this command to start our app:

docker-compose -f local.yml up

This command will build the images and then run them.

That's it! Now you will be able to share your project with anyone and all they have to do is run above command and start coding.