@ng-annotate/angular 0.5.1 → 0.5.2

package/README.md

@@ -16,24 +16,31 @@ ng add @ng-annotate/angular
 ```
 
 The schematic configures everything automatically:
-- Adds the Vite plugin to `vite.config.ts`
+- Switches the Angular dev server to `@ng-annotate/angular:dev-server` (handles WebSocket + manifest injection — no separate config file or proxy needed)
 - Adds `provideNgAnnotate()` to `app.config.ts`
-- Creates the MCP config file for your AI editor
+- Creates the MCP config file for your AI editor (`.mcp.json` for Claude Code, `.vscode/mcp.json` for VS Code, or both)
+
+Works with both `@angular/build:dev-server` and the legacy `@angular-devkit/build-angular:dev-server` builder.
 
 ## Manual install
 
 ```bash
-npm install @ng-annotate/angular @ng-annotate/vite-plugin --save-dev
+npm install @ng-annotate/angular --save-dev
 ```
 
-**`vite.config.ts`**
-```ts
-import { defineConfig } from 'vite';
-import { ngAnnotateMcp } from '@ng-annotate/vite-plugin';
-
-export default defineConfig({
-  plugins: [...ngAnnotateMcp()],
-});
+**`angular.json`** — change the serve builder:
+```json
+{
+  "projects": {
+    "your-app": {
+      "architect": {
+        "serve": {
+          "builder": "@ng-annotate/angular:dev-server"
+        }
+      }
+    }
+  }
+}
 ```
 
 **`src/app/app.config.ts`**
@@ -56,7 +63,7 @@ Once installed:
 
 **1. Start the dev server**
 ```bash
-npm run dev
+ng serve
 ```
 
 **2. Start the agent polling loop**
@@ -113,8 +120,8 @@ export class AppModule {}
 
 | Package | Purpose |
 |---|---|
