Release Angular 21.0.0 compatibility line

Author: andrefarzat

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [21.0.0] - 2026-08-20
+### Changed
+- Added Angular 21 support using the official Angular 20→21 migrations.
+- Updated Angular, CLI, and build tooling to 21.2.21, ng-packagr to 21.2.7,
+  and Angular ESLint to 21.4.
+- Changed the Angular peer range and safe publish tag for the `v21` line.
+
+
 ## [20.0.1] - 2026-08-20
 ### Fixed
 - Exported the documented CDN/window modules and Plotly public types.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-plotly.js",
-  "version": "20.0.1",
+  "version": "21.0.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -15,31 +15,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "20.3.29",
-    "@angular/core": "20.3.29",
-    "@angular/platform-browser": "20.3.29",
+    "@angular/common": "21.2.21",
+    "@angular/core": "21.2.21",
+    "@angular/platform-browser": "21.2.21",
     "plotly.js-dist": "2.35.3",
     "rxjs": "7.8.2",
     "tslib": "2.8.1",
     "zone.js": "0.15.1"
   },
   "devDependencies": {
-    "@angular/build": "20.3.34",
-    "@angular/cli": "20.3.34",
-    "@angular/compiler": "20.3.29",
-    "@angular/compiler-cli": "20.3.29",
+    "@angular/build": "21.2.21",
+    "@angular/cli": "21.2.21",
+    "@angular/compiler": "21.2.21",
+    "@angular/compiler-cli": "21.2.21",
     "@eslint/js": "9.39.5",
     "@types/jasmine": "5.1.9",
     "@types/node": "24.10.1",
-    "angular-eslint": "20.7.0",
+    "angular-eslint": "21.4.0",
     "eslint": "9.39.5",
     "jasmine-core": "5.10.0",
     "karma": "6.4.4",
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.3.0",
-    "ng-packagr": "20.3.2",
+    "ng-packagr": "21.2.7",
     "typescript": "5.9.3",
     "typescript-eslint": "8.67.0"
   },

package.json

@@ -1,7 +1,10 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { platformBrowser } from '@angular/platform-browser';
 
 import { AppModule } from './app/app.module';
 
 
-platformBrowser().bootstrapModule(AppModule)
+platformBrowser().bootstrapModule(AppModule, {
+  applicationProviders: [provideZoneChangeDetection()],
+})
   .catch(err => console.error(err));

projects/demo_app/src/main.ts

@@ -1,16 +1,16 @@
 {
   "name": "angular-plotly.js",
-  "version": "20.0.1",
+  "version": "21.0.0",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=20.0.0 <21.0.0",
-    "@angular/core": ">=20.0.0 <21.0.0"
+    "@angular/common": ">=21.0.0 <22.0.0",
+    "@angular/core": ">=21.0.0 <22.0.0"
   },
   "dependencies": {
     "tslib": "^2.8.1"
   },
   "publishConfig": {
     "access": "public",
-    "tag": "angular20"
+    "tag": "angular21"
   }
 }

projects/plotly/package.json

@@ -7,11 +7,7 @@
     "outDir": "../../out-tsc/lib",
     "declaration": true,
     "inlineSources": true,
-    "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
+    "types": []
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,

projects/plotly/tsconfig.lib.json

@@ -10,14 +10,17 @@ const requiredFiles = [
   'LICENSE',
   'CHANGELOG.md',
   'angular-plotly.png',
-  'index.d.ts',
   'package.json',
 ];
 
 await Promise.all(requiredFiles.map(file => access(resolve(output, file))));
 
 const rootPackage = JSON.parse(await readFile(resolve(root, 'package.json'), 'utf8'));
 const libraryPackage = JSON.parse(await readFile(resolve(output, 'package.json'), 'utf8'));
+const declarationsPath = libraryPackage.typings ?? 'index.d.ts';
+const bundlePath = libraryPackage.module;
+requiredFiles.push(declarationsPath, bundlePath);
+await Promise.all([declarationsPath, bundlePath].map(file => access(resolve(output, file))));
 if (rootPackage.version !== libraryPackage.version) {
   throw new Error(`Package versions differ: root=${rootPackage.version}, library=${libraryPackage.version}`);
 }
@@ -30,7 +33,7 @@ for (const dependency of ['@angular/common', '@angular/core']) {
   }
 }
 
-const declarations = await readFile(resolve(output, 'index.d.ts'), 'utf8');
+const declarations = await readFile(resolve(output, declarationsPath), 'utf8');
 for (const symbol of [
   'PlotlyComponent',
   'PlotlyModule',

scripts/verify-package.mjs

@@ -17,10 +17,6 @@
       "importHelpers": true,
       "target": "ES2022",
       "module": "es2020",
-      "lib": [
-        "es2020",
-        "dom"
-      ],
       "paths": {
         "angular-plotly.js": [
           "dist/plotly",