This must be created in the context of an environment injector (e.g. during construction of a service or component).
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>
`,
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);
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:
Angular tests don't play well with lazy loading, so be sure to check out provideEagerLoading.