Analogjs Development

Analogjs Development

Development guide for Analogjs 2.x framework with file-based routing and content management.

When to Use This Skill

• Creating new pages (*.page.ts)
• Setting up dynamic routes ([param].page.ts)
• Loading and displaying markdown content
• Configuring SSR/SSG (prerender)
• Creating API routes (server/routes/)

When NOT to use:

• Creating non-page Angular components → angular-v21-development
• Styling only → tailwindcss-v4-styling
• UI/UX design application → material-design-3-expressive

Core Principles

• File-Based Routing: Routes are defined by file location and naming
• Default Export: Page components must use default export
• Content Resources API: Use injectContentFiles() and injectContent() for markdown
• requestContextInterceptor: Place as the last interceptor in HttpClient configuration
• Project Structure:

  src/
  ├── app/pages/           # File-based routing
  │   ├── index.page.ts    # / route
  │   ├── about/
  │   │   └── index.page.ts # /about route
  │   └── blog/
  │       ├── index.page.ts     # /blog route
  │       └── [slug].page.ts    # /blog/:slug dynamic route
  ├── content/             # Markdown content
  │   └── blog/
  └── server/routes/       # API endpoints
  

Implementation Guidelines

Page Component

Key patterns for page components:

1. File must end with .page.ts suffix
2. Component must be default exported
3. Can have accompanying .page.html and .page.css files

→ Details: Routing Patterns

Dynamic Routes

Dynamic route patterns:

1. Use bracket syntax for parameter: [slug].page.ts
2. Access parameter via injectContent() or ActivatedRoute
3. Prefer withComponentInputBinding() for route params as inputs

→ Details: Routing Patterns

Content Management

Markdown content handling patterns:

1. Use injectContentFiles<T>() for content list
2. Use injectContent<T>() for single content by route param
3. Define PostAttributes interface for content metadata
4. Configure provideContent() with markdown renderer

→ Details: Content Handling

Route Metadata

Route-level configuration patterns:

1. Export routeMeta for route configuration
2. Set page title, meta tags, guards
3. Configure SSR/SSG options per route

→ Details: Routing Patterns

SSR/SSG Configuration

Server-side rendering and static generation patterns:

1. Configure prerender.routes in vite.config.ts
2. Use contentDir with transform for dynamic content routes
3. Set up provideServerContext() in main.server.ts

→ Details: Content Handling

API Routes

Server API route patterns:

1. Create files in src/server/routes/
2. Use defineEventHandler() from h3
3. File path becomes API endpoint

→ Details: Routing Patterns

Workflow

1. Route Planning: Determine route type (static/dynamic/group)
2. Create Page File: Create *.page.ts with correct naming
3. Template Setup: Create template/style files if needed
4. Content Connection: Set up markdown content loading if applicable
5. Route Metadata: Configure routeMeta export
6. Prerender Setup: Add route to prerender configuration for SSG

Related Skills

• angular-v21-development: For component internal implementation
• tailwindcss-v4-styling: For page styling
• material-design-3-expressive: For UI component application

Reference Documentation

For detailed patterns and code examples, see:

• Routing Patterns - File-based routing details
• Content Handling - Markdown content management