Lazy components

A component registered as a loader is fetched the first time a document asks for it. Its code never enters the initial bundle.

Registering a loader

On a page, beside the components it loads eagerly:

@Component({
  selector: 'app-data-page',
  templateMD,
  components: [
    AppCallout,
    {
      selector: 'app-chart',
      load: () => import('./chart').then((m) => m.AppChart),
    },
  ],
})
export class DataPage {}

Application-wide, the record form takes a bare function:

provideBlasdoc({
  components: {
    'app-chart': () => import('./chart').then((m) => m.AppChart),
  },
});

What happens while it loads

The component's children render immediately, so the document is readable — and indexable — before the code arrives. When the import lands, the component adopts those very nodes rather than rebuilding them, so nothing blinks.

<app-chart data="4, 9, 6, 12" label="Weekly signups">
  Signups per week
</app-chart>

The caption above is on screen from the first frame.

Guarantees

• The loader runs once; concurrent uses share the same import.

• A loader that rejects is reported as a diagnostic, not left as an unhandled rejection.

• Entries are cached by identity, so two pages may use the same tag name for different components without colliding.