Lazy Load Angular Library (Micro-Applications)

Create a new Workspace

yarn create nx-workspace lazyLoadLibraryApp --npm-scope=lazy
yarn global add @nrwl/cli

Enable Angular (CLI) Templates

Add Host Application

ng g application appHost
? Which stylesheet format would you like to use? SASS(.scss) [ http://sass-lang.com ]
? Would you like to configure routing for this application? Yes

Add Library Project for Micro-App

ng g library securityApp --publishable
? Which stylesheet format would you like to use? SASS(.scss) [ http://sass-lang.com ]
export * from './lib/security-app.module';

Routing Modules

ng g module appRouting --project=app-host
CREATE apps/app-host/src/app/app-routing/app-routing.module.ts (196 bytes)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
// lazy-load the library application here;
}
];
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forRoot(routes)
]
})
export class AppRoutingModule { }

Security-App Library Project

ng g module appRouting --project=security-app
CREATE libs/security-app/src/lib/app-routing/app-routing.module.ts (196 bytes)
import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from '../login/login.component';

const routes: Routes = [
{
path: '', // default route for the security application.
component: LoginComponent
}
];

@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class AppRoutingModule { }
ng g component login --project=security-app
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { LoginComponent } from './login/login.component';

@NgModule({
declarations: [
LoginComponent
],
imports: [
AppRoutingModule,
CommonModule]
})
export class SecurityAppModule {}

Lazy-Load the Library (micro-app)

We import the module that is located in the @lazy/security-app library project (as if it were a package courtesy of Nx --npm-scope @lazy). When I created the workspace, I used the --npm-scope option to create the scope lazy.

{
// lazy-load the library application here;
path: '',
loadChildren: () => import(`@lazy/security-app`).then(m => m.SecurityAppModule),
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

// DO NOT IMPORT - IMPORTED VIA THE LAZY-LOAD PROCESS BELOW!!!!
// import { SecurityAppModule } from '@lazy/security-app'

const routes: Routes = [
{
// lazy-load the library application here;
path: '',
loadChildren: () => import(`@lazy/security-app`).then(m => m.SecurityAppModule),
}
];

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

Note: The import reference to @lazy/security-app is enabled through the configuration in the workspace tsconf.json file in the paths node.

"paths": {
"@lazy/security-app": ["libs/security-app/src/index.ts"]
}

Load It up Lazily

ng serve app-host

--

--

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