@ng-util/lazy

@ng-util/lazy

Lazy load javascript, css resources for Angular.

Demo

• Stackblitz
• Codesandbox

Usage

import { Component } from '@angular/core';
import { NuLazyService } from '@ng-util/lazy';

@Component({
  selector: 'app-demo',
  template: ` <button *ngIf="loaded" type="button" class="btn btn-primary">Primary</button>`,
})
export class DemoComponent {
  private srv = inject(NuLazyService);
  loaded = false;

  constructor() {
    this.load();
  }

  async load() {
    await this.srv.load([
      `https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css`,
      `https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js`,
    ]);
    this.loaded = true;
  }
}

API

name	type	description
monitor(paths: string ｜ Array<string ｜ NuLazyResources>)	Observable<NuLazyResult[]>	Monitor for the finished of paths
clear()	void	Clean all cached items
load(paths: string ｜ Array<string ｜ NuLazyResources>)	Promise<NuLazyResult[]>	Load the specified resources, includes .js, .css
loadScript(path: string, options?: { innerContent?: string })	Promise<NuLazyResult>	Load a script resources
loadStyle(path: string, options?: { ref?: string, innerContent?: string })	Promise<NuLazyResult>	Load a style resources

License

The MIT License (see the LICENSE file for the full text)

Changelog

20.1.0 (2025-08-04)

• feat: support zoneless (#98) (92f1323), closes #98