Class LazyLoader<B>

A helper to lazy-load Angular services that are not associated with a lazy route. For example, you can split snack bar code into a separate bundle like this:

// snack-bar-bundle.ts
export const snackBarBundle = {
  tokenMap: { MatSnackBar },
  providers: [importProvidersFrom(MatSnackBarModule)],
};
export type SnackBarBundle = typeof snackBarBundle;
export default snackBarBundle;

// snack-bar-loader-token.ts
export const snackBarLoaderToken = new InjectionToken('snack bar loader', {
  factory: (): LazyLoader<SnackBarBundle> =>
    new LazyLoader(import('./snack-bar-bundle'))
});

// my-component.ts
@Component({
  template: `<button (click)=showSnackBar()>Click me</button>`
})
class MyComponent {
  #snackBarLoader = inject(snackBarLoaderToken);

  async showSnackBar(): Promise<void> {
    const matSnackBar = await this.#snackBarLoader.inject('MatSnackBar');
    matSnackBar.open('You clicked the button');
  }
}

Angular tests don't play well with lazy loading, so be sure to check out provideEagerLoading.

Type Parameters

  • B extends LazyBundle

Hierarchy

  • LazyLoader

Constructors

constructor

Methods

getToken inject

Constructors

constructor

Methods

getToken

  • Gets a provider token from the lazy bundle. This can be useful e.g. when creating a component dynamically, such as for a Material dialog:

    // my-dialog.ts
    @Component({
      template: `
        <mat-dialog-content>This is a dialog</mat-dialog-content>
        <mat-dialog-actions>
          <button mat-button mat-dialog-close>OK</button>
        </mat-dialog-actions>
      `,
      standalone: true,
      imports: [MatButtonModule, MatDialogModule],
    })
    export class MyDialogComponent {}

    // dialog-bundle.ts
    export const dialogBundle = {
      tokenMap: { MatDialog, MyDialogComponent },
      providers: [importProvidersFrom(MatDialogModule)],
    };
    export type DialogBundle = typeof dialogBundle;
    export default dialogBundle;

    // dialog-loader-token.ts
    export const dialogLoaderToken = new InjectionToken('dialog loader', {
      factory: () => LazyLoader<DialogBundle> =>
        new LazyLoader(import('./dialog-bundle'))
    });

    // wherever you want to open the dialog
    const dialogLoader = inject(dialogLoaderToken);
    const matDialog = await dialogLoader.inject('MatDialog');
    const myDialogComponent = await dialogLoader.getToken('MyDialogComponent');
    matDialog.open(myDialogComponent);

    Type Parameters

    • K extends string | number | symbol

    Parameters

    • key: K

    Returns Promise<TokenOf<B, K>>

inject

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc