DEV Community: Brandon Roberts

AnalogJS 2.4: Vite 8, Vitest Snapshot Serializers, Astro v6 Support, and more!

Brandon Roberts — Mon, 30 Mar 2026 16:52:55 +0000

We are excited to announce the release of Analog 2.4! This release brings Vite 8 support, significant testing improvements for Vitest w/ Angular, and an updated Astro Angular integration. Let's dive in.

Vite 8 Support ⚡️

Analog 2.4 updates to the stable release of Vite 8.0.0. This is a major ecosystem alignment that brings several benefits:

Rolldown bundler: Vite 8 introduces Rolldown, a Rust-based bundler, as an alternative to esbuild for optimization. Analog's Angular Vite plugin now detects Rolldown availability and uses OXC-based compilation when available.
Vite Environment API: Analog leverages the new Environment API for managing client and server configurations, particularly in the Astro Angular integration.
Backward compatibility: Analog integrations continue to support Vite 5 through 8, so you can upgrade at your own pace.

Vitest DX Improvements 🧪

Reusable Snapshot Serializers

Writing snapshot tests for Angular components often produces noisy output filled with framework internals like _ngcontent-*, _nghost-*, ng-reflect-* attributes, and  comments. Analog 2.4 introduces three built-in snapshot serializers that clean this up.

createNoNgAttributesSnapshotSerializer strips Angular runtime noise from DOM snapshots. Here's what that looks like in practice:

<!-- Before -->
<div id="root0" ng-version="21.1.3" _nghost-a-c1="" class="card ng-star-inserted keep-me">
  <span class="card ng-star-inserted" _ngcontent-a-c1="" ng-reflect-foo="bar">Title</span>
</div>

<!-- After -->
<div class="card keep-me">
  <span class="card">Title</span>
</div>

createAngularFixtureSnapshotSerializer converts ComponentFixture objects into clean component markup, so instead of seeing raw testing internals you get:

<app-chip>
  <h1>
    Hello [Input Signal: Alice]
  </h1>
</app-chip>

createHtmlCommentSnapshotSerializer removes Angular-generated HTML comments like .

The easiest way to enable all serializers is via the automatic setup imports in your test setup file:

import '@angular/compiler';
import '@analogjs/vitest-angular/setup-snapshots';
import '@analogjs/vitest-angular/setup-serializers';
import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';

setupTestBed();

New Analog projects include this by default. You can also register serializers individually if you need more control:

import {
  createAngularFixtureSnapshotSerializer,
  createNoNgAttributesSnapshotSerializer,
  createHtmlCommentSnapshotSerializer,
} from '@analogjs/vitest-angular/snapshot-serializers';

expect.addSnapshotSerializer(createAngularFixtureSnapshotSerializer());
expect.addSnapshotSerializer(createNoNgAttributesSnapshotSerializer());
expect.addSnapshotSerializer(createHtmlCommentSnapshotSerializer());

Many thanks to Tim Deschryver for adding this feature!

`teardown.destroyAfterEach` Option

The new teardown option on setupTestBed gives you explicit control over Angular TestBed cleanup behavior:

import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';

setupTestBed({
  teardown: { destroyAfterEach: false },
});

This replaces the browserMode option, which is now deprecated and will be removed in v3.0.0.

Check out our Vitest Guide for more information on setting up Vitest in your Angular projects.

Many thanks to Younes Jaaidi for adding this feature!

Astro v6 Support & Strict Style Placement 🚀

Astro v6 Compatibility

Analog 2.4 adds full support for Astro v6 via the new Vite Environment API. Use the official Astro upgrade tool to update Astro and its integrations together:

npx @astrojs/upgrade

Then update @analogjs/astro-angular to the latest version:

npm install @analogjs/astro-angular@latest

`strictStylePlacement` Option

A new strictStylePlacement configuration option moves Angular component styles from the component body into the document <head>, producing valid HTML output:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import angular from '@analogjs/astro-angular';

export default defineConfig({
  integrations: [angular({ strictStylePlacement: true })],
});

When enabled, Angular component styles are relocated to <head> regardless of which island they originate from. Style ordering is preserved across multiple islands, and styles inside <template> elements (shadow DOM) are left in place. This lays the foundation for enabling client-side hydration of Angular components when used with Astro.

Note: Enabling this option disables Astro's streaming mode under SSR.

Many thanks to eblocha for the feature request and addition!

Upgrading

To upgrade to Analog 2.4, run:

ng update @analogjs/platform@latest

If you're using Nx, run:

nx migrate @analogjs/platform@latest

For the full list of changes, see the changelog.

Partner with Analog 🤝

Continued development of Analog would not be possible without our partners and community. Thanks to our official deployment partner Zerops, code review partner CodeRabbit, and longtime supporters Snyder Technologies, Nx, and House of Angular, and many other backers of the project.

Find out more information on our partnership opportunities or reach out directly to partnerships[at]analogjs.org.

Join the Community 🥇

Visit and Star the GitHub Repo
Join the Discord
Follow us on Twitter

If you enjoyed this post, click the ❤️ so other people will see it. Follow AnalogJS and Brandon Roberts on Bluesky, and subscribe to my YouTube Channel for more content!

Using a Headless CMS with Angular and Analog Content Loaders

Brandon Roberts — Mon, 23 Feb 2026 19:22:52 +0000

Analog provides a powerful content system out of the box. Drop some markdown files in the src/content folder, add some frontmatter, and you have a working blog. For many projects, this is all you need.

The @analogjs/content package also allows you to pull posts from a headless CMS like Contentful, Sanity, or some other external source. This post shows you how to provide your own content loaders and keep your component the same using the custom content resource APIs.

Understanding the Default Content System

Before diving into custom loaders, let's understand how the default system works. Analog provides Resources that fetch content files and content using Angular Resources underneath. When you call contentFilesResource(), Analog returns an Angular resource containing an array of ContentFile objects:

interface ContentFile<Attributes extends Record<string, any>> {
  filename: string;
  slug: string;
  content?: string | object;
  attributes: Attributes;
}

Each content file has a filename (the path to the file), a slug (derived from the filename or frontmatter), optional content (the rendered body), and attributes (parsed frontmatter). You typically define an interface for your attributes:

import { contentFilesResource } from '@analogjs/content/resources';

interface PostAttributes {
  title: string;
  description: string;
  published: boolean;
  publishedDate: string;
}

// In your component class
readonly posts = contentFilesResource<PostAttributes>();

// In your template, access the value using .value()
// @for (post of posts.value(); track post.slug) { ... }

The resource functions use Angular's resource() API under the hood, which means they return signals.

By default, loaders scan your src/content folder, parse the frontmatter, and make everything available through dependency injection.

The Content Loader Tokens

Analog exports two Injection tokens that control how content is loaded:

CONTENT_LIST_LOADER - Returns a function that provides an array of all content files. This powers contentFilesResource() and is used when you need to list or filter your content.

CONTENT_FILE_LOADER - Returns a function that provides a map of filenames to content loader functions. This powers contentFileResource() and is used when loading individual content files by slug.

You can provide your own implementations using the standard provide syntax to provide the data from your custom source.

Fetching Custom Content at Build Time

When building static sites with Analog, fetching content is done at build time. Customizing this behavior involves three pieces: a Vite plugin that fetches content and exposes it as a virtual module, custom content loaders that consume the pre-fetched data, and prerender configuration to generate routes for your external content.

Creating a Vite Plugin

Vite plugins can fetch external content during the build process and expose it through a virtual module.

For example, here's a plugin that fetches articles from dev.to:

// vite-plugins/devto-posts.ts
import { Plugin } from 'vite';

export interface DevToArticle {
  id: number;
  slug: string;
  title: string;
  description: string;
  published_at: string;
  body_markdown?: string;
  cover_image?: string;
}

export function devToPostsPlugin(username: string): Plugin {
  const virtualModuleId = 'virtual:devto-posts';
  const resolvedVirtualModuleId = '\0' + virtualModuleId;
  let cachedPosts: string | null = null;

  return {
    name: 'devto-posts',
    resolveId(id) {
      if (id === virtualModuleId) {
        return resolvedVirtualModuleId;
      }
    },
    async load(id) {
      if (id === resolvedVirtualModuleId) {
        if (!cachedPosts) {
          // Fetch article list
          const response = await fetch(
            `https://dev.to/api/articles?username=${username}&per_page=10`
          );
          const articles: DevToArticle[] = await response.json();

          // Fetch full content for each article
          const fullArticles = await Promise.all(
            articles.map(async (article) => {
              const full = await fetch(
                `https://dev.to/api/articles/${article.id}`
              ).then((r) => r.json());
              return full;
            })
          );

          cachedPosts = JSON.stringify(fullArticles);
        }
        return `export const devToPosts = ${cachedPosts};`;
      }
    },
  };
}

The plugin fetches articles once during the build, caches the result, and exposes them through a virtual module that can be imported anywhere in your application.

Adding Types for the Virtal Module

For type-safety, TypeScript needs a declaration file to understand the virtual module:

// src/app/data/devto-posts.d.ts
declare module 'virtual:devto-posts' {
  import { DevToArticle } from '../vite-plugins/devto-posts';
  export const devToPosts: DevToArticle[];
}

Custom Loaders with Build-Time Data

Now we create custom content loaders that use the pre-fetched data from the virtual module:

// src/app/providers/devto-content-loader.ts
import { Provider } from '@angular/core';
import {
  ContentFile,
  CONTENT_LIST_LOADER,
  CONTENT_FILE_LOADER,
  injectContentFiles,
  injectContentFilesMap,
} from '@analogjs/content';
import { devToPosts, DevToArticle } from 'virtual:devto-posts';

export interface PostAttributes {
  title: string;
  slug: string;
  description: string;
  published: boolean;
  publishedDate: string;
  isDevTo?: boolean;
  coverImage?: string;
}

/** Convert a dev.to article to the ContentFile format */
function toContentFile(article: DevToArticle): ContentFile<PostAttributes> {
  return {
    filename: article.slug,
    slug: article.slug,
    content: article.body_markdown,
    attributes: {
      title: article.title,
      slug: article.slug,
      description: article.description,
      published: true,
      publishedDate: article.published_at,
      isDevTo: true,
      coverImage: article.cover_image,
    },
  };
}

/** Custom list loader combining local markdown and dev.to posts */
export function withDevToContentListLoader(): Provider {
  return {
    provide: CONTENT_LIST_LOADER,
    useFactory() {
      return async () => {
        // Get local markdown files
        const localPosts = injectContentFiles<PostAttributes>();

        // Convert dev.to posts to ContentFile format
        const devToContentFiles = devToPosts.map(toContentFile);

        // Combine and sort by date
        return [...localPosts, ...devToContentFiles].sort(
          (a, b) =>
            new Date(b.attributes.publishedDate).getTime() -
            new Date(a.attributes.publishedDate).getTime()
        );
      };
    },
  };
}

