DocsFrameworksAnalog

Analog Adapter

Angular meta-framework with file-based routing, Markdown content support, API routes, SSR, and SSG. Built on Vite — enhanced by Lunx for security and faster builds.

Analog 1.x · Angular · File Routing

File-based routing

src/app/pages/ directory auto-generates Angular Router routes. Nested folders = nested routes.

Markdown pages

.md and .agx files in pages/ are rendered as full Angular pages with frontmatter metadata.

SSR + SSG

Per-route SSR or static pre-rendering. Hybrid mode mixes static and dynamic pages.

API routes

src/server/routes/ creates API endpoints via the h3 server engine — like Next.js /api.

Lunx acceleration

Lunx runs security audits and produces optimized output before the Analog SSR bundle.

TypeScript native

Angular Ivy compilation with full TypeScript strict mode support.

Setup

bash

npx lunx-dev@latest create my-analog-app --template analog --ts
cd my-analog-app && npm install && npm run dev

File-based Angular route

typescriptsrc/app/pages/blog/[slug].page.ts

import { Component, inject }   from '@angular/core'
import { ActivatedRoute }       from '@angular/router'
import { injectLoad }           from '@analogjs/router'
import { toSignal }             from '@angular/core/rxjs-interop'
import type { PageLoad }        from './$types'

// Server-side load function — runs before render
export const load: PageLoad = async ({ params, fetch }) => {
  const post = await fetch(`/api/posts/${params['slug']}`).then(r => r.json())
  return { post }
}

@Component({
  standalone: true,
  template: `
    @if (data(); as d) {
      <article>
        <h1>{{ d.post.title }}</h1>
        <div [innerHTML]="d.post.content"></div>
      </article>
    }
  `,
})
export default class BlogPostPage {
  private data = injectLoad<PageLoad>()
}

Markdown content page

markdownsrc/app/pages/about.md

---
title: About Us
description: Learn about our team
---

# About Our Team

We are a team of developers passionate about building fast, secure web applications
with modern tooling...

Angular + File Routing

Analog brings the DX of Next.js and SvelteKit file-based routing to the Angular ecosystem. If you're an Angular developer tired of manually configuring the Router, Analog is the fastest path to a full-stack Angular application with modern conventions.

PreviousLit Adapter NextTanStack Start