@ng-annotate/angular 0.5.1 → 0.5.3

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/dist/builders/dev-server/schema.json

@@ -3,5 +3,125 @@
   "title": "ng-annotate Dev Server",
   "description": "Wraps @angular/build:dev-server with integrated ng-annotate WebSocket and manifest support.",
   "type": "object",
-  "properties": {}
+  "properties": {
+    "buildTarget": {
+      "type": "string",
+      "description": "A build builder target to serve in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
+      "pattern": "^[^:\\s]*:[^:\\s]*(:[^\\s]+)?$"
+    },
+    "port": {
+      "type": "number",
+      "description": "Port to listen on.",
+      "default": 4200
+    },
+    "host": {
+      "type": "string",
+      "description": "Host to listen on.",
+      "default": "localhost"
+    },
+    "proxyConfig": {
+      "type": "string",
+      "description": "Proxy configuration file. For more information, see https://angular.dev/tools/cli/serve#proxying-to-a-backend-server."
+    },
+    "ssl": {
+      "type": "boolean",
+      "description": "Serve using HTTPS.",
+      "default": false
+    },
+    "sslKey": {
+      "type": "string",
+      "description": "SSL key to use for serving HTTPS."
+    },
+    "sslCert": {
+      "type": "string",
+      "description": "SSL certificate to use for serving HTTPS."
+    },
+    "allowedHosts": {
+      "description": "The hosts that the development server will respond to.",
+      "default": [],
+      "oneOf": [
+        {
+          "type": "array",
+          "description": "A list of hosts that the development server will respond to.",
+          "items": { "type": "string" }
+        },
+        {
+          "type": "boolean",
+          "description": "Indicates that all hosts are allowed."
+        }
+      ]
+    },
+    "define": {
+      "description": "Defines global identifiers that will be replaced with a specified constant value when found in any JavaScript or TypeScript code including libraries.",
+      "type": "object",
+      "additionalProperties": { "type": "string" }
+    },
+    "headers": {
+      "type": "object",
+      "description": "Custom HTTP headers to be added to all responses.",
+      "propertyNames": { "pattern": "^[-_A-Za-z0-9]+$" },
+      "additionalProperties": { "type": "string" }
+    },
+    "open": {
+      "type": "boolean",
+      "description": "Opens the url in default browser.",
+      "default": false,
+      "alias": "o"
+    },
+    "verbose": {
+      "type": "boolean",
+      "description": "Adds more details to output logging."
+    },
+    "liveReload": {
+      "type": "boolean",
+      "description": "Whether to reload the page on change, using live-reload.",
+      "default": true
+    },
+    "servePath": {
+      "type": "string",
+      "description": "The pathname where the application will be served."
+    },
+    "hmr": {
+      "type": "boolean",
+      "description": "Enable hot module replacement. Defaults to the value of 'liveReload'."
+    },
+    "watch": {
+      "type": "boolean",
+      "description": "Rebuild on change.",
+      "default": true
+    },
+    "poll": {
+      "type": "number",
+      "description": "Enable and define the file watching poll time period in milliseconds."
+    },
+    "inspect": {
+      "default": false,
+      "description": "Activate debugging inspector.",
+      "oneOf": [
+        { "type": "string" },
+        { "type": "boolean" }
+      ]
+    },
+    "prebundle": {
+      "description": "Enable and control the Vite-based development server's prebundling capabilities.",
+      "default": true,
+      "oneOf": [
+        { "type": "boolean" },
+        {
+          "type": "object",
+          "properties": {
+            "exclude": {
+              "description": "List of package imports that should not be prebundled by the development server.",
+              "type": "array",
+              "items": { "type": "string" }
+            }
+          },
+          "additionalProperties": false,
+          "required": ["exclude"]
+        }
+      ]
+    }
+  },
+  "additionalProperties": false,
+  "required": ["buildTarget"]
 }

package/package.json

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