/** Custom file loader including dev.to posts */
export function withDevToContentFileLoader(): Provider {
  return {
    provide: CONTENT_FILE_LOADER,
    useFactory() {
      return async () => {
        // Get local content files map
        const localFilesMap = injectContentFilesMap();

        // Add dev.to posts to the map
        const devToFilesMap: Record<string, () => Promise<any>> = {};
        for (const article of devToPosts) {
          devToFilesMap[article.slug] = async () => ({
            metadata: {
              title: article.title,
              slug: article.slug,
              description: article.description,
              published: true,
              publishedDate: article.published_at,
              isDevTo: true,
            },
            default: article.body_markdown,
          });
        }

        return { ...localFilesMap, ...devToFilesMap };
      };
    },
  };
}

/** Combined provider for both loaders */
export function withDevToContentLoader(): Provider[] {
  return [
    withDevToContentListLoader(), 
    withDevToContentFileLoader()
  ];
}

The loaders use injectContentFiles() and injectContentFilesMap() to get the default local content, then merge it with the build-time fetched dev.to posts.

Configuring Vite and Prerender Routes

// vite.config.ts
import { defineConfig } from 'vite';
import analog from '@analogjs/platform';
import { devToPostsPlugin } from './vite-plugins/devto-posts';

export default defineConfig({
  plugins: [
    devToPostsPlugin('your-devto-username'),
    analog({
      static: true,
      prerender: {
        routes: async () => {
          // Fetch slugs for prerendering
          const response = await fetch(
            'https://dev.to/api/articles?username=your-devto-username&per_page=10'
          );
          const articles = await response.json();
          const devToSlugs = articles.map((a: any) => a.slug);

          return [
            '/',
            '/blog',
            // Local content
            { contentDir: '/src/content', transform: (file) => `/blog/posts/${file.attributes.slug}` },
            // Dev.to posts
            ...devToSlugs.map((slug: string) => `/blog/posts/${slug}`),
          ];
        },
      },
    }),
  ],
});

Finally, provide the custom loaders in your app configuration:

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideFileRouter } from '@analogjs/router';
import { provideContent, withMarkdownRenderer } from '@analogjs/content';
import { withDevToContentLoader } from './providers/devto-content-loader';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFileRouter(),
    provideContent(
      withMarkdownRenderer(),
      ...withDevToContentLoader()
    ),
  ],
};

Using the Content in Components

Your components use contentFilesResource() and contentFileResource() exactly as they would with local content:

// src/app/pages/blog.page.ts
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { contentFilesResource } from '@analogjs/content/resources';
import { PostAttributes } from '../providers/devto-content-loader';

@Component({
  imports: [RouterLink],
  template: `
    <h1>Blog</h1>
    <ul>
      @for (post of posts.value(); track post.slug) {
        <li>
          <a [routerLink]="['/blog/posts', post.slug]">
            {{ post.attributes.title }}
          </a>
        </li>
      }
    </ul>
  `,
})
export default class BlogComponent {
  readonly posts = contentFilesResource<PostAttributes>();
}

For individual posts:

// src/app/pages/blog/posts/[slug].page.ts
import { Component } from '@angular/core';
import { MarkdownComponent } from '@analogjs/content';
import { contentFileResource } from '@analogjs/content/resources';
import { PostAttributes } from '../../../providers/devto-content-loader';

@Component({
  imports: [MarkdownComponent],
  template: `
    @if (post.value(); as post) {
      <article>
        <h1>{{ post.attributes.title }}</h1>

        <analog-markdown [content]="post.content"></analog-markdown>
      </article>
    }
  `,
})
export default class BlogPostComponent {
  readonly post = contentFileResource<PostAttributes>();
}

The components are completely agnostic to where the content comes from. Local markdown files and dev.to articles are presented through the same unified API.

Custom content file loaders give you the flexibility to fetch content from anywhere while maintaining a consistent API in your components. By combining Vite plugins for build-time fetching with custom loader tokens, you can integrate external content sources like dev.to, headless CMS platforms, or databases - all while your components continue using contentFilesResource() and contentFileResource() without any changes.

Check out the Analog documentation for more details on the content system.

If you enjoyed this post, click the ❤️ so other people will see it. Follow me on Bluesky, X, and subscribe to my YouTube Channel for more content!

Angular Skills: Agent Skills for AI-Assisted Development

Brandon Roberts — Mon, 26 Jan 2026 16:39:24 +0000

Coding agents are powerful tools for building applications, but they often suggest outdated Angular patterns—NgModules, @Input() decorators, *ngIf, and constructor injection. Angular has evolved significantly, and without up-to-date context, coding agents don't know about standalone components, signals, or the new control flow syntax.

This post introduces Angular Skills, a collection of skills that teach coding agents modern Angular v20+ patterns.

What Are Skills?

Skills are structured knowledge files that provide coding agents with domain-specific expertise. Agent Skills are a simple, open format for giving agents new capabilities and expertise, developed by Anthropic. They are meant to integrate directly into your AI-assisted development workflow.

Installing Angular Skills

Install all skills with a single command:

npx skills add analogjs/angular-skills

Or install individual skills:

npx skills add analogjs/angular-skills/skills/angular-signals
npx skills add analogjs/angular-skills/skills/angular-forms
npx skills add analogjs/angular-skills/skills/angular-http

Available Skills

angular-component

Modern standalone components with signal-based inputs, outputs, and queries. Covers OnPush change detection, host bindings, content projection, and lifecycle hooks.

angular-signals

Angular's reactive primitives: signal(), computed(), linkedSignal(), and effect(). Includes RxJS interop with toSignal() and toObservable().

angular-di

Dependency injection using the inject() function, injection tokens, provider configuration, and hierarchical DI patterns.

angular-forms

Signal Forms (experimental) with schema-based validation and field state management.

angular-http

Data fetching with httpResource() and resource() APIs for declarative, signal-based HTTP. Also covers HttpClient and functional interceptors.

angular-routing

Lazy loading, functional guards and resolvers, and signal-based route parameters with input.fromRoute().

angular-directives

Attribute directives, structural directives for portals and overlays, and host directive composition.

angular-ssr

Server-side rendering, incremental hydration, prerendering, and patterns for browser-only code.

angular-testing

Testing with TestBed, component harnesses, and signal testing utilities. Includes Vitest support for Angular v21+.

angular-tooling

Angular CLI commands, code generation with schematics, build configuration, and workspace setup.

What You Get

With these skills installed, coding agents will:

Use standalone components without adding standalone: true
Prefer signal inputs (input(), input.required()) over @Input() decorators
Use native control flow (@if, @for, @switch) instead of *ngIf, *ngFor
Apply OnPush change detection by default
Use inject() instead of constructor injection
Suggest httpResource() for data fetching
Write functional guards and interceptors
And more ...

Conclusion

Angular Skills provides coding agents with the context they need to generate modern Angular code. Install the skills and start building with AI that understands the framework.

Check out the repository:

https://github.com/analogjs/angular-skills

Give the GitHub repo a ⭐️! Contributions are welcome!

If you enjoyed this post, click the ❤️ so other people will see it. Follow me on Bluesky, X, and subscribe to my YouTube Channel for more content!

Interactive Angular Component Testing with Storybook and Vitest

Brandon Roberts — Wed, 14 Jan 2026 17:36:14 +0000

Storybook is a frontend workshop for building UI components and pages in isolation. Storybook with Vitest also enables interactive component testing.

This post guides you through setting up Storybook with Angular using Vite and the @storybook/addon-vitest package for interactive component testing.

Setting up Storybook

If you don't have Storybook setup already, run the following command to initialize Storybook for your project:

npx storybook@latest init --type angular

This installs the necessary Storybook dependencies and sets up a Storybook with example components including a Button component.

Follow the provided prompts, and commit your changes.

Setting up Storybook to use Vite with Analog

Install the AnalogJS Storybook Angular integration:

npm install @analogjs/storybook-angular @angular/animations zone.js --save-dev

Update the .storybook/main.ts file to use the @analogjs/storybook-angular package:

import { StorybookConfig } from '@analogjs/storybook-angular';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@analogjs/storybook-angular',
    options: {},
  },
};

export default config;

Update the angular.json storybook targets to use the @analogjs/storybook-angular builders:

"storybook": {
  "builder": "@analogjs/storybook-angular:start-storybook",
  "options": {
    "configDir": ".storybook",
    "styles": ["src/styles.css"],
    "experimentalZoneless": true
  }
},
"build-storybook": {
  "builder": "@analogjs/storybook-angular:build-storybook",
  "options": {
    "configDir": ".storybook",
    "styles": ["src/styles.css"],
    "experimentalZoneless": true
  }
}

Run Storybook to verify everything works:

npm run storybook

Setting up Vitest for Interaction Testing

Install the Vitest addon and dependencies:

npm install @analogjs/vitest-angular @storybook/addon-vitest vitest @vitest/browser-playwright --save-dev

Add the addon to your .storybook/main.ts:

import { StorybookConfig } from '@analogjs/storybook-angular';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-vitest',
  ],
  framework: {
    name: '@analogjs/storybook-angular',
    options: {},
  },
};

export default config;

Create a .storybook/vitest.setup.ts file:

import '@angular/compiler';
import { setProjectAnnotations } from '@analogjs/storybook-angular/testing';
import { beforeAll } from 'vitest';
import * as projectAnnotations from './preview';

const project = setProjectAnnotations([projectAnnotations]);

beforeAll(project.beforeAll);

Update .storybook/tsconfig.json to include the setup file:

{
  "extends": "../tsconfig.app.json",
  "compilerOptions": {
    "types": ["node"],
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true
  },
  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
  "include": ["../src/**/*.stories.*", "./preview.ts", "./vitest.setup.ts"],
  "files": ["./typings.d.ts"]
}

Create a vitest.config.ts file in your project root:

/// <reference types="vitest/config" />
import { defineConfig } from 'vite';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
import { playwright } from '@vitest/browser-playwright';

const dirname =
  typeof __dirname !== 'undefined'
    ? __dirname
    : path.dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  test: {
    projects: [
      {
        extends: true,
        plugins: [
          storybookTest({
            configDir: path.join(dirname, '.storybook'),
          }),
        ],
        test: {
          name: 'storybook',
          browser: {
            enabled: true,
            headless: true,
            provider: playwright(),
            instances: [{ browser: 'chromium' }],
          },
          setupFiles: ['.storybook/vitest.setup.ts'],
        },
      },
    ],
  },
});

Install Playwright browser binaries:

npx playwright install chromium

Add the test-storybook target to your angular.json:

"test-storybook": {
  "builder": "@analogjs/vitest-angular:test",
  "options": {
    "configFile": "vitest.config.ts"
  }
}

Add a test script to your package.json:

