Routing

A page is a component, so it routes like one. There is no Blasdoc router, no content collection to configure, and no manifest to keep in step.

A lazy route per page

export const routes: Routes = [
  {
    path: 'button',
    title: 'Button — Docs',
    loadComponent: () => import('./pages/button/button.page').then((m) => m.ButtonPage),
  },
];

The .md travels in the same chunk as the component that imports it, so a page downloads its own content and nothing else.

Deep links and anchors

Every heading carries an anchor derived from its text, so #the-markdown-boundary works out of the box, and so does a table of contents built from blasdocPageHeadings.

Titles and metadata

title on the route is the quickest way to set the document title. For the rest — description, canonical, Open Graph — a page is an ordinary component, so inject whatever service you use:

@Component({ selector: 'app-button-page', templateMD, components: [AppButton] })
export class ButtonPage {
  constructor() {
    inject(SeoService).apply({
      title: 'Button',
      description: 'A button triggers an action.',
      path: '/docs/button',
    });
  }
}

Guards, resolvers, providers

All of them work, because none of them know about Blasdoc:

{
  path: 'internal',
  canActivate: [signedIn],
  providers: [provideBlasdoc({ components: { 'app-secret': SecretComponent } })],
  loadComponent: () => import('./internal.page').then((m) => m.InternalPage),
}

Route-level providers are a good place for components only that section uses.

Prerendering

Because every page is a route, Angular's prerender walks them without knowing anything about Markdown. This site is built that way — see SSR and hydration.