@analogjs/vite-plugin-angular

@analogjs/vite-plugin-angular

A Vite plugin for building Angular applications

Install

With npm:

npm install @analogjs/vite-plugin-angular --save-dev

With pnpm:

pnpm install @analogjs/vite-plugin-angular --save-dev

With yarn:

yarn install @analogjs/vite-plugin-angular --dev

With bun:

bun install @analogjs/vite-plugin-angular --dev

Setup

Add the plugin to the plugins array in your Vite config

import { defineConfig } from 'vite';
import angular from '@analogjs/vite-plugin-angular';

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    mainFields: ['module'],
  },

  plugins: [angular()],
});

Setting up the TypeScript config

The integration needs a tsconfig.app.json at the root of the project for compilation.

Create a tsconfig.app.json in the root of the project.

{
  "extends": "./tsconfig.json",
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "noEmit": false,
    "target": "es2020",
    "module": "es2020",
    "lib": ["es2020", "dom"],
    "skipLibCheck": true
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  },
  "files": [],
  "include": ["src/**/*.ts"]
}

Changelog

1.12.1-beta.1 (2025-01-07)

Bug Fixes

• vite-plugin-angular: fix SSG and HMR of external component stylesheets (#1548) (e6de3d7)

Bug Fixes

• vite-plugin-angular: correctly implement HMR of component styles (#1542) (5ec113f)
• vite-plugin-angular: fix HMR of component styles w/tsconfig flag (#1539) (6b9c75c)
• vite-plugin-angular: fix HMR of component styles w/tsconfig flag (#1539) (ee67cc6)
• vite-plugin-angular: skip rebuilds before invalidation during testing (#1536) (4610be7)
• vite-plugin-angular: use ssr.noExternal for matching libraries during testing (#1545) (3f365e9)

Features

• vite-plugin-angular: fix .ts typechecking and add disableTypeChecking option (#1538) (56b0ffe)

Performance Improvements

• platform: exclude TypeScript files from Vite esbuild plugin (#1543) (de85100)

Reverts

• Revert "fix(vite-plugin-angular): fix HMR of component styles" (#1544) (eff770c)