Angular¶

Litestar Vite supports Angular in two ways: Vite-based (using AnalogJS) and Angular CLI.

Option 1: Vite-Based (Recommended)¶

Uses @analogjs/vite-plugin-angular for fast HMR and unified tooling.

litestar assets init --template angular

Project Structure¶

my-app/
├── app.py              # Litestar backend
├── package.json
├── vite.config.ts
├── tsconfig.json
├── index.html          # Vite entry
└── src/
    ├── main.ts         # Angular bootstrap
    └── app/
        ├── app.component.ts
        ├── app.component.html
        └── app.config.ts

Backend Setup¶

from litestar import Litestar, get
from litestar_vite import ViteConfig, VitePlugin

@get("/api/hello")
async def hello() -> dict:
    return {"message": "Hello from Litestar!"}

vite = VitePlugin(config=ViteConfig(dev_mode=True))

app = Litestar(
    plugins=[vite],
    route_handlers=[hello],
)

Vite Configuration¶

vite.config.ts¶

import angular from "@analogjs/vite-plugin-angular"
import tailwindcss from "@tailwindcss/vite"
import litestar from "litestar-vite-plugin"
import { defineConfig } from "vite"

export default defineConfig({
  resolve: {
    mainFields: ["module"],
  },
  plugins: [
    // Angular plugin must be first
    angular(),
    tailwindcss(),
    litestar({
      input: ["src/main.ts", "src/styles.css"],
      resourceDir: "src",
    }),
  ],
})

Key configuration:

angular() plugin must come first
input includes both TypeScript entry and CSS
resourceDir explicitly set to src
resolve.mainFields set to ["module"] for Angular compatibility

Angular Component¶

import { Component, OnInit, inject } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "app-root",
  standalone: true,
  template: `
    <h1>Angular + Litestar</h1>
    <p>{{ message }}</p>
  `,
})
export class AppComponent implements OnInit {
  private http = inject(HttpClient);
  message = "";

  ngOnInit() {
    this.http.get<{message: string}>("/api/hello")
      .subscribe(res => this.message = res.message);
  }
}

Running (Analog)¶

# Single-port: Litestar starts and proxies Vite
litestar run --reload

# Two-port: start Vite yourself
litestar assets serve
litestar run --reload

Option 2: Angular CLI¶

Standard Angular CLI workflow with proxy to Litestar.

litestar assets init --template angular-cli

This creates a standard Angular project that:

Uses ng serve for development
Proxies API requests to Litestar via proxy.conf.json
Builds to dist/browser/ for production

Proxy Configuration¶

{
  "/api": {
    "target": "http://localhost:8000",
    "secure": false
  }
}

Running Angular CLI¶

# Terminal 1: Litestar backend
litestar run --reload

# Terminal 2: Angular dev server
npm start

Access at http://localhost:4200 (Angular proxies API calls to Litestar).

Comparison¶

Aspect	Vite (Analog)	Angular CLI
Build Tool	Vite	Webpack
HMR Speed	Fast	Standard
litestar-vite-plugin	Yes	No
Type Generation	Enabled	Disabled
Port	Single (8000)	Two (4200 + 8000)