@ng-annotate/angular 0.4.1 → 0.5.1

package/builders.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "@angular-devkit/architect/builders-schema.json",
+  "builders": {
+    "dev-server": {
+      "implementation": "./dist/builders/dev-server/index",
+      "schema": "./dist/builders/dev-server/schema.json",
+      "description": "ng-annotate dev server — wraps @angular/build:dev-server with integrated WebSocket support and component manifest injection. No proxy configuration required."
+    }
+  }
+}

package/dist/builders/dev-server/index.d.ts

@@ -0,0 +1,3 @@
+import type { DevServerBuilderOptions } from '@angular/build';
+declare const _default: import("@angular-devkit/architect").Builder<DevServerBuilderOptions & import("@angular-devkit/core").JsonObject>;
+export default _default;

package/dist/builders/dev-server/index.js

@@ -0,0 +1,216 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const architect_1 = require("@angular-devkit/architect");
+const build_1 = require("@angular/build");
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const node_crypto_1 = require("node:crypto");
+const ws_1 = require("ws");
+// ─── Store ────────────────────────────────────────────────────────────────────
+const STORE_DIR = '.ng-annotate';
+function makeStore(projectRoot) {
+    const storePath = node_path_1.default.join(projectRoot, STORE_DIR, 'store.json');
+    function ensureStore() {
+        const dir = node_path_1.default.dirname(storePath);
+        if (!node_fs_1.default.existsSync(dir))
+            node_fs_1.default.mkdirSync(dir, { recursive: true });
+        if (!node_fs_1.default.existsSync(storePath)) {
+            node_fs_1.default.writeFileSync(storePath, JSON.stringify({ sessions: {}, annotations: {} }, null, 2), 'utf8');
+        }
+    }
+    let writeQueue = Promise.resolve();
+    async function withLock(fn) {
+        ensureStore();
+        const result = writeQueue.then(() => {
+            const raw = node_fs_1.default.readFileSync(storePath, 'utf8');
+            const data = JSON.parse(raw);
+            const updated = fn(data);
+            node_fs_1.default.writeFileSync(storePath, JSON.stringify(updated, null, 2), 'utf8');
+            return updated;
+        });
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        writeQueue = result.catch(() => { });
+        return result;
+    }
+    function readStore() {
+        ensureStore();
+        return JSON.parse(node_fs_1.default.readFileSync(storePath, 'utf8'));
+    }
+    return {
+        async createSession(url) {
+            const now = new Date().toISOString();
+            const session = { id: (0, node_crypto_1.randomUUID)(), createdAt: now, lastSeenAt: now, active: true, url };
+            await withLock((data) => { data.sessions[session.id] = session; return data; });
+            return session;
+        },
+        async updateSession(id, patch) {
+            await withLock((data) => {
+                const s = data.sessions[id];
+                if (s)
+                    data.sessions[id] = { ...s, ...patch, id };
+                return data;
+            });
+        },
+        async createAnnotation(payload) {
+            const annotation = {
+                id: (0, node_crypto_1.randomUUID)(),
+                createdAt: new Date().toISOString(),
+                status: 'pending',
+                replies: [],
+                ...payload,
+            };
+            await withLock((data) => { data.annotations[annotation.id] = annotation; return data; });
+            return annotation;
+        },
+        listAnnotations(sessionId) {
+            const data = readStore();
+            return Object.values(data.annotations)
+                .filter((a) => a?.sessionId === sessionId)
+                .sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+        },
+        async addReply(annotationId, reply) {
+            let result;
+            await withLock((data) => {
+                const annotation = data.annotations[annotationId];
+                if (!annotation)
+                    return data;
+                annotation.replies.push({ id: (0, node_crypto_1.randomUUID)(), createdAt: new Date().toISOString(), ...reply });
+                result = annotation;
+                return data;
+            });
+            return result;
+        },
+    };
+}
+function buildManifest(projectRoot) {
+    const manifest = {};
+    const srcDir = node_path_1.default.join(projectRoot, 'src');
+    if (!node_fs_1.default.existsSync(srcDir))
+        return manifest;
+    function scan(dir) {
+        for (const entry of node_fs_1.default.readdirSync(dir, { withFileTypes: true })) {
+            const fullPath = node_path_1.default.join(dir, entry.name);
+            if (entry.isDirectory()) {
+                scan(fullPath);
+                continue;
+            }
+            if (!entry.name.endsWith('.ts') || entry.name.endsWith('.spec.ts'))
+                continue;
+            const code = node_fs_1.default.readFileSync(fullPath, 'utf8');
+            if (!code.includes('@Component'))
+                continue;
+            const classMatch = /export\s+class\s+(\w+)/.exec(code);
+            if (!classMatch)
+                continue;
+            const relPath = node_path_1.default.relative(projectRoot, fullPath).replace(/\\/g, '/');
+            const item = { component: relPath };
+            const templateMatch = /templateUrl\s*:\s*['"`]([^'"`]+)['"`]/.exec(code);
+            if (templateMatch) {
+                const templateAbs = node_path_1.default.resolve(node_path_1.default.dirname(fullPath), templateMatch[1]);
+                item.template = node_path_1.default.relative(projectRoot, templateAbs).replace(/\\/g, '/');
+            }
+            manifest[classMatch[1]] = item;
+        }
+    }
+    scan(srcDir);
+    return manifest;
+}
+// ─── WebSocket handler ────────────────────────────────────────────────────────
+const SYNC_INTERVAL_MS = 2000;
+function safeSend(ws, data) {
+    if (ws.readyState !== ws_1.WebSocket.OPEN)
+        return;
+    ws.send(JSON.stringify(data), (err) => { if (err) { /* connection closed mid-send */ } });
+}
+function createAnnotateWsHandler(store) {
+    const wss = new ws_1.WebSocketServer({ noServer: true });
+    const sessionSockets = new Map();
+    wss.on('connection', (ws, req) => {
+        void (async () => {
+            const url = req.headers.referer ?? req.headers.origin ?? '';
+            let sessionId;
+            try {
+                const session = await store.createSession(url);
+                sessionId = session.id;
+                safeSend(ws, { type: 'session:created', session });
+                sessionSockets.set(sessionId, ws);
+            }
+            catch (err) {
+                process.stderr.write(`[ng-annotate] Failed to create session: ${String(err)}\n`);
+                return;
+            }
+            ws.on('message', (raw) => {
+                void (async () => {
+                    let msg;
+                    try {
+                        msg = JSON.parse(raw.toString());
+                    }
+                    catch {
+                        return;
+                    }
+                    try {
+                        if (msg.type === 'annotation:create' && msg.payload) {
+                            const annotation = await store.createAnnotation({ ...msg.payload, sessionId });
+                            safeSend(ws, { type: 'annotation:created', annotation });
+                        }
+                        else if (msg.type === 'annotation:reply' && msg.id && msg.message) {
+                            const updated = await store.addReply(msg.id, { author: 'user', message: msg.message });
+                            if (updated)
+                                safeSend(ws, { type: 'annotation:updated', annotation: updated });
+                        }
+                    }
+                    catch (err) {
+                        process.stderr.write(`[ng-annotate] Failed to process message: ${String(err)}\n`);
+                    }
+                })();
+            });
+            ws.on('close', () => {
+                void store.updateSession(sessionId, { active: false });
+                sessionSockets.delete(sessionId);
+            });
+        })();
+    });
+    setInterval(() => {
+        for (const [sessionId, ws] of sessionSockets) {
+            if (ws.readyState !== ws_1.WebSocket.OPEN)
+                continue;
+            const annotations = store.listAnnotations(sessionId);
+            safeSend(ws, { type: 'annotations:sync', annotations });
+        }
+    }, SYNC_INTERVAL_MS);
+    return { wss };
+}
+// ─── Builder ──────────────────────────────────────────────────────────────────
+exports.default = (0, architect_1.createBuilder)((options, context) => {
+    const projectRoot = context.workspaceRoot;
+    const store = makeStore(projectRoot);
+    const manifest = buildManifest(projectRoot);
+    const { wss } = createAnnotateWsHandler(store);
+    let wsAttached = false;
+    const middleware = (req, _res, next) => {
+        if (!wsAttached) {
+            wsAttached = true;
+            const httpServer = req.socket.server;
+            httpServer.on('upgrade', (upgradeReq, socket, head) => {
+                if (upgradeReq.url === '/__annotate') {
+                    wss.handleUpgrade(upgradeReq, socket, head, (ws) => {
+                        wss.emit('connection', ws, upgradeReq);
+                    });
+                }
+            });
+            process.stderr.write(`[ng-annotate] WebSocket handler attached to Angular dev server\n`);
+        }
+        next();
+    };
+    const indexHtmlTransformer = (content) => {
+        const script = `<script>window.__NG_ANNOTATE_MANIFEST__ = ${JSON.stringify(manifest)};</script>`;
+        return Promise.resolve(content.replace('</head>', `  ${script}\n</head>`));
+    };
+    return (0, build_1.executeDevServerBuilder)(options, context, {
+        middleware: [middleware],
+        indexHtmlTransformer,
+    });
+});

package/dist/builders/dev-server/schema.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "ng-annotate Dev Server",
+  "description": "Wraps @angular/build:dev-server with integrated ng-annotate WebSocket and manifest support.",
+  "type": "object",
+  "properties": {}
+}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ng-annotate/angular",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "schematics": "./schematics/collection.json",
+  "builders": "./builders.json",
   "description": "Angular library for ng-annotate-mcp — browser overlay for annotating components and routing instructions to an AI agent",
   "keywords": [
     "angular",
@@ -19,6 +20,7 @@
   "files": [
     "dist",
     "schematics",
+    "builders.json",
     "README.md"
   ],
   "main": "dist/fesm2022/ng-annotate-angular.mjs",
@@ -34,21 +36,30 @@
     }
   },
   "scripts": {
-    "build": "ng-packagr -p ng-package.json && npm run build:schematics",
+    "build": "ng-packagr -p ng-package.json && npm run build:schematics && npm run build:builders",
     "build:watch": "ng-packagr -p ng-package.json --watch",
     "build:schematics": "tsc -p schematics/tsconfig.json",
+    "build:builders": "tsc -p builders/tsconfig.json && node -e \"require('fs').cpSync('src/builders/dev-server/schema.json','dist/builders/dev-server/schema.json')\"",
     "test": "vitest run schematics",
     "test:watch": "vitest schematics",
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix"
   },
   "peerDependencies": {
+    "@angular-devkit/architect": ">=0.1700.0",
+    "@angular/build": ">=21.0.0",
     "@angular/core": ">=21.0.0",
     "rxjs": ">=7.0.0"
   },
+  "dependencies": {
+    "ws": "^8.19.0"
+  },
   "devDependencies": {
+    "@angular-devkit/architect": ">=0.2100.0",
     "@angular-devkit/schematics": ">=17.0.0",
+    "@angular/build": "^21.0.0",
     "@angular/core": "^21.0.0",
+    "@types/ws": "^8.18.1",
     "ng-packagr": "^21.2.0",
     "rxjs": "^7.0.0",
     "typescript": "~5.9.0",

package/schematics/ng-add/index.js

@@ -40,6 +40,8 @@ const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const helpers_1 = require("./helpers");
 const MIN_ANGULAR_MAJOR = 21;
+const NG_ANNOTATE_BUILDER = '@ng-annotate/angular:dev-server';
+const ANGULAR_DEV_SERVER_BUILDER = '@angular/build:dev-server';
 function checkAngularVersion() {
     return (tree) => {
         const pkgPath = 'package.json';
@@ -55,18 +57,12 @@ function checkAngularVersion() {
         }
     };
 }
-function addProxyConfig() {
+function updateAngularJsonBuilder() {
     return (tree, context) => {
-        // Create proxy.conf.json
-        const proxyPath = 'proxy.conf.json';
-        if (!tree.exists(proxyPath)) {
-            tree.create(proxyPath, JSON.stringify({ '/__annotate': { target: 'ws://localhost:4201', ws: true } }, null, 2) + '\n');
-            context.logger.info('✅ Created proxy.conf.json');
-        }
-        // Update angular.json serve options
         const angularJsonPath = 'angular.json';
         if (!tree.exists(angularJsonPath)) {
-            context.logger.warn('⚠️  Could not find angular.json — add proxyConfig manually');
+            context.logger.warn('⚠️  Could not find angular.json — update the serve builder manually:\n' +
+                `    "builder": "${NG_ANNOTATE_BUILDER}"`);
             return;
         }
         const angularJson = JSON.parse(tree.read(angularJsonPath).toString('utf-8'));
@@ -82,51 +78,26 @@ function addProxyConfig() {
             const serve = architect['serve'];
             if (!serve)
                 continue;
-            const options = (serve['options'] ?? {});
-            if (options['proxyConfig'])
+            const currentBuilder = serve['builder'];
+            if (currentBuilder === NG_ANNOTATE_BUILDER) {
+                context.logger.info(`ng-annotate builder already configured in ${projectName}, skipping.`);
+                continue;
+            }
+            if (currentBuilder !== ANGULAR_DEV_SERVER_BUILDER) {
+                context.logger.warn(`⚠️  Project "${projectName}" uses builder "${String(currentBuilder)}" which is not ` +
+                    `"${ANGULAR_DEV_SERVER_BUILDER}". Skipping automatic builder update — ` +
+                    `set it to "${NG_ANNOTATE_BUILDER}" manually if compatible.`);
                 continue;
-            serve['options'] = { ...options, proxyConfig: 'proxy.conf.json' };
+            }
+            serve['builder'] = NG_ANNOTATE_BUILDER;
             changed = true;
-            context.logger.info(`✅ Added proxyConfig to angular.json (${projectName})`);
+            context.logger.info(`✅ Updated angular.json serve builder for "${projectName}"`);
         }
         if (changed) {
             tree.overwrite(angularJsonPath, JSON.stringify(angularJson, null, 2) + '\n');
         }
     };
 }
-function addVitePlugin() {
-    return (tree, context) => {
-        // Angular CLI does not load vite.config.ts plugins — skip for Angular projects
-        if (tree.exists('angular.json')) {
-            context.logger.info('Angular project detected — skipping vite.config.ts setup (using proxy instead).');
-            return;
-        }
-        const candidates = ['vite.config.ts', 'vite.config.js', 'vite.config.mts'];
-        const viteConfigPath = candidates.find((p) => tree.exists(p));
-        if (!viteConfigPath) {
-            const created = `import { defineConfig } from 'vite';\nimport { ngAnnotateMcp } from '@ng-annotate/vite-plugin';\n\nexport default defineConfig({\n  plugins: [...ngAnnotateMcp()],\n});\n`;
-            tree.create('vite.config.ts', created);
-            context.logger.info('✅ Created vite.config.ts with ngAnnotateMcp()');
-            return;
-        }
-        let content = tree.read(viteConfigPath).toString('utf-8');
-        if (content.includes('@ng-annotate/vite-plugin')) {
-            context.logger.info('@ng-annotate/vite-plugin vite plugin already present, skipping.');
-            return;
-        }
-        content = (0, helpers_1.insertAfterLastImport)(content, "import { ngAnnotateMcp } from '@ng-annotate/vite-plugin';");
-        if (/plugins\s*:\s*\[/.test(content)) {
-            // Existing plugins array — prepend into it
-            content = content.replace(/plugins\s*:\s*\[/, 'plugins: [...ngAnnotateMcp(), ');
-        }
-        else {
-            // No plugins array — inject one into defineConfig({...})
-            content = content.replace(/defineConfig\(\s*\{/, 'defineConfig({\n  plugins: [...ngAnnotateMcp()],');
-        }
-        tree.overwrite(viteConfigPath, content);
-        context.logger.info(`✅ Added ngAnnotateMcp() to ${viteConfigPath}`);
-    };
-}
 function addProviders() {
     return (tree, context) => {
         const candidates = [
@@ -268,12 +239,17 @@ function addDevDependency() {
         if (!tree.exists(pkgPath))
             return;
         const pkg = JSON.parse(tree.read(pkgPath).toString('utf-8'));
+        pkg['dependencies'] ?? (pkg['dependencies'] = {});
         pkg['devDependencies'] ?? (pkg['devDependencies'] = {});
         let changed = false;
-        if (!pkg['devDependencies']['@ng-annotate/vite-plugin']) {
-            pkg['devDependencies']['@ng-annotate/vite-plugin'] = 'latest';
+        // ng add installs @ng-annotate/angular into dependencies by default.
+        // Move it to devDependencies — it is a dev-only tool.
+        const ngAnnotateVersion = pkg['dependencies']['@ng-annotate/angular'];
+        if (ngAnnotateVersion && !pkg['devDependencies']['@ng-annotate/angular']) {
+            pkg['devDependencies']['@ng-annotate/angular'] = ngAnnotateVersion;
+            delete pkg['dependencies']['@ng-annotate/angular'];
             changed = true;
-            context.logger.info('✅ Added @ng-annotate/vite-plugin to devDependencies');
+            context.logger.info('✅ Moved @ng-annotate/angular to devDependencies');
         }
         if (!pkg['devDependencies']['@ng-annotate/mcp-server']) {
             pkg['devDependencies']['@ng-annotate/mcp-server'] = 'latest';
@@ -310,8 +286,7 @@ function default_1(options) {
         return (0, schematics_1.chain)([
             checkAngularVersion(),
             addDevDependency(),
-            addProxyConfig(),
-            addVitePlugin(),
+            updateAngularJsonBuilder(),
             addProviders(),
             addMcpConfig(options),
             addGitignore(),

package/schematics/ng-add/index.spec.ts

@@ -72,8 +72,21 @@ const BASE_PKG = JSON.stringify({
   devDependencies: {},
 });
 
-async function runSchematic(tree: UnitTestTree): Promise<UnitTestTree> {
-  return runner.runSchematic('ng-add', { aiTool: 'claude-code' }, tree);
+const ANGULAR_JSON = JSON.stringify({
+  projects: {
+    'my-app': {
+      architect: {
+        serve: {
+          builder: '@angular/build:dev-server',
+          options: {},
+        },
+      },
+    },
+  },
+});
+
+async function runSchematic(tree: Tree): Promise<ReturnType<typeof Tree.empty> & { readText(p: string): string }> {
+  return runner.runSchematic('ng-add', { aiTool: 'claude-code' }, tree) as Promise<ReturnType<typeof Tree.empty> & { readText(p: string): string }>;
 }
 
 function makeTree(files: Record<string, string>): Tree {
@@ -84,51 +97,110 @@ function makeTree(files: Record<string, string>): Tree {
   return tree;
 }
 
-describe('ng-add schematic — addVitePlugin', () => {
-  it('creates vite.config.ts when none exists', async () => {
+// ─── addDevDependency ─────────────────────────────────────────────────────────
+
+describe('ng-add schematic — addDevDependency', () => {
+  it('moves @ng-annotate/angular from dependencies to devDependencies', async () => {
+    const pkg = JSON.stringify({
+      dependencies: { '@angular/core': '^21.0.0', '@ng-annotate/angular': '^0.5.0' },
+      devDependencies: {},
+    });
+    const tree = makeTree({ 'package.json': pkg });
+    const result = await runSchematic(tree);
+    const parsed = JSON.parse(result.readText('package.json')) as Record<string, Record<string, string>>;
+    expect(parsed['devDependencies']['@ng-annotate/angular']).toBe('^0.5.0');
+    expect(parsed['dependencies']['@ng-annotate/angular']).toBeUndefined();
+  });
+
+  it('adds @ng-annotate/mcp-server to devDependencies', async () => {
     const tree = makeTree({ 'package.json': BASE_PKG });
     const result = await runSchematic(tree);
-    expect(result.exists('vite.config.ts')).toBe(true);
-    const content = result.readText('vite.config.ts');
-    expect(content).toContain("import { ngAnnotateMcp } from '@ng-annotate/vite-plugin'");
-    expect(content).toContain('plugins: [...ngAnnotateMcp()]');
+    const parsed = JSON.parse(result.readText('package.json')) as Record<string, Record<string, string>>;
+    expect(parsed['devDependencies']['@ng-annotate/mcp-server']).toBe('latest');
   });
 
-  it('adds plugin to existing vite.config.ts with a plugins array', async () => {
-    const tree = makeTree({
-      'package.json': BASE_PKG,
-      'vite.config.ts': `import { defineConfig } from 'vite';\nimport { foo } from 'foo';\n\nexport default defineConfig({\n  plugins: [foo()],\n});\n`,
+  it('skips @ng-annotate/mcp-server if already present', async () => {
+    const pkg = JSON.stringify({
+      dependencies: { '@angular/core': '^21.0.0' },
+      devDependencies: { '@ng-annotate/mcp-server': '^0.4.0' },
     });
+    const tree = makeTree({ 'package.json': pkg });
     const result = await runSchematic(tree);
-    const content = result.readText('vite.config.ts');
-    expect(content).toContain("import { ngAnnotateMcp } from '@ng-annotate/vite-plugin'");
-    expect(content).toContain('plugins: [...ngAnnotateMcp(), ');
+    const parsed = JSON.parse(result.readText('package.json')) as Record<string, Record<string, string>>;
+    expect(parsed['devDependencies']['@ng-annotate/mcp-server']).toBe('^0.4.0');
   });
+});
 
-  it('adds plugins array to vite.config.ts that has defineConfig({}) with no plugins', async () => {
-    const tree = makeTree({
-      'package.json': BASE_PKG,
-      'vite.config.ts': `import { defineConfig } from 'vite';\nimport { ngAnnotateMcp } from '@ng-annotate/vite-plugin';\n\nexport default defineConfig({});\n`,
+// ─── updateAngularJsonBuilder ─────────────────────────────────────────────────
+
+describe('ng-add schematic — updateAngularJsonBuilder', () => {
+  it('updates builder to @ng-annotate/angular:dev-server', async () => {
+    const tree = makeTree({ 'package.json': BASE_PKG, 'angular.json': ANGULAR_JSON });
+    const result = await runSchematic(tree);
+    const angular = JSON.parse(result.readText('angular.json')) as Record<string, unknown>;
+    const projects = angular['projects'] as Record<string, Record<string, unknown>>;
+    const serve = (projects['my-app']['architect'] as Record<string, Record<string, unknown>>)['serve'];
+    expect((serve['builder'] as string)).toBe('@ng-annotate/angular:dev-server');
+  });
+
+  it('skips when already using ng-annotate builder', async () => {
+    const withNgAnnotate = JSON.stringify({
+      projects: {
+        'my-app': {
+          architect: {
+            serve: {
+              builder: '@ng-annotate/angular:dev-server',
+              options: {},
+            },
+          },
+        },
+      },
     });
-    // Already has the import but no plugins — should not be skipped
-    // Re-create without the import to test the injection path
-    const tree2 = makeTree({
-      'package.json': BASE_PKG,
-      'vite.config.ts': `import { defineConfig } from 'vite';\n\nexport default defineConfig({});\n`,
+    const tree = makeTree({ 'package.json': BASE_PKG, 'angular.json': withNgAnnotate });
+    const result = await runSchematic(tree);
+    const angular = JSON.parse(result.readText('angular.json')) as Record<string, unknown>;
+    const projects = angular['projects'] as Record<string, Record<string, unknown>>;
+    const serve = (projects['my-app']['architect'] as Record<string, Record<string, unknown>>)['serve'];
+    expect((serve['builder'] as string)).toBe('@ng-annotate/angular:dev-server');
+  });
+
+  it('warns but does not change unknown builders', async () => {
+    const withCustomBuilder = JSON.stringify({
+      projects: {
+        'my-app': {
+          architect: {
+            serve: {
+              builder: '@custom/builder:dev-server',
+              options: {},
+            },
+          },
+        },
+      },
     });
-    const result = await runSchematic(tree2);
-    const content = result.readText('vite.config.ts');
-    expect(content).toContain('plugins: [...ngAnnotateMcp()]');
+    const tree = makeTree({ 'package.json': BASE_PKG, 'angular.json': withCustomBuilder });
+    const result = await runSchematic(tree);
+    const angular = JSON.parse(result.readText('angular.json')) as Record<string, unknown>;
+    const projects = angular['projects'] as Record<string, Record<string, unknown>>;
+    const serve = (projects['my-app']['architect'] as Record<string, Record<string, unknown>>)['serve'];
+    // Should NOT overwrite a custom builder
+    expect((serve['builder'] as string)).toBe('@custom/builder:dev-server');
+  });
+
+  it('does not create vite.config.ts (Angular CLI never loads it)', async () => {
+    const tree = makeTree({ 'package.json': BASE_PKG, 'angular.json': ANGULAR_JSON });
+    const result = await runSchematic(tree);
+    expect(result.exists('vite.config.ts')).toBe(false);
   });
 
-  it('skips when @ng-annotate/vite-plugin already present', async () => {
-    const original = `import { defineConfig } from 'vite';\nimport { ngAnnotateMcp } from '@ng-annotate/vite-plugin';\n\nexport default defineConfig({\n  plugins: [...ngAnnotateMcp()],\n});\n`;
-    const tree = makeTree({ 'package.json': BASE_PKG, 'vite.config.ts': original });
+  it('does not create proxy.conf.json (builder handles WS internally)', async () => {
+    const tree = makeTree({ 'package.json': BASE_PKG, 'angular.json': ANGULAR_JSON });
     const result = await runSchematic(tree);
-    expect(result.readText('vite.config.ts')).toBe(original);
+    expect(result.exists('proxy.conf.json')).toBe(false);
   });
 });
 
+// ─── addProviders ─────────────────────────────────────────────────────────────
+
 describe('ng-add schematic — addProviders', () => {
   it('adds import and provideNgAnnotate() to standard app.config.ts', async () => {
     const tree = makeTree({
@@ -162,71 +234,7 @@ describe('ng-add schematic — addProviders', () => {
   });
 });
 
-describe('ng-add schematic — addProxyConfig', () => {
-  const ANGULAR_JSON = JSON.stringify({
-    projects: {
-      'my-app': {
-        architect: {
-          serve: {
-            builder: '@angular/build:dev-server',
-            options: {},
-          },
-        },
-      },
-    },
-  });
-
-  it('creates proxy.conf.json and updates angular.json', async () => {
-    const tree = makeTree({ 'package.json': BASE_PKG, 'angular.json': ANGULAR_JSON });
-    const result = await runSchematic(tree);
-    expect(result.exists('proxy.conf.json')).toBe(true);
-    expect(result.readText('proxy.conf.json')).toContain('/__annotate');
-    const angular = JSON.parse(result.readText('angular.json')) as Record<string, unknown>;
-    const projects = angular['projects'] as Record<string, Record<string, unknown>>;
-    const serve = (projects['my-app']['architect'] as Record<string, Record<string, unknown>>)['serve'];
-    expect((serve['options'] as Record<string, unknown>)['proxyConfig']).toBe('proxy.conf.json');
-  });
-
-  it('skips proxy.conf.json if already exists', async () => {
-    const original = '{"/__annotate":{"target":"ws://localhost:4201","ws":true}}\n';
-    const tree = makeTree({
-      'package.json': BASE_PKG,
-      'angular.json': ANGULAR_JSON,
-      'proxy.conf.json': original,
-    });
-    const result = await runSchematic(tree);
-    expect(result.readText('proxy.conf.json')).toBe(original);
-  });
-
-  it('skips angular.json proxyConfig if already set', async () => {
-    const withProxy = JSON.stringify({
-      projects: {
-        'my-app': {
-          architect: {
-            serve: {
-              builder: '@angular/build:dev-server',
-              options: { proxyConfig: 'proxy.conf.json' },
-            },
-          },
-        },
-      },
-    });
-    const tree = makeTree({ 'package.json': BASE_PKG, 'angular.json': withProxy });
-    const result = await runSchematic(tree);
-    // Content should be unchanged (same proxyConfig value)
-    const angular = JSON.parse(result.readText('angular.json')) as Record<string, unknown>;
-    const projects = angular['projects'] as Record<string, Record<string, unknown>>;
-    const serve = (projects['my-app']['architect'] as Record<string, Record<string, unknown>>)['serve'];
-    expect((serve['options'] as Record<string, unknown>)['proxyConfig']).toBe('proxy.conf.json');
-  });
-
-  it('skips vite.config.ts setup when angular.json present', async () => {
-    const tree = makeTree({ 'package.json': BASE_PKG, 'angular.json': ANGULAR_JSON });
-    const result = await runSchematic(tree);
-    // Should NOT create vite.config.ts (Angular doesn't load vite plugins)
-    expect(result.exists('vite.config.ts')).toBe(false);
-  });
-});
+// ─── addGitignore ─────────────────────────────────────────────────────────────
 
 describe('ng-add schematic — addGitignore', () => {
   it('creates .gitignore with .ng-annotate/ when none exists', async () => {

package/schematics/ng-add/index.ts

@@ -9,6 +9,8 @@ interface Options {
 }
 
 const MIN_ANGULAR_MAJOR = 21;
+const NG_ANNOTATE_BUILDER = '@ng-annotate/angular:dev-server';
+const ANGULAR_DEV_SERVER_BUILDER = '@angular/build:dev-server';
 
 function checkAngularVersion(): Rule {
   return (tree: Tree) => {
@@ -33,22 +35,14 @@ function checkAngularVersion(): Rule {
   };
 }
 
-function addProxyConfig(): Rule {
+function updateAngularJsonBuilder(): Rule {
   return (tree: Tree, context: SchematicContext) => {
-    // Create proxy.conf.json
-    const proxyPath = 'proxy.conf.json';
-    if (!tree.exists(proxyPath)) {
-      tree.create(
-        proxyPath,
-        JSON.stringify({ '/__annotate': { target: 'ws://localhost:4201', ws: true } }, null, 2) + '\n',
-      );
-      context.logger.info('✅ Created proxy.conf.json');
-    }
-
-    // Update angular.json serve options
     const angularJsonPath = 'angular.json';
     if (!tree.exists(angularJsonPath)) {
-      context.logger.warn('⚠️  Could not find angular.json — add proxyConfig manually');
+      context.logger.warn(
+        '⚠️  Could not find angular.json — update the serve builder manually:\n' +
+          `    "builder": "${NG_ANNOTATE_BUILDER}"`,
+      );
       return;
     }
 
@@ -68,12 +62,25 @@ function addProxyConfig(): Rule {
       const serve = architect['serve'] as Record<string, unknown> | undefined;
       if (!serve) continue;
 
-      const options = (serve['options'] ?? {}) as Record<string, unknown>;
-      if (options['proxyConfig']) continue;
+      const currentBuilder = serve['builder'] as string | undefined;
+
+      if (currentBuilder === NG_ANNOTATE_BUILDER) {
+        context.logger.info(`ng-annotate builder already configured in ${projectName}, skipping.`);
+        continue;
+      }
+
+      if (currentBuilder !== ANGULAR_DEV_SERVER_BUILDER) {
+        context.logger.warn(
+          `⚠️  Project "${projectName}" uses builder "${String(currentBuilder)}" which is not ` +
+            `"${ANGULAR_DEV_SERVER_BUILDER}". Skipping automatic builder update — ` +
+            `set it to "${NG_ANNOTATE_BUILDER}" manually if compatible.`,
+        );
+        continue;
+      }
 
-      serve['options'] = { ...options, proxyConfig: 'proxy.conf.json' };
+      serve['builder'] = NG_ANNOTATE_BUILDER;
       changed = true;
-      context.logger.info(`✅ Added proxyConfig to angular.json (${projectName})`);
+      context.logger.info(`✅ Updated angular.json serve builder for "${projectName}"`);
     }
 
     if (changed) {
@@ -82,46 +89,6 @@ function addProxyConfig(): Rule {
   };
 }
 
-function addVitePlugin(): Rule {
-  return (tree: Tree, context: SchematicContext) => {
-    // Angular CLI does not load vite.config.ts plugins — skip for Angular projects
-    if (tree.exists('angular.json')) {
-      context.logger.info('Angular project detected — skipping vite.config.ts setup (using proxy instead).');
-      return;
-    }
-
-    const candidates = ['vite.config.ts', 'vite.config.js', 'vite.config.mts'];
-    const viteConfigPath = candidates.find((p) => tree.exists(p));
-
-    if (!viteConfigPath) {
-      const created = `import { defineConfig } from 'vite';\nimport { ngAnnotateMcp } from '@ng-annotate/vite-plugin';\n\nexport default defineConfig({\n  plugins: [...ngAnnotateMcp()],\n});\n`;
-      tree.create('vite.config.ts', created);
-      context.logger.info('✅ Created vite.config.ts with ngAnnotateMcp()');
-      return;
-    }
-
-    let content = tree.read(viteConfigPath)!.toString('utf-8');
-
-    if (content.includes('@ng-annotate/vite-plugin')) {
-      context.logger.info('@ng-annotate/vite-plugin vite plugin already present, skipping.');
-      return;
-    }
-
-    content = insertAfterLastImport(content, "import { ngAnnotateMcp } from '@ng-annotate/vite-plugin';");
-
-    if (/plugins\s*:\s*\[/.test(content)) {
-      // Existing plugins array — prepend into it
-      content = content.replace(/plugins\s*:\s*\[/, 'plugins: [...ngAnnotateMcp(), ');
-    } else {
-      // No plugins array — inject one into defineConfig({...})
-      content = content.replace(/defineConfig\(\s*\{/, 'defineConfig({\n  plugins: [...ngAnnotateMcp()],');
-    }
-
-    tree.overwrite(viteConfigPath, content);
-    context.logger.info(`✅ Added ngAnnotateMcp() to ${viteConfigPath}`);
-  };
-}
-
 function addProviders(): Rule {
   return (tree: Tree, context: SchematicContext) => {
     const candidates = [
@@ -301,14 +268,19 @@ function addDevDependency(): Rule {
       string,
       Record<string, string>
     >;
+    pkg['dependencies'] ??= {};
     pkg['devDependencies'] ??= {};
 
     let changed = false;
 
-    if (!pkg['devDependencies']['@ng-annotate/vite-plugin']) {
-      pkg['devDependencies']['@ng-annotate/vite-plugin'] = 'latest';
+    // ng add installs @ng-annotate/angular into dependencies by default.
+    // Move it to devDependencies — it is a dev-only tool.
+    const ngAnnotateVersion = pkg['dependencies']['@ng-annotate/angular'];
+    if (ngAnnotateVersion && !pkg['devDependencies']['@ng-annotate/angular']) {
+      pkg['devDependencies']['@ng-annotate/angular'] = ngAnnotateVersion;
+      delete pkg['dependencies']['@ng-annotate/angular'];
       changed = true;
-      context.logger.info('✅ Added @ng-annotate/vite-plugin to devDependencies');
+      context.logger.info('✅ Moved @ng-annotate/angular to devDependencies');
     }
 
     if (!pkg['devDependencies']['@ng-annotate/mcp-server']) {
@@ -352,8 +324,7 @@ export default function (options: Options): Rule {
     return chain([
       checkAngularVersion(),
       addDevDependency(),
-      addProxyConfig(),
-      addVitePlugin(),
+      updateAngularJsonBuilder(),
       addProviders(),
       addMcpConfig(options),
       addGitignore(),