"scripts": {
  "test-storybook": "ng run your-app:test-storybook"
}

Writing Interaction Tests

The Button component from Storybook's initial setup is a great example for interaction testing. Here's how to add a play function to test user interactions:

import type { Meta, StoryObj } from '@storybook/angular';
import { fn, expect, userEvent, within } from '@storybook/test';
import { Button } from './button.component';

const meta: Meta<Button> = {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  args: { onClick: fn() },
};

export default meta;
type Story = StoryObj<Button>;

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
  play: async ({ canvasElement, args }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button', { name: /Button/i });

    await userEvent.click(button);

    await expect(args.onClick).toHaveBeenCalled();
  },
};

export const Secondary: Story = {
  args: {
    label: 'Button',
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button', { name: /Button/i });

    await expect(button).toBeInTheDocument();
    await expect(button).toHaveClass('storybook-button--secondary');
  },
};

The play function allows you to:

Query elements using within(canvasElement)
Simulate user interactions with userEvent
Make assertions with expect
And more ...

Running Tests

Run your interaction tests with:

npm run test-storybook

This runs all stories with play functions as tests in a real browser using Playwright, giving you confidence that your components work as expected.

You can also run tests directly in the Storybook UI. Start Storybook and use the "Run Tests" button in the sidebar, or navigate to a story to see interaction tests run automatically in the Interactions panel.

Conclusion

Using Storybook with Angular and Vite provides faster builds and a better developer experience. Adding Vitest for interaction testing lets you verify component behavior directly in your stories.

See the example repository with a full Storybook setup

https://github.com/brandonroberts/angular-vite-storybook

If you enjoyed this post, click the ❤️ so other people will see it. Follow AnalogJS and me on Twitter/X, and subscribe to my YouTube Channel for more content!

Building an Angular Compiler using AI with Google Gemini

Brandon Roberts — Wed, 31 Dec 2025 17:15:08 +0000

The Angular Compiler is the pipeline that translates Angular decorator and template syntax into metadata and Ivy runtime instructions. In an exploration using Gemini, I set out to build a "Lite" version of this without the @angular/compiler-cli package to learn more about the internals of the Angular Compiler, how Angular transforms components into the static ɵcmp and ɵfac properties, and how this could influence single-file compilation in the future with build tools such as Vite.

Parsing Decorator Metadata

Every Angular component begins with a @Component decorator. My compiler's first task is to statically analyze the metadata. This can be done using the TypeScript Compiler API to scan for classes, decorators, and other properties of the source file.

To research the complex R3ComponentMetadata structures, I leveraged Gemini as a specialized research agent. By feeding it snippets of the Angular source code, I was able to:

Map internal interfaces: Gemini identified the relationships between the Component decorator properties and the internal R3 metadata required by the compileComponentFromMetadata function.
Scan for modern APIs: I used Gemini to help write a static analyzer that identifies Signal-based APIs like input() and model() within class members, ensuring they are registered in the metadata even though they sit outside the decorator.

