Angular, Nx and Analog

Blasdoc is an Angular library and a bundler-agnostic core. It runs the same in an Angular CLI project, an Nx workspace and an Analog app; what differs is three lines of wiring.

What every project needs

npm install @blasdoc/core @blasdoc/angular @blasdoc/highlight @blasdoc/components @blasdoc/theme-default

export const appConfig: ApplicationConfig = {
  providers: [
    provideBlasdoc(),
    provideBlasdocHighlight({
      themes: { github: { light: 'github-light', dark: 'github-dark' } },
      defaultTheme: 'github',
      defaultMeta: 'showLineNumbers',
    }),
    provideBlasdocTheme(),
  ],
};

/// <reference types="@blasdoc/core/md" />
/// <reference types="@blasdoc/angular/page" />

Angular CLI

The builder loads .md as text:

{
  "build": {
    "builder": "@angular/build:application",
    "options": { "loader": { ".md": "text" } }
  }
}

For templateMD inside @Component, swap the builder — the options are Angular's own and pass through untouched:

{
  "build": {
    "builder": "@blasdoc/build:application",
    "options": { "loader": { ".md": "text" } }
  },
  "serve": {
    "builder": "@blasdoc/build:dev-server",
    "options": { "buildTarget": "app:build" }
  }
}

Nx

The same builders, read from project.json:

{
  "targets": {
    "build": {
      "executor": "@blasdoc/build:application",
      "options": { "loader": { ".md": "text" } }
    },
    "serve": {
      "executor": "@blasdoc/build:dev-server",
      "options": { "buildTarget": "docs:build" }
    }
  }
}

Module boundaries are worth encoding, since Blasdoc has a direction of its own:

core → angular → highlight → components → theme-default

Analog and Vite

A Vite-based build uses the plugin, which both resolves .md imports and applies the page transform:

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';
import { blasdoc } from '@blasdoc/core/build';
 
export default defineConfig({ plugins: [blasdoc(), analog()] });

The same plugin is what makes templateMD work under Vitest, so tests and the application agree.

What is identical everywhere

• the runtime: parsing, the IR, components, bindings, control flow;

• the theme and its tokens;

• blasdocPage() and BlasdocPage, which need no build integration at all;

• <blasdoc-content> for content that arrives at runtime;

• SSR and prerendering, through Angular's own server build.

Checking

npx @blasdoc/cli doctor

It reports what is wired and what is not, in whichever of the three it finds.