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

npm create lunx-dev@latest my-analog-app -- --framework 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