@ng-annotate/angular 0.5.0 → 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.0",
+  "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;
             }
@@ -239,8 +245,18 @@ 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;
+        // 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('✅ Moved @ng-annotate/angular to devDependencies');
+        }
         if (!pkg['devDependencies']['@ng-annotate/mcp-server']) {
             pkg['devDependencies']['@ng-annotate/mcp-server'] = 'latest';
             changed = true;

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

@@ -97,6 +97,40 @@ function makeTree(files: Record<string, string>): Tree {
   return tree;
 }
 
+// ─── 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);
+    const parsed = JSON.parse(result.readText('package.json')) as Record<string, Record<string, string>>;
+    expect(parsed['devDependencies']['@ng-annotate/mcp-server']).toBe('latest');
+  });
+
+  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 parsed = JSON.parse(result.readText('package.json')) as Record<string, Record<string, string>>;
+    expect(parsed['devDependencies']['@ng-annotate/mcp-server']).toBe('^0.4.0');
+  });
+});
+
 // ─── updateAngularJsonBuilder ─────────────────────────────────────────────────
 
 describe('ng-add schematic — updateAngularJsonBuilder', () => {
@@ -130,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;
@@ -268,10 +275,21 @@ function addDevDependency(): Rule {
       string,
       Record<string, string>
     >;
+    pkg['dependencies'] ??= {};
     pkg['devDependencies'] ??= {};
 
     let changed = false;
 
+    // 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('✅ Moved @ng-annotate/angular to devDependencies');
+    }
+
     if (!pkg['devDependencies']['@ng-annotate/mcp-server']) {
       pkg['devDependencies']['@ng-annotate/mcp-server'] = 'latest';
       changed = true;