skip to content

AnalogJS

2 roadmaps5 questions

AnalogJS is the Vite-based meta-framework for Angular: file-based pages, server-side load functions, API routes, SSR and static generation. Interviewers ask what it adds over Angular's own SSR.

on this pageshow

explore

questions

5

What does AnalogJS add to an Angular application that the Angular CLI with @angular/ssr does not give you on its own?

level: juniorimportance: must knowfreq 38%

answer

  1. a layer of conventions, not a renderer
  2. one Vite plugin in vite.config.ts
  3. routes read from the file system
  4. server-only code beside each page
  5. Nitro builds the server output

basics

~20 s

AnalogJS is a Vite-based meta-framework for Angular. It adds file-based pages, per-page server load functions, API routes built by Nitro, and prerender and deployment options, while Angular itself still renders, routes and hydrates the app.

solid answer

~40 s

The Angular CLI with `@angular/ssr` gives you server rendering, prerendering and hydration, but you still write the `Routes` array by hand and wire any extra HTTP endpoints into the Node server yourself. AnalogJS adds conventions on top: every `*.page.ts` under `src/app/pages` becomes a lazy-loaded route; a `.server.ts` file beside a page can export a `load` function that runs only on the server and is read with `injectLoad`; files under `src/server/routes/api` become HTTP endpoints under `/api`, written as h3 `defineEventHandler`s and compiled by Nitro. The `analog()` plugin from `@analogjs/platform` in `vite.config.ts` drives the build, turns SSR on by default and holds the `prerender` and deployment settings. Underneath, Angular's router, DI and `renderApplication` still do the work.

code

ts · 14 lines
ts
// vite.config.ts
import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

export default defineConfig(() => ({
  plugins: [
    analog({
      // ssr defaults to true: pages render on the server per request
      prerender: {
        routes: ['/', '/pricing', '/blog'],
      },
    }),
  ],
}));

go deeper

for a junior

Recall the three things Analog adds: routes from .page.ts files, server-only load functions in .server.ts, and API routes under src/server/routes/api. Say that it is built on Vite.

for a middle

Explain that Analog generates Angular Route objects and a Nitro server, while Angular's router, DI and renderApplication still do the rendering. Know where each file type lives and that SSR is on by default.

for a senior

Show you know which layer owns a problem: Angular for hydration and the transfer cache, Analog for routes, load endpoints and prerender config, Nitro for the deployed server and its presets.

for a principal

Frame Analog as a convention layer you adopt on top of Angular: it removes hand-wired routing and server plumbing, and in exchange the build moves from the CLI's builder to Vite and Nitro.

