analogjs

name	analogjs
description	Conventions for working in an AnalogJS app (an Angular meta-framework powered by Vite) — file-based routing with `.page.ts` files, `RouteMeta`, server and API routes on Nitro/h3, page load functions and server functions in `.server.ts` files, markdown content routes, and the modern Angular style Analog expects. Use when reading or writing code in a project that depends on `@analogjs/platform`.
license	MIT

AnalogJS — conventions for AI coding assistants

This skill ships with @analogjs/platform and documents how to work in an AnalogJS app (an Angular meta-framework, powered by Vite). It mirrors the AGENTS.md published alongside it, so the guidance stays in sync with the installed version.

Commands

• npm start / npm run dev — start the dev server (Vite)
• npm run build — production build
• npm test — run unit tests (Vitest)
• npm run preview — run the built server locally

Project structure

• src/app/pages/ — file-based routes (see Routing below)
• src/app/ — components and app config (app.config.ts, app.config.server.ts)
• src/server/routes/ — server and API routes (Nitro + h3)
• src/main.ts / src/main.server.ts — client and server bootstrap
• vite.config.ts — Vite + Analog plugin and Vitest config

Routing

Routes are file-based. A file in src/app/pages/ ending in .page.ts becomes a route, and it must export default a standalone Angular component.

• index.page.ts → /
• about.page.ts → /about
• products/index.page.ts → /products
• products/[productId].page.ts → /products/:productId (dynamic segment)
• (auth).page.ts + (auth)/*.page.ts → pathless layout: (auth).page.ts renders a <router-outlet /> and wraps its child routes (e.g. (auth)/login.page.ts → /login, (auth)/signup.page.ts → /signup) without adding a path segment
• [...not-found].page.ts → catch-all / 404

Read route params with inject(ActivatedRoute) from @angular/router.

Define per-route metadata (title, meta tags, guards, resolvers) by exporting a RouteMeta:

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

export const routeMeta: RouteMeta = {
  title: 'Products',
};

Server & API routes

Server routes live in src/server/routes/ and use h3. API routes are conventionally under src/server/routes/api/.

import { defineEventHandler } from 'h3';

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

Filenames encode the HTTP method and params: hello.get.ts, users.post.ts, users/[id].get.ts.

Data fetching

• Page load functions: add a sibling .server.ts load function and read its result in the page with injectLoad from @analogjs/router.
• Server functions: define functions in .server.ts files and call them from the client with injectServerFn.

Content routes

Markdown content is supported via @analogjs/content: injectContent / injectContentFiles to load content, and MarkdownComponent (analog-markdown) to render it. Content files live in src/content/.

Conventions

• Use modern Angular: standalone components, inject(), signals, and the built-in control flow (@if, @for, @switch).
• Page components are default-exported.
• Tests are colocated as *.spec.ts and run under Vitest (jsdom environment).
• Prefer existing Angular and Analog APIs over hand-rolled equivalents.

More

Full documentation: https://analogjs.org/docs LLM-friendly docs index: https://analogjs.org/llms.txt