knowmore.tech - Medium

Custom Preloading Strategy in Angular

Pradeep — Tue, 29 Sep 2020 10:56:24 GMT

In our angular, we have the option to preload the modules while page loads using Preload Strategy.

PreloadAllModules

On going simple, with the below code we can preload all modules

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

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

For confirmation, look at the Network tab in chrome dev tools.

Now, you can see all the modules that you have in your app will load in the background once you opened the application.

2. Custom Preloading Strategy

Loading all modules in background is great but what if our app is very big than we need to preload only selected modules.For this case we can use Custom Preloading Strategy. Simply we can add preload : true to the route in our routing module.

In our Custom Preloading Strategy, even we can add delay to the modules ie we can tell them to load after some particular time of successful loading of the first module.

Now lets create a service named as ‘CustomPreloadingService’ , where our logic is placed

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

import { PreloadingStrategy, Route } from '@angular/router';

import { Observable, of, timer } from 'rxjs';

import { flatMap } from 'rxjs/operators';

@Injectable({

providedIn: 'root'

})

export class CustomPreloadingService implements PreloadingStrategy {

preload(route: Route, fn: () => Observable): Observable {

if (route.data && route.data['preload']) {

   const delay: number = route.data['delay'];

   return timer(delay).pipe(

   flatMap( _ => {

     return fn() ;

   }));

  } else {

   return of(null);

constructor() { }

Add our service to the app-routing.module.ts

import { CustomPreloadingService } from './custom-preloading.service';

const routes: Routes = [

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

{ 
path : 'auth',
data: {preload: true, delay: 5000},
loadChildren : () => import('./auth/auth.module').then(m => m.AuthModule
}

@NgModule({

providers: [CustomPreloadingService],

imports: [RouterModule.forRoot(routes, {

initialNavigation: 'enabled',

preloadingStrategy: CustomPreloadingService

})],

exports: [RouterModule]

})

We are saying that it should load the module after 5 seconds of successful loading of dashboard module

data: {preload: true, delay: 5000}

By doing the above things we can preload the specified module.

Custom Preloading Strategy in Angular was originally published in knowmore.tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

Angular SSR guide

Pradeep — Fri, 25 Sep 2020 14:31:31 GMT

Why we use Angular SSR ?

Make easy of Search engine optimization (SEO).
To show first page quickly.
To improve performance.

Angular Application to Universal Angular application:

Install the Node Module

ng add @nguniversal/express-engine

2. Now you can run your project using following cmds

npm run build:ssr && npm run serve:ssr

If every thing works fine than you can serve your project in http://localhost:4000

If it fails to run than you might get below errors

> ERROR ReferenceError: localStorage is not defined

> ERROR ReferenceError: window is not defined

> ERROR ReferenceError: gtag is not defined

ERROR ReferenceError: localStorage is not defined

Install npm install localstorage-polyfill

Add this in server.ts

import ‘localstorage-polyfill’

global[‘localStorage’] = localStorage;

2. ERROR ReferenceError: window is not defined

// Copy the following content

const domino = require('domino');

const fs = require('fs');

const path = require('path');

const template = fs.readFileSync(path.join('.', 'dist/your-project-directory-name', 'index.html')).toString();

const win = domino.createWindow(template);