Forem: Analog

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!

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!

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

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!

Announcing the 0.2.0 release of Analog 🎉

Brandon Roberts — Mon, 21 Aug 2023 13:11:39 +0000

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

This release helps us move towards a 1.0 release while giving developers an opportunity to use Analog. Feedback from developers helps us to continue improve and innovate on the project.

Features ⭐️

Analog is the meta-framework built on top of Angular. Here are some of its features, including:

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
And more!

Community 🤓

Thank to you all the contributors to the project, whether its been through code, documentation, tests, or even just trying out the project.

The project already has close to 1500 stars on GitHub, 300+ members on Discord, 900+ followers on Twitter, and was accepted into the first GitHub Accelerator Cohort. This only the beginning, as we look forward to continuing to improve the project and grow the community around it.

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.

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.

// Detect dark theme var iframe = document.getElementById('tweet-1671389794545328128-606'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1671389794545328128&theme=dark" }

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 me on Twitter and subscribe to my YouTube Channel for more content!

How to Build a Blog with Analog and Angular ✍️

Brandon Roberts — Mon, 21 Aug 2023 13:10:00 +0000

Putting your thoughts together in your personal blog is a great way to build a further understanding about a topic, and also helps others who come across it in the future. Building a blog is also one of the best ways you can learn a web development stack. Meta-frameworks of today make this process easier. This post shows you how to build a static blog with Angular using Analog.

Analog is the meta-framework that helps you ship applications and websites faster with Angular.

Getting Started 🎽

To create a new Analog project, you can use the create-analog package with your package manager of choice:

npm create analog@latest my-analog-blog

Follow the prompts to choose Analog, the latest version of Angular, and Tailwind:

✔ Select a template: › Analog
✔ Select a variant: › angular-v16
✔ Would you like to add Tailwind to your project? … no

And go into the newly created folder

cd my-analog-blog

Next, install the dependencies:

npm install

To start the development server, use the start command:

npm start

Navigate to http://localhost:5173 to see the application running in your browser.

Adding Markdown Support 🔌

Analog comes with support for using markdown as content out of the box. To add support for rendering markdown content, add the provideContent(withMarkdownRenderer()) from the @analogjs/content package to the providers in the app.config.ts

import { provideHttpClient } from '@angular/common/http';
import { ApplicationConfig } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';
import { provideFileRouter } from '@analogjs/router';
import { provideContent, withMarkdownRenderer } from '@analogjs/content';

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

This allows you to use markdown content directly as routes, and to render markdown content inside of Angular components.

Creating Content Routes with Markdown 🧠

Some pages in your blog are purely content-focused, where you only need to display content from a markdown file. Markdown files can be use directly as pages.

Create a markdown file in the src/app/pages directory named about.md:

---
title: "About Me"
---

This page is about me

Frontmatter is supported also for additional metadata, such as title, description, metatags, and more.

Navigate to http://localhost:5173/about to see the about page.

Creating and Displaying a Blog Post ✍️

Markdown files can also be used in combination with route components to display content. To create a custom page for a blog post, Analog provides a built-in component.

First, create a markdown file in src/content/my-first-post.md for the post.

---
title: My First Post
slug: my-first-post
---

Hello World

Next, define an interface for the shape of the data returned from the frontmatter. For this example, the interface is placed in the src/app/models/post.ts file.

export interface BlogPost {
  title: string;
}

Next, create a page component for the blog. This page serves as the parent layout for the listing the blog posts and displaying an individual blog post.

Create the page component file in src/app/pages/blog.page.ts.

import { Component } from '@angular/core'; 
import { RouterOutlet } from '@angular/router';

@Component({
  standalone: true,
  imports: [RouterOutlet],
  template: `
    <h1>My Blog</h1>

    <router-outlet />
  `,
})
export default class BlogPage {}

Next, create the page component file for displaying a blog post.

Define a page component in src/app/pages/blog/[slug].page.ts

import { MarkdownComponent, injectContent } from '@analogjs/content';
import { AsyncPipe, NgIf } from '@angular/common';
import { Component } from '@angular/core'; 

import { BlogPost } from 'src/app/models/post';

@Component({
  standalone: true,
  imports: [MarkdownComponent, NgIf, AsyncPipe],
  template: `
    <div *ngIf="post$ | async as post">
      <h2>{{ post.attributes.title }}</h2>

      <analog-markdown [content]="post.content" />
    </div>
  `,
})
export default class BlogPostPage {
  post$ = injectContent<BlogPost>();
}

By default, Analog reads the slug route parameter to determine which content file to read from the src/content folder.