## What AnalogJS is, and what it is not **AnalogJS** (usually just **Analog**) is a **meta-framework** for Angular: a set of build-time conventions and a small runtime that sit *around* an ordinary Angular application. It is built on **Vite** (the build tool and dev server) and **Nitro** (a server toolkit that compiles server code into a deployable output). Version 2.7 supports Angular 17 through 22. What Analog is **not** is a new component model or renderer. Pages are normal standalone Angular components. The server entry, `main.server.ts`, exports `render(App, config)` from `@analogjs/router/server`, and that helper calls Angular's own `renderApplication` from `@angular/platform-server`. Hydration in the browser is still Angular's `provideClientHydration()`. So the honest one-line answer is: *Angular renders, Analog decides what to render, where the data comes from, and how the server is built.* ## What each piece adds The Angular CLI with `@angular/ssr` already gives an app server rendering, build-time prerendering and hydration. The difference is in how much you assemble yourself: | Concern | Angular CLI + `@angular/ssr` | AnalogJS 2.7 | |---|---|---| | Routes | a hand-written `Routes` array passed to `provideRouter` | `*.page.ts` files under `src/app/pages`, registered by `provideFileRouter()` | | Page data from the server | resolvers or services you write | an async `load` in a sibling `.server.ts`, read with `injectLoad` | | Extra HTTP endpoints | added by hand to the Node server that hosts the Angular engine | files under `src/server/routes/api`, served under `/api` by Nitro and h3 | | Build | the CLI's application builder | Vite, driven by the `analog()` plugin from `@analogjs/platform` | | Server output | a server bundle you run yourself | a Nitro server; the Node preset is the default, others via `BUILD_PRESET` | | Static generation | per-route render modes (Angular's own SSR API) | `prerender.routes`, `static`, `sitemap` in `analog()` | Beyond the table, Analog also ships **content routes** (Markdown files rendered as pages through `@analogjs/content`) and **form server actions** (a `FormAction` directive that posts to an `action` exported from `.server.ts`). ## Where the pieces live in a project For a product marketing site with a blog, a catalogue and a newsletter signup, the layout looks like this: ```text vite.config.ts analog() plugin: ssr, prerender, nitro src/main.server.ts server entry: render(App, config) src/app/app.config.ts provideFileRouter(), provideHttpClient(), provideClientHydration() src/app/pages/(home).page.ts route / src/app/pages/catalogue.page.ts route /catalogue src/app/pages/catalogue.server.ts load() for that page, server only src/server/routes/api/newsletter.post.ts POST /api/newsletter ``` - **`src/app/pages`** holds routes. Only files ending in `.page.ts` are collected, and each must **default-export** its component. - **`.server.ts`** files beside a page hold its `load` (and optional `action`). The client build replaces them with an empty module, so their imports and secrets never reach the browser. - **`src/server/routes/api`** holds API routes. They are not Angular code at all: each file default-exports an h3 event handler. - **`vite.config.ts`** is where rendering is configured. `ssr` defaults to `true`, and with no `prerender.routes` given, the `/` route is prerendered. ## A request through an Analog server When the Nitro server built by Analog receives a request, roughly this happens: 1. A URL under `/api` goes to the matching **API route** handler, or to a page's `load` endpoint under `/api/_analog/pages/...`. 2. A URL that was **prerendered** at build time is answered with the HTML file the build wrote. 3. Any other page URL goes to the **SSR renderer**, which calls `main.server.ts`; Angular renders the matching route, running its resolvers (including Analog's `load` resolver) first. 4. A URL matched by a `routeRules` entry with `ssr: false` gets the plain client shell instead, and Angular renders it in the browser. ## What stays pure Angular 1. **Components, DI, signals, forms** are untouched; an Analog page is an Angular component with a default export. 2. **The router** is Angular's. Analog only generates the `Route` objects, and `routeMeta` exported from a page merges guards, resolvers, a title or a redirect into the generated route. 3. **Server rendering and hydration** are Angular's `renderApplication` and `provideClientHydration`. Angular's HTTP transfer cache is what stops server-made `HttpClient` requests from repeating in the browser. ## How to answer it in an interview - Lead with the **conventions**: file-based pages, server `load`, API routes, one config for SSR and prerendering. - Name the **engine**: Vite for the build and dev server, Nitro and h3 for the server. - Say what does **not** change: it is still an Angular app, so Angular knowledge carries over directly. - Mention the history only if asked: the experimental `.analog` / `.ag` single-file components of 1.x were **removed in 2.0**, which also made Vite 6 the base version and dropped Angular 16 and older.

  • Does AnalogJS replace Angular's server rendering engine?
    No. An Analog app's `main.server.ts` exports `render(App, config)` from `@analogjs/router/server`, which calls Angular's `renderApplication`, and the browser hydrates through Angular's `provideClientHydration()`. Analog wraps that render in a Nitro server and decides which URLs are rendered per request, prerendered or left to the client; Angular still produces the HTML.
  • Can you still hand-write Angular routes in an AnalogJS app?
    Yes. `provideFileRouter(withExtraRoutes(customRoutes))` prepends a `Routes` array to the file-discovered routes, and those take priority in matching. A page can also export `routeMeta` to add guards, resolvers, a title or a redirect to its generated route. The file system is the default source of routes, not the only one.
  • What happened to Analog's .analog single-file components?
    They were an experimental 1.x format (`.analog`, later also `.ag`). AnalogJS 2.0.0 removed that support from its Angular Vite plugin, in the same release that made Vite 6 the base version and dropped Angular 16 and older. In 2.7, pages are ordinary standalone Angular components in `.page.ts` files.

saying these in an interview costs you the question

  • AnalogJS swaps Angular's renderer for its own server rendering engine.
  • Analog pages are .analog single-file components rather than Angular components.
  • Any TypeScript file under src/app/pages becomes a route.
  • Analog apps cannot use Angular DI or the Angular router.
  • Server rendering in Analog is off until you enable it in vite.config.ts.
open as a page

In AnalogJS, how do file names under src/app/pages become Angular routes for a marketing site's home page, blog, posts and 404 page?

level: middleimportance: must knowfreq 32%

basics

~20 s

In AnalogJS, only .page.ts files under src/app/pages become routes: (home).page.ts is /, blog/[slug].page.ts is /blog/:slug, a file beside a same-named folder is a layout, a (group) folder adds no segment, and [...page-not-found].page.ts is the ** route.

open as a page

In AnalogJS, how does a catalogue page load its product data in a .server.ts load function, and how does the page component read it?

level: middleimportance: should knowfreq 27%

basics

~20 s

In AnalogJS, an async load exported from catalogue.server.ts runs only on the server and returns JSON-serialisable data. Analog resolves it before the page component is created, and the component reads it with injectLoad<typeof load>(), usually wrapped in toSignal.

open as a page

In AnalogJS, how do you build a newsletter-signup API route under src/server/routes/api, and what does it need at deploy time?

level: seniorimportance: should knowfreq 20%

basics

~10 s

In AnalogJS, a file like src/server/routes/api/newsletter.post.ts that default-exports an h3 defineEventHandler becomes POST /api/newsletter. Nitro compiles it into Analog's server output, so it exists only where that server runs, never in a static-only build.

open as a page

In AnalogJS, SSR is on by default; how would you prerender the blog, keep the catalogue server-rendered and make an admin area client-only?

level: seniorimportance: should knowfreq 23%

basics

~10 s

In AnalogJS, list the blog URLs in prerender.routes, leave the catalogue to the default ssr: true, and set nitro.routeRules { '/admin/**': { ssr: false } } so admin pages render only in the browser.

open as a page