function extractMetadata(dec: ts.Decorator): any {
  const call = dec.expression as ts.CallExpression;
  const obj = call.arguments[0] as ts.ObjectLiteralExpression;
  const meta: any = { hostRaw: {}, inputs: {}, outputs: {}, standalone: true, imports: [], providers: null, viewProviders: null, animations: null, changeDetection: 1, encapsulation: 0, preserveWhitespaces: false, exportAs: null, styles: [], templateUrl: null, styleUrls: [] };
  if (!obj) return meta;
  obj.properties.forEach(p => {
    if (!ts.isPropertyAssignment(p)) return;
    const key = p.name.getText().replace(/['"`]/g, ''), valNode = p.initializer, valText = valNode.getText();
    switch (key) {
      case 'host': if (ts.isObjectLiteralExpression(valNode)) valNode.properties.forEach(hp => { if (ts.isPropertyAssignment(hp)) meta.hostRaw[hp.name.getText().replace(/['"`]/g, '')] = hp.initializer.getText().replace(/['"`]/g, ''); }); break;
      case 'changeDetection': meta.changeDetection = valText.includes('OnPush') ? 0 : 1; break;
      case 'encapsulation': meta.encapsulation = valText.includes('None') ? 2 : (valText.includes('ShadowDom') ? 3 : 0); break;
      case 'preserveWhitespaces': meta.preserveWhitespaces = valText === 'true'; break;
      case 'exportAs': meta.exportAs = [valText.replace(/['"`]/g, '')]; break;
      case 'templateUrl': meta.templateUrl = valText.replace(/['"`]/g, ''); break;
      case 'styleUrls': if (ts.isArrayLiteralExpression(valNode)) meta.styleUrls = valNode.elements.map(e => e.getText().replace(/['"`]/g, '')); break;
      case 'styles': if (ts.isArrayLiteralExpression(valNode)) meta.styles = valNode.elements.map(e => e.getText().replace(/['"`]/g, '')); break;
      case 'imports': case 'providers': case 'viewProviders': case 'animations': case 'rawImports': if (ts.isArrayLiteralExpression(valNode)) meta[key] = valNode.elements.map(e => new o.WrappedNodeExpr(e)); break;
      default: meta[key] = valText.replace(/['"`]/g, '');
    }
  });
  return meta;
}

This function collects all the necessary metadata from the Component decorator, and translates into TypeScript expressions that can be passed to the compileComponentFromMetadata function.

Parsing the Component Template

After metadata is gathered, the next step is processing the template string. Using the official @angular/compiler's parseTemplate function, raw HTML is converted into a Angular's Render3 AST.

Gemini assisted in deciphering the AST Node documentation, helping me understand how high-level syntax—like the new @if control flow—is converted into discrete internal nodes that the code generator can understand.

const parsedTemplate = parseTemplate(templateString, fileName, {
  preserveWhitespaces: false,
});

The parseTemplate function has many use cases; for example, it is used by Angular ESLint to analyze the AST and validate lint rules. It's also used in Angular migrations to detect legacy syntax that can be migrated to newer syntax.

// The result is a collection of nodes (Element, BoundText, etc.)
const templateNodes = parsedTemplate.nodes;

As the result can be fed directly into the component compiler function, not much extra transformation is needed here.

    const cmp = compileComponentFromMetadata({
      // other metadata
      template: {
        nodes: parsedTemplate.nodes,
        ngContentSelectors: parsedTemplate.ngContentSelectors,
        preserveWhitespaces: parsedTemplate.preserveWhitespaces
      }
    });

There's much more metadata that's needed to compile an Angular component, but these are the necessary parts for incorporating the template.

Translating the Output AST

The next phase is translating Angular's internal "Output AST" back into valid TypeScript code. This was achieved an Exhaustive Visitor Pattern, mapping Angular nodes to TypeScript Factory calls.

Initially, Gemini generated some utility functions to translate Angular's AST output to TypeScript code.

function translateOutputASTStatement(stmt: o.Statement, printer: ts.Printer, sf: ts.SourceFile): string | ts.Statement {
  let tsStmt: ts.Statement;

  if (stmt instanceof o.ReturnStatement) {
    tsStmt = ts.factory.createReturnStatement(translateOutputAST(stmt.value));
  } else if (stmt instanceof o.DeclareVarStmt) {
    tsStmt = ts.factory.createVariableStatement(
      undefined,
      ts.factory.createVariableDeclarationList(
        [ts.factory.createVariableDeclaration(stmt.name, undefined, undefined, stmt.value ? translateOutputAST(stmt.value) : undefined)],
        stmt.hasModifier(o.StmtModifier.Final) ? ts.NodeFlags.Const : ts.NodeFlags.Let
      )
    );
  } else if (stmt instanceof o.IfStmt) {
    tsStmt = ts.factory.createIfStatement(
      translateOutputAST(stmt.condition),
      ts.factory.createBlock(stmt.trueCase.map(s => translateOutputASTStatement(s, null as any, null as any) as ts.Statement), true),
      stmt.falseCase.length ? ts.factory.createBlock(stmt.falseCase.map(s => translateOutputASTStatement(s, null as any, null as any) as ts.Statement), true) : undefined
    );
  } else if (stmt instanceof o.ExpressionStatement) {
    tsStmt = ts.factory.createExpressionStatement(translateOutputAST(stmt.expr));
  } else {
    tsStmt = ts.factory.createEmptyStatement();
  }

  return printer ? printer.printNode(ts.EmitHint.Unspecified, tsStmt, sf) : tsStmt;
}

function translateOutputAST(expr: o.Expression): ts.Expression {
  // Literals
  if (expr instanceof o.LiteralExpr) {
    if (typeof expr.value === 'string') return ts.factory.createStringLiteral(expr.value);
    if (typeof expr.value === 'number') return ts.factory.createNumericLiteral(String(expr.value));
    if (typeof expr.value === 'boolean') return expr.value ? ts.factory.createTrue() : ts.factory.createFalse();
    return ts.factory.createNull();
  }

  // References & Core Bridge
  if (expr instanceof o.ExternalExpr) {
    return ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('i0'), ts.factory.createIdentifier(expr.value.name!));
  }
  if (expr instanceof o.ReadVarExpr) return ts.factory.createIdentifier(expr.name);
  if (expr instanceof o.ReadPropExpr) return ts.factory.createPropertyAccessExpression(translateOutputAST(expr.receiver), expr.name);
  if (expr instanceof o.ReadKeyExpr) return ts.factory.createElementAccessExpression(translateOutputAST(expr.receiver), translateOutputAST(expr.index));

  // Functions & Constructors
  if (expr instanceof o.FunctionExpr) {
    return ts.factory.createArrowFunction(
      undefined, undefined,
      expr.params.map(p => ts.factory.createParameterDeclaration(undefined, undefined, p.name, undefined, undefined, undefined)),
      undefined, ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken),
      ts.factory.createBlock(expr.statements.map(s => translateOutputASTStatement(s, null as any, null as any) as ts.Statement), true)
    );
  }
  if (expr instanceof o.InvokeFunctionExpr) return ts.factory.createCallExpression(translateOutputAST(expr.fn), undefined, expr.args.map(translateOutputAST));
  // if (expr instanceof ts.stat.InvokeMethodExpr) {
  //   return ts.factory.createCallExpression(
  //     ts.factory.createPropertyAccessExpression(translateOutputAST(expr.receiver), expr.name),
  //     undefined, expr.args.map(translateOutputAST)
  //   );
  // }
  if (expr instanceof o.InstantiateExpr) {
    return ts.factory.createNewExpression(translateOutputAST(expr.classExpr), undefined, expr.args.map(translateOutputAST));
  }

  // Operators & Logic
  if (expr instanceof o.BinaryOperatorExpr) {
    const opMap: Record<o.BinaryOperator, ts.BinaryOperator> = {
      [o.BinaryOperator.And]: ts.SyntaxKind.AmpersandAmpersandToken, [o.BinaryOperator.Or]: ts.SyntaxKind.BarBarToken,
      [o.BinaryOperator.Equals]: ts.SyntaxKind.EqualsEqualsToken, [o.BinaryOperator.Identical]: ts.SyntaxKind.EqualsEqualsEqualsToken,
      [o.BinaryOperator.NotEquals]: ts.SyntaxKind.ExclamationEqualsToken, [o.BinaryOperator.NotIdentical]: ts.SyntaxKind.ExclamationEqualsEqualsToken,
      [o.BinaryOperator.Minus]: ts.SyntaxKind.MinusToken, [o.BinaryOperator.Plus]: ts.SyntaxKind.PlusToken,
      [o.BinaryOperator.Divide]: ts.SyntaxKind.SlashToken, [o.BinaryOperator.Multiply]: ts.SyntaxKind.AsteriskToken,
      [o.BinaryOperator.Modulo]: ts.SyntaxKind.PercentToken, [o.BinaryOperator.Lower]: ts.SyntaxKind.LessThanToken,
      [o.BinaryOperator.LowerEquals]: ts.SyntaxKind.LessThanEqualsToken, [o.BinaryOperator.Bigger]: ts.SyntaxKind.GreaterThanToken,
      [o.BinaryOperator.BiggerEquals]: ts.SyntaxKind.GreaterThanEqualsToken, [o.BinaryOperator.BitwiseAnd]: ts.SyntaxKind.AmpersandToken
    };
    return ts.factory.createBinaryExpression(translateOutputAST(expr.lhs), opMap[expr.operator] ?? ts.SyntaxKind.PlusToken, translateOutputAST(expr.rhs));
  }
  if (expr instanceof o.NotExpr) return ts.factory.createPrefixUnaryExpression(ts.SyntaxKind.ExclamationToken, translateOutputAST(expr.condition));
  if (expr instanceof o.TypeofExpr) return ts.factory.createTypeOfExpression(translateOutputAST(expr.expr));
  if (expr instanceof o.ConditionalExpr) {
    return ts.factory.createConditionalExpression(translateOutputAST(expr.condition), ts.factory.createToken(ts.SyntaxKind.QuestionToken), translateOutputAST(expr.trueCase), ts.factory.createToken(ts.SyntaxKind.ColonToken), translateOutputAST(expr.falseCase!));
  }

  // Collections
  if (expr instanceof o.LiteralMapExpr) {
    return ts.factory.createObjectLiteralExpression(expr.entries.map(e => ts.factory.createPropertyAssignment(e.quoted ? ts.factory.createStringLiteral(e.key) : ts.factory.createIdentifier(e.key), translateOutputAST(e.value))), true);
  }
  if (expr instanceof o.LiteralArrayExpr) return ts.factory.createArrayLiteralExpression(expr.entries.map(translateOutputAST), true);

  // Wrappers
  if (expr instanceof o.WrappedNodeExpr) return expr.node as ts.Expression;

  return ts.factory.createNull();
}

This proved to be error-prone and lacked sufficient coverage of edge cases. Through some digging into Angular source code, prompting Gemini to implement the visitor pattern was much more comprehensive.

import * as o from '@angular/compiler';
import * as ts from 'typescript';

export class AstTranslator implements o.ExpressionVisitor, o.StatementVisitor {
    // --- Non-exported or Version-Specific Expression Methods ---

    visitWritePropExpr(ast: any, context: any) {
        return ts.factory.createBinaryExpression(
            ast.receiver.visitExpression(this, context),
            ts.SyntaxKind.EqualsToken,
            ast.value.visitExpression(this, context)
        );
    }

    visitInvokeMethodExpr(ast: any, context: any) {
        return ts.factory.createCallExpression(
            ts.factory.createPropertyAccessExpression(
                ast.receiver.visitExpression(this, context),
                ast.name
            ),
            undefined,
            ast.args.map((a: any) => a.visitExpression(this, context))
        );
    }

    visitWriteKeyExpr(ast: any, context: any) {
        return ts.factory.createBinaryExpression(
            ts.factory.createElementAccessExpression(
                ast.receiver.visitExpression(this, context),
                ast.index.visitExpression(this, context)
            ),
            ts.SyntaxKind.EqualsToken,
            ast.value.visitExpression(this, context)
        );
    }

    visitTaggedTemplateLiteralExpr(ast: any, context: any) {
        const elements = ast.template.elements;
        const expressions = ast.template.expressions;

        const head = ts.factory.createTemplateHead(elements[0].text, elements[0].text);
        const spans = expressions.map((expr: any, i: number) => {
            const element = elements[i + 1];
            const literal = i === expressions.length - 1
                ? ts.factory.createTemplateTail(element.text, element.text)
                : ts.factory.createTemplateMiddle(element.text, element.text);
            return ts.factory.createTemplateSpan(expr.visitExpression(this, context), literal);
        });

        return ts.factory.createTaggedTemplateExpression(
            ast.tag.visitExpression(this, context),
            undefined,
            ts.factory.createTemplateExpression(head, spans)
        );
    }

    // --- Standard Expression Visitor Methods ---

    // Support Defer dependency tracking variables
    visitReadVarExpr(ast: o.ReadVarExpr, context: any) {
        return ts.factory.createIdentifier(ast.name);
    }

    visitReadPropExpr(ast: o.ReadPropExpr, context: any) {
        return ts.factory.createPropertyAccessExpression(ast.receiver.visitExpression(this, context), ast.name);
    }

    visitReadKeyExpr(ast: o.ReadKeyExpr, context: any) {
        return ts.factory.createElementAccessExpression(ast.receiver.visitExpression(this, context), ast.index.visitExpression(this, context));
    }

    visitLiteralExpr(ast: o.LiteralExpr, context: any) {
        if (typeof ast.value === 'string') {
            return ts.factory.createStringLiteral(ast.value);
        }
        if (typeof ast.value === 'number') {
            if (ast.value < 0) {
                return ts.factory.createPrefixUnaryExpression(
                    ts.SyntaxKind.MinusToken,
                    ts.factory.createNumericLiteral(Math.abs(ast.value).toString())
                );
            }
            return ts.factory.createNumericLiteral(ast.value.toString());
        }
        if (typeof ast.value === 'boolean') return ast.value ? ts.factory.createTrue() : ts.factory.createFalse();
        return ts.factory.createNull();
    }

    visitLiteralArrayExpr(ast: o.LiteralArrayExpr, context: any) {
        return ts.factory.createArrayLiteralExpression(
            ast.entries.map(e => {
                // Safety check: sometimes the compiler emits null entries for empty slots
                if (!e) return ts.factory.createNull();
                return e.visitExpression(this, context);
            }),
            true
        );
    }

    visitLiteralMapExpr(ast: o.LiteralMapExpr, context: any) {
        return ts.factory.createObjectLiteralExpression(
            ast.entries.map(e => ts.factory.createPropertyAssignment(
                e.quoted ? ts.factory.createStringLiteral(e.key) : ts.factory.createIdentifier(e.key),
                // Fix: Added safety check for null entries in metadata maps
                e.value ? e.value.visitExpression(this, context) : ts.factory.createNull()
            )),
            true
        );
    }

    // Ensure visitInvokeFunctionExpr is fully mapping all arguments for v21
    visitInvokeFunctionExpr(ast: o.InvokeFunctionExpr, context: any) {
        return ts.factory.createCallExpression(
            ast.fn.visitExpression(this, context),
            undefined,
            ast.args.map(a => a.visitExpression(this, context))
        );
    }

    visitInstantiateExpr(ast: o.InstantiateExpr, context: any) {
        return ts.factory.createNewExpression(ast.classExpr.visitExpression(this, context), undefined, ast.args.map(a => a.visitExpression(this, context)));
    }

    visitTemplateLiteralExpr(ast: o.TemplateLiteralExpr, context: any) {
        const headText = ast.elements[0].text;
        const head = ts.factory.createTemplateHead(headText, headText);
        const spans = ast.expressions.map((expr, i) => {
            const isLast = i === ast.expressions.length - 1;
            const content = ast.elements[i + 1].text;
            const literal = isLast ? ts.factory.createTemplateTail(content, content) : ts.factory.createTemplateMiddle(content, content);
            return ts.factory.createTemplateSpan(expr.visitExpression(this, context), literal);
        });
        return ts.factory.createTemplateExpression(head, spans);
    }

    visitBinaryOperatorExpr(ast: o.BinaryOperatorExpr, context: any) {
        const opMap: Record<o.BinaryOperator, ts.BinaryOperator> = {
            [o.BinaryOperator.Equals]: ts.SyntaxKind.EqualsEqualsToken,
            [o.BinaryOperator.NotEquals]: ts.SyntaxKind.ExclamationEqualsToken,
            [o.BinaryOperator.Assign]: ts.SyntaxKind.EqualsToken,
            [o.BinaryOperator.Identical]: ts.SyntaxKind.EqualsEqualsEqualsToken,
            [o.BinaryOperator.NotIdentical]: ts.SyntaxKind.ExclamationEqualsEqualsToken,
            [o.BinaryOperator.Minus]: ts.SyntaxKind.MinusToken,
            [o.BinaryOperator.Plus]: ts.SyntaxKind.PlusToken,
            [o.BinaryOperator.Divide]: ts.SyntaxKind.SlashToken,
            [o.BinaryOperator.Multiply]: ts.SyntaxKind.AsteriskToken,
            [o.BinaryOperator.Modulo]: ts.SyntaxKind.PercentToken,
            [o.BinaryOperator.And]: ts.SyntaxKind.AmpersandAmpersandToken,
            [o.BinaryOperator.Or]: ts.SyntaxKind.BarBarToken,
            [o.BinaryOperator.BitwiseOr]: ts.SyntaxKind.BarToken,
            [o.BinaryOperator.BitwiseAnd]: ts.SyntaxKind.AmpersandToken,
            [o.BinaryOperator.Lower]: ts.SyntaxKind.LessThanToken,
            [o.BinaryOperator.LowerEquals]: ts.SyntaxKind.LessThanEqualsToken,
            [o.BinaryOperator.Bigger]: ts.SyntaxKind.GreaterThanToken,
            [o.BinaryOperator.BiggerEquals]: ts.SyntaxKind.GreaterThanEqualsToken,
            [o.BinaryOperator.NullishCoalesce]: ts.SyntaxKind.QuestionQuestionToken,
            [o.BinaryOperator.Exponentiation]: ts.SyntaxKind.AsteriskAsteriskToken,
            [o.BinaryOperator.In]: ts.SyntaxKind.InKeyword,
            [o.BinaryOperator.AdditionAssignment]: ts.SyntaxKind.PlusEqualsToken,
            [o.BinaryOperator.SubtractionAssignment]: ts.SyntaxKind.MinusEqualsToken,
            [o.BinaryOperator.MultiplicationAssignment]: ts.SyntaxKind.AsteriskEqualsToken,
            [o.BinaryOperator.DivisionAssignment]: ts.SyntaxKind.SlashEqualsToken,
            [o.BinaryOperator.RemainderAssignment]: ts.SyntaxKind.PercentEqualsToken,
            [o.BinaryOperator.ExponentiationAssignment]: ts.SyntaxKind.AsteriskAsteriskEqualsToken,
            [o.BinaryOperator.AndAssignment]: ts.SyntaxKind.AmpersandAmpersandEqualsToken,
            [o.BinaryOperator.OrAssignment]: ts.SyntaxKind.BarBarEqualsToken,
            [o.BinaryOperator.NullishCoalesceAssignment]: ts.SyntaxKind.QuestionQuestionEqualsToken,
        };
        return ts.factory.createBinaryExpression(ast.lhs.visitExpression(this, context), opMap[ast.operator] ?? ts.SyntaxKind.PlusToken, ast.rhs.visitExpression(this, context));
    }

    visitConditionalExpr(ast: o.ConditionalExpr, context: any) {
        return ts.factory.createConditionalExpression(ast.condition.visitExpression(this, context), ts.factory.createToken(ts.SyntaxKind.QuestionToken), ast.trueCase.visitExpression(this, context), ts.factory.createToken(ts.SyntaxKind.ColonToken), ast.falseCase!.visitExpression(this, context));
    }

    visitNotExpr(ast: o.NotExpr, context: any) {
        return ts.factory.createPrefixUnaryExpression(ts.SyntaxKind.ExclamationToken, ast.condition.visitExpression(this, context));
    }

    visitTypeofExpr(ast: o.TypeofExpr, context: any) {
        return ts.factory.createTypeOfExpression(ast.expr.visitExpression(this, context));
    }

    visitUnaryOperatorExpr(ast: o.UnaryOperatorExpr, context: any) {
        const ops = { [o.UnaryOperator.Minus]: ts.SyntaxKind.MinusToken, [o.UnaryOperator.Plus]: ts.SyntaxKind.PlusToken };
        return ts.factory.createPrefixUnaryExpression(ops[ast.operator] ?? ts.SyntaxKind.PlusToken, ast.expr.visitExpression(this, context));
    }

    visitFunctionExpr(ast: o.FunctionExpr, context: any) {
        return ts.factory.createArrowFunction(undefined, undefined, ast.params.map(p => ts.factory.createParameterDeclaration(undefined, undefined, p.name)), undefined, ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), ts.factory.createBlock(ast.statements.map(s => s.visitStatement(this, context)), true));
    }

    visitArrowFunctionExpr(ast: o.ArrowFunctionExpr, context: any) {
        return ts.factory.createArrowFunction(undefined, undefined, ast.params.map(p => ts.factory.createParameterDeclaration(undefined, undefined, p.name)), undefined, ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), ast.body.visitExpression(this, context));
    }

    visitDynamicImportExpr(ast: o.DynamicImportExpr, context: any) {
        return ts.factory.createCallExpression(ts.factory.createToken(ts.SyntaxKind.ImportKeyword) as any, undefined, [ast.url.visitExpression(this, context)]);
    }

    visitParenthesizedExpr(ast: o.ParenthesizedExpr, context: any) {
        return ts.factory.createParenthesizedExpression(ast.expr.visitExpression(this, context));
    }

    visitCommaExpr(ast: o.CommaExpr, context: any) {
        return ast.parts.map(p => p.visitExpression(this, context)).reduce((p, c) => ts.factory.createBinaryExpression(p, ts.SyntaxKind.CommaToken, c));
    }

    visitVoidExpr(ast: o.VoidExpr, context: any) {
        return ts.factory.createVoidExpression(ast.expr.visitExpression(this, context));
    }

    visitLocalizedString(ast: o.LocalizedString, context: any) {
        throw new Error('i18n is not supported');
    }

    visitRegularExpressionLiteral(ast: o.RegularExpressionLiteralExpr, context: any) {
        return ts.factory.createRegularExpressionLiteral(`/${ast.pattern}/${ast.flags}`);
    }

    visitTemplateLiteralElementExpr(ast: o.TemplateLiteralElementExpr, context: any) {
        return ts.factory.createStringLiteral(ast.text);
    }

    visitWrappedNodeExpr(ast: o.WrappedNodeExpr<any>, context: any) {
        // This is how Angular passes back original TS nodes (like Signal calls)
        // into the generated code.
        return ast.node as ts.Expression;
    }

    visitExternalExpr(ast: o.ExternalExpr, context: any) {
        return ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('i0'), ts.factory.createIdentifier(ast.value.name!));
    }

    // --- Statement Visitor Methods ---

    visitDeclareVarStmt(stmt: o.DeclareVarStmt, context: any) {
        return ts.factory.createVariableStatement(undefined, ts.factory.createVariableDeclarationList([ts.factory.createVariableDeclaration(stmt.name, undefined, undefined, stmt.value ? stmt.value.visitExpression(this, context) : undefined)], stmt.hasModifier(o.StmtModifier.Final) ? ts.NodeFlags.Const : ts.NodeFlags.Let));
    }

    visitDeclareFunctionStmt(stmt: o.DeclareFunctionStmt, context: any) {
        return ts.factory.createFunctionDeclaration(undefined, undefined, stmt.name, undefined, stmt.params.map(p => ts.factory.createParameterDeclaration(undefined, undefined, p.name)), undefined, ts.factory.createBlock(stmt.statements.map(s => s.visitStatement(this, context)), true));
    }

    visitExpressionStmt(stmt: o.ExpressionStatement, context: any) {
        return ts.factory.createExpressionStatement(stmt.expr.visitExpression(this, context));
    }

    visitReturnStmt(stmt: o.ReturnStatement, context: any) {
        return ts.factory.createReturnStatement(stmt.value.visitExpression(this, context));
    }

    visitIfStmt(stmt: o.IfStmt, context: any) {
        return ts.factory.createIfStatement(stmt.condition.visitExpression(this, context), ts.factory.createBlock(stmt.trueCase.map(s => s.visitStatement(this, context)), true), stmt.falseCase.length ? ts.factory.createBlock(stmt.falseCase.map(s => s.visitStatement(this, context)), true) : undefined);
    }
}

Example: From Source to Ivy Output

Here is a sample standalone component using Signals and its actual compiled Ivy output. Note how the @Component decorator is replaced by static properties that use imperative instructions like ɵɵelementStart and ɵɵtext.

Input Source

import { Component, computed, input, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    Count: {{ count() }}

    <button (click)="increment()">Increment</button>
        <button (click)="decrement()">Decrement</button>

        @if(show()) {
            <div>Hello {{ name() }}</div>
        }
  `
})
export class Counter {
    name = input();
  count = signal(0);
    show = computed(() => this.count() > 5);

  increment() {
    this.count.update(cnt => ++cnt);
  }

  decrement() {
    this.count.update(cnt => --cnt);
  } 
}

Actual Ivy Output

import*as i0 from "/node_modules/.vite/deps/@angular_core.js?v=0f32e3a9";
import {computed, input, signal} from "/node_modules/.vite/deps/@angular_core.js?v=0f32e3a9";
export class Counter {
    constructor() {
        this.name = input();
        this.count = signal(0);
        this.show = computed( () => this.count() > 5);
    }
    increment() {
        this.count.update( (cnt) => ++cnt);
    }
    decrement() {
        this.count.update( (cnt) => --cnt);
    }
    static{this.ɵfac = (__ngFactoryType__) => {
        return new (__ngFactoryType__ || Counter)();
    }
    ;
    }static{this.ɵcmp = i0.ɵɵdefineComponent({
        type: Counter,
        selectors: [["app-counter"]],
        inputs: {
            name: [3, "name", "name", null]
        },
        decls: 6,
        vars: 2,
        consts: [[3, "click"]],
        template: (rf, ctx) => {
            if (rf & 1) {
                i0.ɵɵtext(0);
                i0.ɵɵdomElementStart(1, "button", 0);
                i0.ɵɵdomListener("click", () => {
                    return ctx.increment();
                }
                );
                i0.ɵɵtext(2, "Increment");
                i0.ɵɵdomElementEnd();
                i0.ɵɵdomElementStart(3, "button", 0);
                i0.ɵɵdomListener("click", () => {
                    return ctx.decrement();
                }
                );
                i0.ɵɵtext(4, "Decrement");
                i0.ɵɵdomElementEnd();
                i0.ɵɵconditionalCreate(5, Counter_Conditional_5_Template, 2, 1, "div");
            }
            if (rf & 2) {
                i0.ɵɵtextInterpolate1(" Count: ", ctx.count(), " ");
                i0.ɵɵadvance(5);
                i0.ɵɵconditional(ctx.show() ? 5 : -1);
            }
        }
        ,
        encapsulation: 2
    });
    }
}
function Counter_Conditional_5_Template(rf, ctx) {
    if (rf & 1) {
        i0.ɵɵdomElementStart(0, "div");
        i0.ɵɵtext(1);
        i0.ɵɵdomElementEnd();
    }
    if (rf & 2) {
        const ctx_r0 = i0.ɵɵnextContext();
        i0.ɵɵadvance();
        i0.ɵɵtextInterpolate1("Hello ", ctx_r0.name());
    }
}

It's Just the Beginning

There's so much more to learn about the Angular compiler, including registering and linking components, directives, pipes, and injectables, handling complex control flow syntax, providers, and more. Angular's compilation still needs global analysis of its dependencies in order to generate the correct output for templates. This is what makes selectorless pretty important if the Angular team continues to explore the direction towards true single file compilation. Using Gemini as a research tool helped me understand the internals of Angular Compiler APIs, generate working code that was understandable for a prototype, and provided a feedback loop for understanding and fixing errors.

Check out the GitHub repo: https://github.com/brandonroberts/angular-compiler-gemini

I'm looking forward to iterating on this more, as it gave me much more clarity, having implemented Analog SFCs as a translation layer to an Angular component.

If you enjoyed this post, click the ❤️ so other people will see it. Follow AnalogJS and me on Twitter/X, and subscribe to my YouTube Channel for more content!

Announcing AnalogJS 2.0 ⚡️

Brandon Roberts — Mon, 03 Nov 2025 15:20:19 +0000

We're excited to announce the 2.0 release of AnalogJS! This release includes many features that help developers ship websites and applications, faster, with Angular.

This release marks the second major release of Analog, providing developers many new features and improvements to build with Analog.

Features ⭐️

Analog is the meta-framework built on top of Angular, powered by Vite, a next generation open-source build tool, and Nitro, an open-source server engine framework. Here are some of its features, including:

First-class support for the Vite ecosystem (Vitest, Playwright, Storybook, and more)
Filesystem-based routing
Support for markdown pages and blogs
Support for API/server routes
Hybrid SSR/SSG with sitemap and RSS feed support
Supports Angular CLI/Nx workspaces
Server and deployment support
And more!

What's New

Analog 2.0 contains many new features including content resources, smaller install and bundle size optimizations, and Vite ecosystem upgrades.

Content Resources 📜

As Angular continues to evolve with the introduction of Resources, Analog now also includes resources for displaying content lists and content files.

Content Files resources are used to display lists of loaded content.

import { Component } from '@angular/core';
import { contentFilesResource } from '@analogjs/content/resources';

import { PostsComponent } from '../../components/posts';
import { Post } from '../../data/posts';

@Component({
  selector: 'blog-posts',
  imports: [Posts],
  template: `
    @defer(hydrate on hover) {
      <posts [posts]="postsResource.value()"></posts>
    }
  `
})
export default class Blog {
 readonly postsResource = contentFilesResource<Post>();
}

Content file resources retrieve content as a signal, integrating with Angular's latest primitives for reactivity.

import { Component } from '@angular/core';
import { MarkdownComponent } from '@analogjs/content';
import { contentFileResource } from '@analogjs/content/resources';
import { RouteMeta } from '@analogjs/router';

import { Post } from '../../data/posts';
import { postMetaResolver, postTitleResolver } from './resolvers';

export const routeMeta: RouteMeta = {
  title: postTitleResolver,
  meta: postMetaResolver,
};

@Component({
  selector: 'post',
  imports: [MarkdownComponent],
  template: `
    @let post = postResource.value();

    @if (post) {
      <div class="flex flex-grow justify-center min-h-screen">
        <article class="w-screen max-w-4xl p-8">
          <h2 class="text-gray-600 text-2xl">{{ post.attributes.title }}</h2>

          <span class="font-light text-sm">
            {{ post.attributes.publishedDate }} -
            {{ post.content }} min read
          </span>

          <analog-markdown [content]="post.content"></analog-markdown>
        </article>
      </div>
    }
  `
})
export default class BlogPost {
  readonly postResource = contentFileResource<Post>();
}

As Resources are still experimental in Angular, there will be future updates, and we're looking to further support these new APIs in Analog.

Installation and Bundle Size Optimizations 📦

We've continued to improve Analog projects, including installing project dependencies and optimizing bundle sizes. A few changes include:

Smaller install footprint for Angular CLI workspaces without any Webpack dependencies.
All Angular builders are shipped as ESM.
Replacing packages with smaller equivalents, such as using tinyglobby instead of fast-glob.
Direct usage of the Vite CLI for serve/build in addition to ng serve
Direct usage of the Vitest CLI for testing in addition to ng test
Generated bundle output size reduction of 100Kb+ for full-stack projects.

These optimizations decrease the installation time of Analog projects in development, and reduce the amount of code built and shipped.

Vite Ecosystem Upgrades ⚡️

Analog continues to integrate and support many Vite ecosystem integrations:

Angular v17-v20 with upcoming support for Angular v21
Vite 6.x and 7.x, including support for the latest Rolldown-Vite releases
Vitest 3.x and 4.x including support for the Vitest VSCode extension
Nx 22.x
Storybook 10.x, including support for component testing with Vitest
Astro 5.x

Angular support for Vitest 🧪

In Angular v21, stable support for Vitest directly through the Angular CLI was introduced for new Angular projects. While both Analog and Angular support running tests with Vitest, there are some similarities and key differences.

The table below shows the features available across both choices.

Vitest	Analog	Angular
Angular Versions	v17+	v21+
Vitest Versions	2.0+	4.0+
Support	Community	Angular Team
Builders	✅	✅
Schematics	✅	✅
Migrations	✅	✅
Fully Configurable	✅	⚠️
Vitest CLI	✅	❌
Vitest Workpsaces	✅	❌
Custom Environments	✅	❌
Custom Providers	✅	❌
IDE extensions	✅	❌
Buildable Libs	✅	❌
Module Mocking/Graph	✅	❌
Plugins/Types	✅	❌

The table above is not to compare the two solutions, but to provide the information on what features are supported by each implementation. Choose the solution that best fits your needs and priorities.

Check out our guide on how you can add Vitest to any existing Angular project.

Contributions and Community 🤓

AnalogJS would not be where it is without a team of core contributors and collaborators.

Robin Goetz
Marko Stanimirović
Luis Castro
Chau Tran
Joshua Morony
Andrés Villanueva

Also, thanks to the 150+ contributors to the project, whether through code, documentation, tests, or even just trying out the project.

The project already has nearly 3000 stars on GitHub, 1000+ members on Discord, 1000+ followers on Twitter/X, and was accepted into the first GitHub Accelerator Cohort.

Partner with Analog 🤝

Continued development of Analog would not be possible without our partners and community. Thanks to our official deployment partner Zerops and longtime supporters Snyder Technologies, Nx, and House of Angular, and many other backers of the project.

Find out more information on our partnership opportunities or reach out directly to partnerships[at]analogjs.org.

Join the Community 🥇

Visit and Star the GitHub Repo
Join the Discord
Follow us on Twitter

If you enjoyed this post, click the ❤️ so other people will see it. Follow AnalogJS and me on Twitter/X, and subscribe to my YouTube Channel for more content!

Announcing NgRx 19: NgRx Signals Features, Action Signals, and more!

Brandon Roberts — Thu, 19 Dec 2024 17:22:37 +0000

We are pleased to announce the latest major version of the NgRx framework with some exciting new features, bug fixes, and other updates.

Updated NgRx Signals Features🚦

The NgRx Signals was released as stable in v18 as a new library built from the ground up with Angular Signals, opt-in RxJS interoperability, and entity management out of the box. the NgRx Signals library has continued to receive quality updates and improvements to enhance the developer experience.

New Props SignalStore Feature

One highly requested feature was the ability to define props for a SignalStore during its creation. To support this, the withProps base feature was added to allow static properties or observables to be defined as SignalStore members.

export const BooksStore = signalStore(
  withEntities<Book>(),
  withRequestStatus(),
  withProps(({ isFulfilled }) => ({
    fulfilled$: toObservable(isFulfilled).pipe(filter(Boolean)),
  })),
);

It can also be used for defining all dependencies in a single place:

export const MyStore = signalStore(
  withProps(() => ({
    service1: inject(Service1),
    service2: inject(Service2),
  })),
  withMethods(({ service1, service2 }) => ({
    method1() {
      service1.foo();
    },
    method2() {
      service2.bar();
    },
  }))
);

The new withProps feature integrates together with new Angular Signals features including resource and linkedSignal:

const booksStore = signalStore(
  withProps(() => {
    const bookResource = resource({
      loader: () => Promise.resolve({ id: 1, title: "'Lord of the Rings' }),"
    });
    return {
      _bookResource: bookResource,
      bookResource: bookResource.asReadonly(),
    };
  }),
);

The above exposes bookResource as readonly resource, and keeps the writable resource.

The next example exposes prettyTitle as linkedSignal, and keeps the writable state internally.

signalStore(
  withState({ id: 1, title: "'Lord of the Rings' }),"
  withProps((store) => ({
    prettyTitle: linkedSignal(() => \`${store.id()}: ${state.store()}\`),
  })),
);

The new withProps features allows you customize and extend the SignalStore even further with Angular Signals. Thanks to Marko Stanimirović for his continued work on improving NgRx Signals!

Signal Method Utility Function

The rxMethod utility function was introduced to provide a way to connect async work done with RxJS to Angular Signals. We've also introduced the signalMethod utility function that gives you the same benefits of rxMethod with the ability to use only use signals.

signalMethod is a factory function that processes side effects on signals or static values.

import { Component } from '@angular/core';
import { signalMethod } from '@ngrx/signals';

@Component({ /* ... */ })
export class NumbersComponent {
  // 👇 This method will have an input argument
  // of type `number | Signal<number>`.
  readonly logDoubledNumber = signalMethod<number>((num) => {
    const double = num * 2;
    console.log(double);
  });
}

At first sight, signalMethod, might look the same as an effect. However, signalMethod offers three distinctive advantages over effect:

@Component({ /* ... */ })
export class NumbersComponent {
  readonly num = signal(2);
  readonly logDoubledNumberEffect = effect(() => {
    console.log(this.num() * 2);
  });
  readonly logDoubledNumber = signalMethod<number>((num) => {
    console.log(num * 2);
  });

  constructor() {
    this.logDoubledNumber(this.num);
  }
}

Flexible Input: The input argument can be a static value, not just a signal. Additionally, the processor function can be called multiple times with different inputs.
No Injection Context Required: Unlike an effect, that requires an injection context or an Injector, signalMethod's "processor function" can be called without an injection context.
Explicit Tracking: Only the Signal of the parameter is tracked, while Signals within the "processor function" stay untracked.

Read the docs to learn more about signalMethod.

Development Mode Checks for State Mutations

Ensuring that state updates are immutable is crucial for Signal to emit correctly and trigger necessary DOM updates, derived signals, or side effects. To mitigate this issue the patchState function applies a deep freeze on the state in development mode.

Before:

const userState = signalState(initialState);
patchState(userState, (state) => {
  state.user.firstName = 'mutable change'; // mutable change which went through
  return state;
});

After:

const userState = signalState(initialState);
patchState(userState, (state) => {
  state.user.firstName = 'mutable change'; // throws in dev mode
  return state;
});

This ensures that state changes remain immutable, providing a path to retaining performance and best practices.

NgRx Store Support for Dispatching Actions on Signal changes

NgRx Store remains the defacto choice for global state management within Angular applications. NgRx Store previously introduced support for selecting state as a signal, and now introduces an ergonomic way to dispatch actions that read signals.

class BookComponent {
  bookId = input.required<number>();

  constructor(store: Store) {
    store.dispatch(() => loadBook({ id: this.bookId() })));
  }
}

The dispatch method executes initially and every time the bookId changes. If dispatch is called within an injection context, the signal is tracked until the context is destroyed. In the example above, that would be when BookComponent is destroyed.

When dispatch is called outside a component's injection context, the signal is tracked globally throughout the application's lifecycle. To ensure proper cleanup in such a case, provide the component's injector to the dispatch method:

class BookComponent {  
  bookId = input.required<number>();
  injector = inject(Injector);
  store = inject(Store);

  ngOnInit() {
    // runs outside the injection context
    this.store.dispatch(
      () => loadBook({ id: this.bookId() }),
      { injector: this.injector }
    );
  }
}

Thanks to Rainer Hahnekamp for adding these features!

NgRx Signals, the new Default 🤝

NgRx Signals is a ground-up approach to managing state reactively, and is opt-in for RxJS usage. It also has other utilities for working with Angular Signals in a structured way that helps developers scale up. NgRx Signals is now the recommended local state management library to integrate into your Angular applications. For new applications, start with NgRx SignalStore. For existing applications, consider migrating to the new @ngrx/signals package.

NgRx Workshops 🎓

With NgRx usage continuing to grow with Angular, many developers and teams still need guidance on how to architect and build enterprise-grade Angular applications. We are excited to introduce upcoming workshops provided directly by the NgRx team!

Starting in Feburary, we will offer one to three full-day workshops that cover the basics of NgRx to the most advanced topics. Whether your teams are just starting with NgRx or have been using it for a while - they are guaranteed to learn new concepts during these workshops.

The workshop covers both global state with NgRx Store and libraries, along with managing local state with NgRx ComponentStore and NgRx Signals.

Visit our workshops page to sign up from our list of upcoming workshops.

New Docs site 💅

The new docs revamp is underway and is built up from scratch using AnalogJS and will have a brand-new design and revamped content. This will make sure to offer the best possible experience to our users and make it easier to find the information you need. It also ensures that the website will become easier to maintain and update. Because we're a community-driven project, we're keeping in mind that the website should be easy to contribute to.

Thanks to Mike Ryan for his work on the new version of the NgRx website.

Deprecations and Breaking Changes 💥

This release contains bug fixes, deprecations, and breaking changes. For most of these deprecations or breaking changes, we've provided a migration that automatically runs when you upgrade your application to the latest version.

Take a look at the version 19 migration guide for complete information regarding migrating to the latest release. The complete CHANGELOG can be found in our GitHub repository.

Upgrading to NgRx 19 🗓️

To start using NgRx 19, make sure to have the following minimum versions installed:

Angular version 19.x
Angular CLI version 19.x
TypeScript version 5.5.x
RxJS version ^6.5.x or ^7.5.x

NgRx supports using the Angular CLI ng update command to update your NgRx packages. To update your packages to the latest version, run the command:

ng update @ngrx/store@19

If your project uses @ngrx/signals, run the following command:

ng update @ngrx/signals@19

Swag Store and Discord Server 🦺

You can get official NgRx swag through our store! T-shirts with the NgRx logo are available in many different sizes, materials, and colors. We will look at adding new items to the store such as stickers, magnets, and more in the future. Visit our store to get your NgRx swag today!

Join our Discord server for those who want to engage with other members of the NgRx community, old and new.

Contributing to NgRx 🥰

We're always trying to improve the docs and keep them up-to-date for users of the NgRx framework. To help us, you can start contributing to NgRx. If you're unsure where to start, come take a look at our contribution guide and watch the introduction video Jan-Niklas Wortmann and Brandon Roberts have made to help you get started.

Thanks to all our contributors and sponsors!

NgRx continues to be a community-driven project. Design, development, documentation, and testing all are done with the help of the community. Visit our community contributors section to see every person who has contributed to the framework.

If you are interested in contributing, visit our GitHub page and look through our open issues, some marked specifically for new contributors. We also have active GitHub discussions for new features and enhancements.

We want to give a big thanks to our Gold sponsor, Nx! Nx has been a longtime promoter of NgRx as a tool for building Angular applications, and is committed to supporting open source projects that they rely on.

We also want to thank our Bronze sponsor, House of Angular!

AnalogJS 🤝 Zerops: Official Deployment Partners

Brandon Roberts — Tue, 15 Oct 2024 17:54:46 +0000

We're super excited to announce Zerops as the Official Deployment Partner for Analog.

This new partnership guarantees more features, support, collaboration, and an improved experience for deploying not only fullstack applications with AnalogJS and Angular, but scalable solutions including databases, Content Management Systems, full Linux containers, and more.

Zerops is a Dev-first cloud platform that builds, deploys, runs and manages apps, no matter the size or environment. Zerops is free to get started, along with transparent and upfront pricing. On a personal note, Zerops is also built using Angular, and we've long stated that when finding a partnership opportunity, we wanted someone willing to continue to invest in Angular and its ecosystem of OSS projects.

AnalogJS ❤️ Zerops

Analog is excited to have Zerops as our new official deployment partner. We are thankful for the trust and support of the entire Zerops team. Because of their support, in addition to our other sponsors, SnyderTech, Jonathan Gamble, and Nx that we are able to receive ongoing maintenance and keep developing Analog for the long term in a financially sustainable way.

Partner with Analog 🤝

Find out more information on our other partnership opportunities or reach out directly to partnerships[at]analogjs.org.

Join the Community 🥇

Visit and Star the GitHub Repo
Join the Discord
Follow us on Twitter

If you enjoyed this post, click the ❤️ so other people will see it. Follow AnalogJS and me on Twitter/X

Using Storybook with Angular and Vite 🎨

Brandon Roberts — Thu, 26 Sep 2024 14:00:00 +0000

Storybook is a frontend workshop for building UI components and pages in isolation.

By default, Angular and Storybook uses Webpack to build and serve the Storybook application. Angular has already switched over to using Vite as a development server, so you may be interested in using Vite for other parts of your development workflow.

This post guides you through the process of switching to building and serving your Storybook with Angular using Vite. This process can be applied to any Angular project using Storybook.

Setting up Storybook

If you don't have Storybook setup already, run the following command to initialize Storybook for your project:

npx storybook@latest init --type angular

This installs the necessary Storybook dependencies, and sets up a Storybook with a few example components.

Follow the provided prompts, and commit your changes.

Installing the Storybook and Vite Integration

Next, install the AnalogJS Storybook Angular integration using your preferred package manager:

npm install @analogjs/storybook-angular --save-dev

Configuring Storybook

Update the .storybook/main.ts file to use the @analogjs/storybook-angular package.

import { StorybookConfig } from '@analogjs/storybook-angular';

const config: StorybookConfig = {
  // other config, addons, etc.
  framework: {
    name: "@analogjs/storybook-angular",
    options: {},
  },
  docs: {},
};

export default config;

Remove the existing webpackFinal config function if present.

Update the angular.json or project.json storybook targets to use the @analogjs/storybook-angular builders:

    "storybook": {
      "builder": "@analogjs/storybook-angular:start-storybook",
    },
    "build-storybook": {
      "builder": "@analogjs/storybook-angular:build-storybook"
    }

Remove any webpack-specific config options.

If necessary, add the /storybook-static folder to your .gitignore file.

Setting Up Global Styles

To register global styles, add them to the @analogjs/storybook-angular builder options in the angular.json or project.json.

    "storybook": {
      "builder": "@analogjs/storybook-angular:start-storybook",
      "options": {
        // ... other options
        "styles": [
          "src/styles.css"
        ]
      }
    },
    "build-storybook": {
      "builder": "@analogjs/storybook-angular:build-storybook",
      "options": {
        // ... other options
        "styles": [
          "src/styles.css"
        ]
      }
    }

Running Storybook

Use the existing scripts to run your storybook in development.

npm run storybook

Building Storybook

Run the storybook commands for building the storybook.

npm run build-storybook

Storybook is a great way to build and iterate on your components in isolation before integrating them into your application.

If you enjoyed this post, click the ❤️ so other people will see it. Follow me on X and subscribe to my YouTube Channel for more content!

Bridging Analog to Angular with esbuild and Vite

Brandon Roberts — Thu, 11 Apr 2024 15:07:00 +0000

It wasn't long ago that Analog went 1.0 bringing a stable full-stack meta-framework to the Angular community. One of the biggest conversations around Analog is the SFC and if its only available in Analog applications. There's good news, as this post covers how you can use Analog features in your existing Angular applications.

TL;DR GitHub Repo - https://github.com/brandonroberts/angular-esbuild-analog-example

If you've been outside of the Angular bubble and wondered how we got here, Josh Morony has a video on what started as the .ng file format for Angular, and how it evolved into the Analog SFC.

Customizing Esbuild in Angular Applications

Much has been said about Angular's migration from Webpack to esbuild and Vite, dramatically improving build performance and developer experience. We can take this a step further with a custom esbuild builder that allows additional features including esbuild plugins, middleware, and HTML transformers.

The Angular Devkit exposes these APIs for library authors to build on top of what Angular handles out of the box. Jenia "JeB" Barabanov has been maintaining custom Angular builders for Webpack and Jest for a while already, and introduced a custom builder for esbuild and the Vite dev server.

You can check out his repo at: https://github.com/just-jeb/angular-builders

With this custom esbuild builder, it opens up the door to add a custom esbuild plugin to support the Analog SFC.

Adding the Analog SFC to an Angular application

With the custom esbuild builder, you have the option to try the Analog SFC in an Angular 17.1+ application.

Note: The Analog SFC is still experimental!

With that out of the way, let's dive in!

First, you need to install the custom esbuild builder and Analog Vite plugin for Angular:

npm i -D @angular-builders/custom-esbuild @analogjs/vite-plugin-angular

Next, you need to update the angular.json builder for build to use the new builder.

For the application builder:

- "builder": "@angular-devkit/build-angular:application",
+ "builder": "@angular-builders/custom-esbuild:application",

For the dev-server builder:

- "builder": "@angular-devkit/build-angular:dev-server",
+ "builder": "@angular-builders/custom-esbuild:dev-server",

Next, create an esbuild directory in the root of the application with two files.

├── esbuild
│   ├── plugins.js
│   ├── package.json
└── angular.json

In the package.json, add { "type": "module" } and save it.

In the plugins.js, add the esbuild plugin for the Analog SFC.

import { analogSFC } from '@analogjs/vite-plugin-angular/esbuild';

export default [analogSFC()];

In the options for the application builder, add a plugins array that includes the path to the esbuild/plugins.js file.

  "builder": "@angular-builders/custom-esbuild:application",
  "options": {
    "outputPath": "dist/angular-esbuild-analog-example",
    "scripts": [],
    "plugins": ["./esbuild/plugins.js"]
  },

Next, create an analog.d.ts in the src directory with some type information.

interface ImportAttributes {
  analog: 'imports' | 'providers' | 'viewProviders' | 'exposes';
}

declare global {
  import type { Component } from '@angular/core';

  interface Window {
    /**
     * Define the metadata for the component.
     * @param metadata
     */
    defineMetadata: (
      metadata: Omit<
        Component,
        | 'template'
        | 'standalone'
        | 'changeDetection'
        | 'styles'
        | 'outputs'
        | 'inputs'
      >
    ) => void;

    /**
     * Invoke the callback when the component is initialized.
     */
    onInit: (initFn: () => void) => void;
    /**
     * Invoke the callback when the component is destroyed.
     */
    onDestroy: (destroyFn: () => void) => void;
  }
}

declare module '*.analog' {
  import { Type } from "@angular/core";

  const cmp: Type<any>;
  export default cmp;
}

Now comes the fun part!

Create a hello.analog file in the src folder with a component.

<script lang="ts">
  // hello.analog
  import { signal } from '@angular/core';

  const count = signal(0);

  function add() {
    count.set(count() + 1);
  }
</script>

<template>
  <h2>
    Hello Angular from Analog SFC
  </h2>

  <p>
    {{count()}}
  </p>

  <button (click)="add()">Increment</button>
</template>

<style>
  h2 {
    color: blue;
  }
</style>

Lastly, in the app.routes.ts file, define a route that navigates to the Hello component. Analog SFCs can be used in combination with the Angular Router!

import { Routes } from '@angular/router';
import Hello from './hello.analog';

export const routes: Routes = [
  { path: '', component: Hello }
];

Run ng serve and navigate to the application running locally.

Now ship to production! Just kidding 😉.

Analog SFCs are also interopable with Angular components, but must be enabled by the experimental-local compilationMode in the tsconfig.json

We've love for you to try out the SFC and give us your feedback. To find out more, check out the Analog SFC docs. Also join the community on Discord.

Using a custom esbuild builders opens up many possibilities to bring more Analog features to Angular applications. We're excited to explore more opportunities in the future. If you're also interested to learn more about how Analog and Vite work together with Angular, check out the Angular, Analog, and Vite post by Robin Goetz.

Join the Community 🥇

Visit and Star the GitHub Repo
Join the Discord
Follow us on Twitter

If you enjoyed this post, click the ❤️ so other people will see it. Follow AnalogJS and me on Twitter/X, and subscribe to my YouTube Channel for more content!

Announcing AnalogJS 1.0 🚀

Brandon Roberts — Thu, 14 Mar 2024 19:10:34 +0000

After many months of development and testing, we're excited to announce the 1.0 release of AnalogJS! The 1.0 release includes many features that help developers ship websites and applications, faster, with Angular.

This release marks the first major release of Analog, giving developers a more stable starting point to build with Analog. We will continue getting feedback from developers that helps us continue to improve and innovate on the project.

Features ⭐️

First-class support for the Vite ecosystem (Vitest, Playwright, Cypress, and more)
Filesystem-based routing
Support for markdown pages and blogs
Support for API/server routes
Hybrid SSR/SSG with sitemap and RSS feed support
Supports Angular CLI/Nx workspaces
Integration with tRPC for type-safe server interactions
Server and deployment support
And more!

Contributions and Community 🤓

AnalogJS would not be where it is without a team of core contributors and collaborators.

Robin Goetz
Marko Stanimirović
Luis Castro
Chau Tran
Joshua Morony
Andrés Villanueva

Also, thanks to the 80+ contributors to the project, whether through code, documentation, tests, or even just trying out the project.

The project already has surpassed 2000 stars on GitHub, 500+ members on Discord, 1000+ followers on Twitter/X, and was accepted into the first GitHub Accelerator Cohort.

If you'd like to take Analog for a spin, check out this blog post on Building a Blog with Analog and Angular. If you want to get involved in the project, check out the GitHub repo.

What's Next

We are continuing to make building fullstack websites and application with Analog and Angular as seamless as possible, and extending the Angular ecosystem through integrations with Astro, Nx, Vitest, Storybook, and more.

We have also introduced a new Single File Component format in Analog for authoring components and directives.

Below is an example of a hello.analog file:

<script lang="ts">
  import { signal } from '@angular/core';

  const count = signal(0);

  function increment() {
    count.update(total => ++total);
  }
</script>

<template>
  <h2>Hello Analog</h2>

  Count: {{ count() }}

  <button (click)="increment()">
    Increment
  </button>
</template>

<style>
  h2 {
    color: red;
  }
</style>

What started as a .ng file extension for components and directives using Angular has evolved into the Analog SFC, along with features including support for auto-imports, inline markdown templates, page routes, and more. We are continuing to iterate on this approach, and exploring options to enable this format in Angular applications as the future of Analog progresses.

We've already received very positive feedback, and even further development on supporting this format, including an IDEA Plugin for the Analog SFC that's available in the EAP version of WebStorm. Thanks to Jan-Niklas Wortmann and Piotr Tomiak from the JetBrains team for the initial development of the plugin. You can also contribute to the plugin on GitHub.

Partner with Analog 🤝

We are looking for companies to partner with on the Analog project to support development of the project. Thanks to Snyder Technologies for being an early adopter and promoter of Analog, Nx for joining us as a sponsor, House of Angular, and many other backers of the project.

Find out more information on our partnership opportunities or reach out directly to sponsor[at]analogjs.org.

Join the Community 🥇

Visit and Star the GitHub Repo
Join the Discord
Follow us on Twitter

If you enjoyed this post, click the ❤️ so other people will see it. Follow AnalogJS and me on Twitter/X, and subscribe to my YouTube Channel for more content!

Faster testing with Angular and Vitest ⚡️

Brandon Roberts — Fri, 08 Dec 2023 14:40:37 +0000

In the Angular ecosystem, there are a few recommended tools used to run unit tests including Karma, Jasmine, and Jest. Karma and Jasmine have been the recommended tools for Angular projects out of the box, with official support for Jest underway.

In addition to those tools, a new testing framework has emerged named Vitest. Vitest is built on top of Vite and has many exciting features to keep improving the overall developer experience for writing tests. This post shows you how to set up Vitest in your existing Angular project.

Vitest Features

Vitest has many modern testing features that make it a great experience to run tests.

Jest-compatible API
Fast
ESM ready
TypeScript support out of the box
Mocks
Snapshot testing
And more ...

Check out the features page to see the full list.

While Jest does have experimental support for ESM, it's not a first-class feature and requires workarounds to support it correctly. Tomas Trajan wrote a very detailed blog post on all the scenarios to get Jest and ESM working for Angular tests.

Setup for Running tests in a Node environment

As Vitest is built on top of Vite, support for web frameworks can be done through plugins. AnalogJS provides a Vite plugin to enable using Vitest with any Angular application.

Setting up Vitest with an existing Angular project can be done in a couple of steps.

First, install the @analogjs/platform package.

npm install @analogjs/platform --save-dev

Next, run the command with the name of your project:

ng g @analogjs/platform:setup-vitest --project [your-project-name]

This is supported in both Angular CLI and Nx workspaces.

This automates a few steps:

Installs the necessary packages to run tests with Vitest.
Adds a vite.config.mts file to the project to configure Vitest.
Adds a src/test-setup.ts file to the project for setting up the TestBed environment.
Updates the test target configuration to use @analogjs/vitest-angular:test as the builder.
Updates the tsconfig.spec.json with the appropriate target and files settings.

You can also see steps for manual installation in the documentation.

After the command finishes, you're able to run tests the same way you did before with ng test, but now using Vitest as the testing framework.

ng test

With Vitest, by default, tests are run in a node environment with simulated browser APIs using jsdom. If you're already using Jest-specific testing APIs, you can migrate most of them to Vitest with minimal effort.

Snapshot testing

Vitest also supports snapshot testing with the toMatchSnapshot() method.

import { TestBed } from '@angular/core/testing';

import { MyComponent } from './my.component';

describe('MyComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MyComponent],
    }).compileComponents();
  });

  it('should match the snapshot', () => {
    const fixture = TestBed.createComponent(MyComponent);

    expect(fixture).toMatchSnapshot();
  });
});

Setup for Running tests in the Browser

If you prefer to run your tests in a browser, Vitest also has support for browser testing.

First, follow the steps for running tests in a node environment.

Then, install the necessary packages for running tests in the browser:

npm install @vitest/browser playwright --save-dev

Update the test object in the vite.config.ts.

Remove the environment: 'jsdom' property.
Add a browser config for Vitest.

/// <reference types="vitest" />
import { defineConfig } from 'vite';

import angular from '@analogjs/vite-plugin-angular';

export default defineConfig(({ mode }) => ({
  plugins: [angular()],
  test: {
    globals: true,
    setupFiles: ['src/test-setup.ts'],
    // environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    // Vitest browser config
    browser: {
      enabled: true,
      name: 'chromium',
      headless: false, // set to true in CI
      provider: 'playwright',
    },
  },
  define: {
    'import.meta.vitest': mode !== 'production',
  },
}));

Run your tests

ng test

This spins up a Chromium Browser to run your tests and can be run headless in your CI environments.

Vitest is a great addition to the testing frameworks available for Angular developers to use.

If you enjoyed this post, click the ❤️ so other people will see it. Follow me on Twitter/X and subscribe to my YouTube Channel for more content!

DEV Community: Brandon Roberts

AnalogJS 2.4: Vite 8, Vitest Snapshot Serializers, Astro v6 Support, and more!

Vite 8 Support ⚡️

Vitest DX Improvements 🧪

Reusable Snapshot Serializers

teardown.destroyAfterEach Option

Astro v6 Support & Strict Style Placement 🚀

Astro v6 Compatibility

strictStylePlacement Option

Upgrading

Partner with Analog 🤝

Join the Community 🥇

Using a Headless CMS with Angular and Analog Content Loaders

Understanding the Default Content System

The Content Loader Tokens

Fetching Custom Content at Build Time

Creating a Vite Plugin

Adding Types for the Virtal Module

Custom Loaders with Build-Time Data

Configuring Vite and Prerender Routes

Using the Content in Components

Angular Skills: Agent Skills for AI-Assisted Development

What Are Skills?

Installing Angular Skills

Available Skills

angular-component

angular-signals

angular-di

angular-forms

angular-http

angular-routing

angular-directives

angular-ssr

angular-testing

angular-tooling

What You Get

Conclusion

Interactive Angular Component Testing with Storybook and Vitest

Setting up Storybook

Setting up Storybook to use Vite with Analog

Setting up Vitest for Interaction Testing

Writing Interaction Tests

Running Tests

Conclusion

Building an Angular Compiler using AI with Google Gemini

Parsing Decorator Metadata

Parsing the Component Template

Translating the Output AST

Example: From Source to Ivy Output

Input Source

Actual Ivy Output

It's Just the Beginning

Announcing AnalogJS 2.0 ⚡️

Features ⭐️

What's New

Content Resources 📜

Installation and Bundle Size Optimizations 📦

Vite Ecosystem Upgrades ⚡️

Angular support for Vitest 🧪

Contributions and Community 🤓

Partner with Analog 🤝

Join the Community 🥇

Announcing NgRx 19: NgRx Signals Features, Action Signals, and more!

Updated NgRx Signals Features🚦

New Props SignalStore Feature

Signal Method Utility Function

Development Mode Checks for State Mutations

NgRx Store Support for Dispatching Actions on Signal changes

NgRx Signals, the new Default 🤝

NgRx Workshops 🎓

New Docs site 💅

Deprecations and Breaking Changes 💥

Upgrading to NgRx 19 🗓️

Swag Store and Discord Server 🦺

Contributing to NgRx 🥰

Thanks to all our contributors and sponsors!

AnalogJS 🤝 Zerops: Official Deployment Partners

Partner with Analog 🤝

Join the Community 🥇

Using Storybook with Angular and Vite 🎨

`teardown.destroyAfterEach` Option

`strictStylePlacement` Option