The injectContent reads the content from the markdown file based on the slug route parameter. The content and attributes are provided as an Observable that could be converted to a signal also. The MarkdownComponent displays the rendered markdown content.

This page creates the /blog/:slug route for displaying blog posts. Save the changes and visit the http://localhost:5173/blog/my-first-post to view the blog post.

Read more about how routing works.

Listing Blog Posts 📜

Next up, let's display the blog posts. For this page, an index page for at http://localhost:5173/blog will display a list of the blog posts.

Create a page component under src/app/pages/blog/index.page.ts to define the /blog route.

import { Component } from '@angular/core'; 
import { AsyncPipe, NgFor } from '@angular/common';
import { injectContentFiles } from '@analogjs/content';
import { RouterLink } from '@angular/router';

import { BlogPost } from 'src/app/models/post';

@Component({
  standalone: true,
  imports: [NgFor, RouterLink, AsyncPipe],
  template: `
    <h2>Posts</h2>

    <ul>
      <li *ngFor="let post of posts">
        <a [routerLink]="['/blog', post.slug]">{{ post.attributes.title }}</a>
      </li>
    </ul> 
  `,
})
export default class IndexPage {
  posts = injectContentFiles<BlogPost>();
}

The injectContentFiles() function provides a static list of all the markdown files inside the src/content folder, with the frontmatter already parsed and available to use in the component.

The BlogPost interface is used to add type safety for using the post attributes in the template.

Visit the http://localhost:5173/blog to display the blog posts and navigate to the blog post created earlier.

Redirecting to Blog List 🔄

A list of blog posts can now be displayed, as well as individual blog posts. A redirect can also be used to navigate from the home page / to the /blog page.

A page component is not necessary to define a redirect.

Replace the contents of the src/app/pages/index.page.ts with the redirect:

import { RouteMeta } from "@analogjs/router";

export const routeMeta: RouteMeta = {
  redirectTo: '/blog',
  pathMatch: 'full',
};

RouteMeta allows you to attach additional route metadata to a route. Here it's using a redirect, but other metadata such as guards, resolvers, page titles, and more can be added.

Read more about route metadata.

Pre-Rendering Static Pages 📃

Lastly, for a blog, using Static Site Generation by pre-rendering the content allows for better SEO, and enables the site to be navigated without JavaScript turned on.

To pre-render routes, in the vite.config.ts, update the analog() plugin with a config object that includes a prerender property. Define the routes to be pre-rendered into static HTML files during build time.

  analog({
    prerender: {
      routes: [
        '/',
        '/blog',
        '/blog/my-first-post',
        '/about'
      ],
    }
  })

Routes can also be defined using an async function if you need to define them dynamically.

Support for generating sitemaps and an RSS feed is also included.

Deployment 🚀

To build the blog for deployment, run the build:

ng build

By default, the static assets are placed into the dist/analog/public folder for deployment. You can deploy Analog sites/applications to many different providers with little to no configuration including Netlify, Vercel, Firebase, and more.

Visit the deployment docs to learn more.

And that's it! 🤩

The GitHub repo for this example blog is at: https://github.com/brandonroberts/my-analog-blog

Now the really creative part begins where you bring your own styles and customizations to the blog to really make it unique. 😉

Example Projects

If you're looking for some inspiration on building your own blog, check out some blogs built with Analog and Angular.

Robin Goetz - Blog GitHub
Matthieu Riegler aka. Jean Mèche - Blog GitHub
Luis Castro - Blog GitHub
Chris Perko - Blog GitHub
Preston Lamb - Blog

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.

// Detect dark theme var iframe = document.getElementById('tweet-1671389794545328128-205'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1671389794545328128&theme=dark" }

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 me on Twitter and subscribe to my YouTube Channel for more content!

Fullstack Angular with Analog 🚀

Brandon Roberts — Wed, 28 Jun 2023 14:55:45 +0000

With the current iteration of the web ecosystem, many frameworks are taking a server-first approach to building applications and websites. This is largely being done through meta-frameworks, such as Next.JS, SvelteKit, Nuxt, Qwik City, and more. These meta-frameworks have features such as filesystem-based routing, server-side rendering, static site generation, built-in API routes, and more integrated into the developer experience.

Analog is the meta-framework that helps you ship applications and websites faster with Angular.

Features

Analog is built on top of Angular with additional capabilities including:

First-class support for the Vite ecosystem (Vitest, Playwright, Cypress, and more)
File-based routing
Support for using markdown as content routes
Support for API/server routes
Hybrid SSR/SSG support
Supports Angular CLI/Nx workspaces
And more integrations

