Analog.js Has a Free Angular Meta-Framework — File-Based Routing and SSR for Angular Developers

Why Analog.js?

Analog.js is to Angular what Next.js is to React — a meta-framework with file-based routing, SSR, SSG, and API routes. Built on Vite for instant HMR.

npm create analog@latest my-app
cd my-app && npm run dev

File-Based Routing

src/app/pages/
  index.page.ts        -> /
  about.page.ts        -> /about
  blog.[slug].page.ts  -> /blog/:slug
  (auth)/login.page.ts -> /login (grouped)

// src/app/pages/blog.[slug].page.ts
import { Component } from '@angular/core'
import { injectLoad, RouteMeta } from '@analogjs/router'

export const routeMeta: RouteMeta = {
  title: 'Blog Post',
}

@Component({
  template: `<article><h1>{{ data.title }}</h1><div [innerHTML]="data.content"></div></article>`,
})
export default class BlogPostPage {
  data = injectLoad<typeof import('./blog.[slug].server')>()
}

Server-Side Data Loading

// src/app/pages/blog.[slug].server.ts
import { PageServerLoad } from '@analogjs/router'

export const load = async ({ params }: PageServerLoad) => {
  const post = await fetch(`https://api.example.com/posts/${params['slug']}`)
  return post.json()
}

API Routes

// src/server/routes/v1/users.ts
import { defineEventHandler } from 'h3'

export default defineEventHandler(async () => {
  const users = await db.query('SELECT * FROM users')
  return users
})

Analog vs Plain Angular

Feature	Analog.js	Angular
Routing	File-based	Manual
SSR	Built-in	@angular/ssr
API routes	Yes	No
Bundler	Vite	Webpack/esbuild
Markdown	Built-in	No

---

Need to extract data from any website at scale? I build custom web scrapers — 77 production scrapers running on Apify Store. Email me at [e-mail] for a tailored solution.