-| [`@ng-annotate/vite-plugin`](https://www.npmjs.com/package/@ng-annotate/vite-plugin) | Vite plugin (WebSocket server, component manifest) |
 | [`@ng-annotate/mcp-server`](https://www.npmjs.com/package/@ng-annotate/mcp-server) | MCP server exposing tools to the AI agent |
+| [`@ng-annotate/vite-plugin`](https://www.npmjs.com/package/@ng-annotate/vite-plugin) | For non-Angular-CLI Vite projects (Vue, Svelte, etc.) |
 
 ## License
 

package/dist/README.md

@@ -16,24 +16,31 @@ ng add @ng-annotate/angular
 ```
 
 The schematic configures everything automatically:
-- Adds the Vite plugin to `vite.config.ts`
+- Switches the Angular dev server to `@ng-annotate/angular:dev-server` (handles WebSocket + manifest injection — no separate config file or proxy needed)
 - Adds `provideNgAnnotate()` to `app.config.ts`
-- Creates the MCP config file for your AI editor
+- Creates the MCP config file for your AI editor (`.mcp.json` for Claude Code, `.vscode/mcp.json` for VS Code, or both)
+
+Works with both `@angular/build:dev-server` and the legacy `@angular-devkit/build-angular:dev-server` builder.
 
 ## Manual install
 
 ```bash
-npm install @ng-annotate/angular @ng-annotate/vite-plugin --save-dev
+npm install @ng-annotate/angular --save-dev
 ```
 
-**`vite.config.ts`**
-```ts
-import { defineConfig } from 'vite';
-import { ngAnnotateMcp } from '@ng-annotate/vite-plugin';
-
-export default defineConfig({
-  plugins: [...ngAnnotateMcp()],
-});
+**`angular.json`** — change the serve builder:
+```json
+{
+  "projects": {
+    "your-app": {
+      "architect": {
+        "serve": {
+          "builder": "@ng-annotate/angular:dev-server"
+        }
+      }
+    }
+  }
+}
 ```
 
 **`src/app/app.config.ts`**
@@ -56,7 +63,7 @@ Once installed:
 
 **1. Start the dev server**
 ```bash
-npm run dev
+ng serve
 ```
 
 **2. Start the agent polling loop**
@@ -113,8 +120,8 @@ export class AppModule {}
 
 | Package | Purpose |
 |---|---|
-| [`@ng-annotate/vite-plugin`](https://www.npmjs.com/package/@ng-annotate/vite-plugin) | Vite plugin (WebSocket server, component manifest) |
 | [`@ng-annotate/mcp-server`](https://www.npmjs.com/package/@ng-annotate/mcp-server) | MCP server exposing tools to the AI agent |
+| [`@ng-annotate/vite-plugin`](https://www.npmjs.com/package/@ng-annotate/vite-plugin) | For non-Angular-CLI Vite projects (Vue, Svelte, etc.) |
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-annotate/angular",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "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",

package/schematics/ng-add/index.js

@@ -41,7 +41,13 @@ 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';
+// Both builders use the same underlying implementation in Angular 17+.
+// @angular-devkit/build-angular:dev-server is the legacy alias that many
+// projects still have in their angular.json even on Angular 21.
+const COMPATIBLE_DEV_SERVER_BUILDERS = [
+    '@angular/build:dev-server',
+    '@angular-devkit/build-angular:dev-server',
+];
 function checkAngularVersion() {
     return (tree) => {
         const pkgPath = 'package.json';
@@ -83,9 +89,9 @@ function updateAngularJsonBuilder() {
                 context.logger.info(`ng-annotate builder already configured in ${projectName}, skipping.`);
                 continue;
             }
-            if (currentBuilder !== ANGULAR_DEV_SERVER_BUILDER) {
+            if (!COMPATIBLE_DEV_SERVER_BUILDERS.includes(currentBuilder ?? '')) {
                 context.logger.warn(`⚠️  Project "${projectName}" uses builder "${String(currentBuilder)}" which is not ` +
-                    `"${ANGULAR_DEV_SERVER_BUILDER}". Skipping automatic builder update — ` +
+                    `a compatible dev-server builder. Skipping automatic builder update — ` +
                     `set it to "${NG_ANNOTATE_BUILDER}" manually if compatible.`);
                 continue;
             }

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

@@ -164,6 +164,27 @@ describe('ng-add schematic — updateAngularJsonBuilder', () => {
     expect((serve['builder'] as string)).toBe('@ng-annotate/angular:dev-server');
   });
 
+  it('updates legacy @angular-devkit/build-angular:dev-server builder too', async () => {
+    const withLegacyBuilder = JSON.stringify({
+      projects: {
+        'my-app': {
+          architect: {
+            serve: {
+              builder: '@angular-devkit/build-angular:dev-server',
+              options: {},
+            },
+          },
+        },
+      },
+    });
+    const tree = makeTree({ 'package.json': BASE_PKG, 'angular.json': withLegacyBuilder });
+    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: {

package/schematics/ng-add/index.ts

@@ -10,7 +10,14 @@ 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';
+
+// Both builders use the same underlying implementation in Angular 17+.
+// @angular-devkit/build-angular:dev-server is the legacy alias that many
+// projects still have in their angular.json even on Angular 21.
+const COMPATIBLE_DEV_SERVER_BUILDERS = [
+  '@angular/build:dev-server',
+  '@angular-devkit/build-angular:dev-server',
+];
 
 function checkAngularVersion(): Rule {
   return (tree: Tree) => {
@@ -69,10 +76,10 @@ function updateAngularJsonBuilder(): Rule {
         continue;
       }
 
-      if (currentBuilder !== ANGULAR_DEV_SERVER_BUILDER) {
+      if (!COMPATIBLE_DEV_SERVER_BUILDERS.includes(currentBuilder ?? '')) {
         context.logger.warn(
           `⚠️  Project "${projectName}" uses builder "${String(currentBuilder)}" which is not ` +
-            `"${ANGULAR_DEV_SERVER_BUILDER}". Skipping automatic builder update — ` +
+            `a compatible dev-server builder. Skipping automatic builder update — ` +
             `set it to "${NG_ANNOTATE_BUILDER}" manually if compatible.`,
         );
         continue;