Angular Lazy Loading

In this blog, we will be learning about lazy loading in angular. The main concept of lazy loading is that don’t load something which you don’t need. Lazy loading is a useful technique for reducing the size of the bundle when the app loads initially which improves the app loads time thus improving the user experience. It’s also easy to have features loaded only when the user navigates to their routes for the first time.

Main steps to set up lazy loading

  1. Create a feature module.
  2. Use loadChildren in the main routing module.
  3. Create a routing module for feature module.

Create a feature module

In order to use lazy loading, we need submodules in our applications often called a feature module. Assuming that you have an Angular CLI project, let’s create a feature module using the following command.

Create lazy loading module

Note: Don’t load the feature module in your main module.

Now let’s create two components inside the lazyLoading module using the following command.

Create lazy loading component

Use loadChildren in the main routing module

Now let’s load the feature module in our main routing module (app-routing.module.ts). We need to use loadChildren() method to lazy load the feature module.

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

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path:'lazyLoading',
    loadChildren:
      './lazy-loading/lazy-loading.module#LazyLoadingModule'
  }
];

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

export class AppRoutingModule { }

 

The loadChildren() method takes the path to the module, then # followed by the module’s class name.

Create a routing module for a feature module

Now let’s configure routes in the routing module for the components under the feature module.

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

import { OneComponent } from './one/one.component';
import { TwoComponent } from './two/two.component';

const routes: Routes = [
{ path: '', component: OneComponent },
{ path: 'two', component: TwoComponent },
];

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

export class LazyLoadingRoutingModule { }

 

In the feature routing module include the routes with RouterModule’s forChild() method instead of the forRoot() method.

Lazy loading has been configured successfully now LazyLoadingModule will load only when the user navigates to “/lazyLoading”.

Preloading Strategy

When we run the application only the main modules are loaded all the other modules are lazy loaded. In this case, the lazily loaded modules load only when the user navigates to the feature module. Since the module is lazy loaded we have to wait for it to be loaded to overcome this we can use preload strategy.

To use preloading strategy we have to add preloadingStrategt in our app-routing.module.ts as shown below.

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
const routes: Routes = [
 { path: '', redirectTo: 'home', pathMatch: 'full' },
 { 
  path: 'lazyLoading', 
  loadChildren:
    './lazy-loading/lazy-loading.module#LazyLoadingModule' 
 }
];
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules,
  }
)],
exports: [RouterModule]
})
export class AppRoutingModule { }

The two subclasses in preloadingStrategy are.

  • NoPreloading: Default strategy which provides no preloading.
  • PreloadAllModules: Preloads all the lazy loaded modules.

By using PreloadAllModules we can load the modules which are required on the initial load of an application. All the other lazy loaded modules are loaded asynchronously right after the initial load of the application is done.

Another strategy is to preload the modules which are required and some other module with a delay. The method to use this is to add the data object to the route config as shown below.

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { 
    path: 'lazyLoading', 
    loadChildren: './lazy-loading/lazy-loading.module#LazyLoadingModule',
    data: { preload: true, delay: false }, 
  }
];

 

Reference:

 

Angular Flex-Layout

Flex layout is a package made for angular to use CSS flexbox features. The flex layout is used to display the elements within the flexbox container to be automatically arranged based on the parent container. Flex layout is used for building a layout structure. In this blog, we will be learning how to use angular flex layout module and its features.

Installation

Install the flex layout package with npm/yarn in your angular project.

$ npm i @angular/flex-layout

And add FlexLayoutModule into your AppModule.

Flex Layout

Let’s get started with flex layout features and how to use it and their properties.

  1. fxFlex

The fxFlex should be used on the element within the flexbox container. The fxFlex is used to resize the element based on the parent container. The fxFlex supports two usage long-form and short-form.

  • Long-form 
<div fxFlex="<grow> <shrink> <basis>"></div>
  • Short-form 
 <div fxFlex="<basis>"></div>

The flex basis value can be percentages, pixels, em, vm, vh, calcs.

Example:

<div fxFlex="20"> … </div>
  1. fxLayout

The fxLayout is used to specify the direction of the elements inside the flexbox container. Shown below are the property values of fxLayout.

  • row – Default value, the elements are displayed horizontally, as a row.
  • row-reverse – Same as the row, but in reverse order.
  • column – The elements are displayed vertically, as a column.
  • column-reverse – Same as the column, but in reverse order.
  • fxLayout + wrap – Specifies that the elements will wrap if necessary.

Note: when using the wrap, must first specify the layout direction.

Example:

<div fxLayout="row"> … </div>

<div fxLayout="row wrap"> … </div>
  1. fxLayoutGap

The fxLayout is used to specify the margin gaps on elements within the flexbox container. Shown below are the default mode of fxLayout.

  • margin-right is used when the flexbox container flex direction is a row.
  • margin-bottom is used when the flexbox container flex direction is a column.

Note: The last child element will not have the margin gap only the inside gap are specified.

Example:

<div fxLayoutGap="20px"> … </div>
  1. fxLayoutAlign

The fxLayoutAlign is used to align the elements inside a flexbox container. Shown below are the property values of fxLayoutAlign.

  • strat or flex-start – Default value, the elements are positioned at the beginning of the container.
  • end or flex-end – The elements are positioned at the end of the container.
  • center – The elements are positioned at the center of the container.
  • space-around – The elements are positioned with space before, between and after the lines.
  • space-between – The elements are positioned with space between the lines.
  • space-evenly – The elements have equal space around them.

Example:

 <div fxLayoutAlign="space-between center"> … </div>
  1. fxFlexOffset

This should be used on the element within the flexbox container. This is used to specify the margin-left to the elements within the flexbox container.

Example:

<div fxFlexOffset="20px"> … </div>
  1. fxFlexOrder

This should be used on the element within the flexbox container. This is used to specify the order for the elements inside the flexbox container.

Example:

 <div fxFlexOrder="2"> … </div>
  1. fxFlexFill

The fxFlexFill is used to maximizes the height and the width of the elements inside the flexbox container.

Example:

<div fxFlexFill> … </div>
  1. fxShow and fxHide

The fxShow and fxHide is used to show/hide the element based on the value passed to it.

Example:

<div fxHide="true"> … </div>

Responsive Layouts

The responsive layouts are used to apply different layout styles for different viewport sizes and display devices.  This can be used by combining breakpoints with fxLayout features. Some of the breakpoints are xs, sm, md, lg, xl for more reference responsive layouts.

Example:

<div fxHide.xs="true"> … </div>

Reference: