Frontend Weekly
Published in

Frontend Weekly

Advanced Lazy Loading Techniques in Angular

Introduction

Lazy Loading with the Angular CLI

ng generate module my-module --routing

Dynamic Lazy Loading with the Router

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class MyRouteResolver implements Resolve<any> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
// Return a promise or observable that resolves to the data you need
// for the route. This data can be used to lazy load a module or component.
}
}
{
path: 'my-route',
component: MyComponent,
resolve: {
data: MyRouteResolver
}
}

Lazy Loading and Server-Side Rendering

Lazy Loading and the Angular Ivy Compiler

Enable Ivy Compiler

ng update @angular/core @angular/cli

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nic Chong

CTO & Co-founder @Kravve | Talks about #tech, #web3, #crypto | Writer for Level Up Coding & Geek Culture