Let's Dive In!

Getting Started 🤓

To create a new Analog project, you can use the create-analog package with your package manager of choice:

npm create analog@latest analog-app
cd analog-app

You can also scaffold a new project with Nx.

Install the dependencies:

npm install

And serve the application:

npm start

Navigate to http://localhost:5173 to see the application running in your browser.

To build for deployment, run the build command:

npm run build

Fileystem-based Routing 🤖

Analog provides filesystem-based routing on top of the Angular Router.

For example, to define a /about route, create a file named src/app/pages/about.page.ts in the Analog project.

Next, add a standalone Angular component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  standalone: true,
  template: `
    <h2>Hello Analog</h2>

    Analog is a meta-framework on top of Angular.
  `,
})
export default class AboutPageComponent {}

Save the changes and there's your route without any additional configuration!

Navigate to http://localhost:5173/about to see the about page.

Analog also supports static routes, dynamic routes, nested routes, catch-all routes, and more.

API Routes 🧑‍🔧

Analog supports defining API routes that can be used to serve data to the application.

API routes are defined in the src/server/routes folder. API routes are also filesystem-based, and are exposed under the default /api prefix in development.

For example, to define an API route to send a "Hello Word" message as JSON:

Create a src/server/routes/v1/hello.ts file

import { defineEventHandler } from 'h3';

export default defineEventHandler(() => {
  return { message: 'Hello World' };
});

Save the changes, and now you can access this API route at /api/v1/hello. Query databases, connect to your CMS, and perform other actions on the server.

Server-Side Rendering and Static Site Generation 📈

Server-Side Rendering and Static Site Generation can enhance your Angular application in terms of SEO and performance. Analog supports server-side rendering and static site generation out of the box, and is enabled by default.

To build for deployment, run the build command:

npm run build

To pre-render pages, configure them in the vite.config.ts at the root of the project:

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    analog({
      prerender: {
        routes: async () => [
          '/',
          '/about',
          '/blog',
          '/blog/posts/2023-06-28-my-first-post',
        ],
      },
    }),
  ],
}));

These routes are pre-rendered to static HTML at build time and sent to the client before the Angular application is loaded, providing a better user experience. The Angular application is then loaded, providing a continued interactive user experience for the website or application.

Deployment 🚀

You can also deploy Analog applications to many different providers with little to no configuration including Netlify, Vercel, Firebase, and more.

Visit the deployment docs to learn more.

Sponsor Analog 💰

Analog is an MIT-licensed open-source project, but the effort needed to maintain this project is supported through sponsorships and contributions. We are looking for sponsorships and partnerships to support future development of the project.

Consider sponsoring the Analog project.

If you are a business using Angular to build a revenue-generating product, sponsoring Analog and its development also helps your interests in pushing Analog and Angular forward. If you are an individual who supports open-source projects, considering sponsoring and contributing to Analog.

Join the Community 🤝

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

If you liked this, click the ❤️ so other people will see it. Follow me on Twitter and subscribe to my YouTube Channel for content on Angular, Analog, NgRx, and more!

Forem: Analog

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 🥇

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 🥇

AnalogJS 🤝 Zerops: Official Deployment Partners

Partner with Analog 🤝

Join the Community 🥇

Bridging Analog to Angular with esbuild and Vite

Customizing Esbuild in Angular Applications

Adding the Analog SFC to an Angular application

Join the Community 🥇

Announcing AnalogJS 1.0 🚀

Features ⭐️

Contributions and Community 🤓

What's Next

Partner with Analog 🤝

Join the Community 🥇

Announcing the 0.2.0 release of Analog 🎉

Features ⭐️

Community 🤓

Partner with Analog 🤝

Join the Community 🥇

How to Build a Blog with Analog and Angular ✍️

Getting Started 🎽

Adding Markdown Support 🔌

Creating Content Routes with Markdown 🧠

Creating and Displaying a Blog Post ✍️

Listing Blog Posts 📜

Redirecting to Blog List 🔄

Pre-Rendering Static Pages 📃

Deployment 🚀

Example Projects

Partner with Analog 🤝

Join the Community 🥇

Fullstack Angular with Analog 🚀

Features

Getting Started 🤓

Fileystem-based Routing 🤖

API Routes 🧑‍🔧

Server-Side Rendering and Static Site Generation 📈

Deployment 🚀

Sponsor Analog 💰

Join the Community 🤝

`teardown.destroyAfterEach` Option

`strictStylePlacement` Option