INT-3378: Support Angular v21 (#442)

* INT-3381: Support Angular v21

* Update readme

* Only update moduleresolution for storybook

* Add ngzone detection to fix tests as angular v21 is zoneless

* Fix storybook and project builds

* Update readme

* Correct the target version of not yet zoneless heading

Author: tiny-ben-tran

.storybook/tsconfig.json

@@ -7,6 +7,8 @@
     // ERROR in @ephox/sugar/lib/main/ts/ephox/sugar/api/dom/Replication.d.ts
     "skipLibCheck": true,
     "types": ["node"],
+    "moduleResolution": "bundler",
+    "module": "ES2022",
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "target": "ES2022"

README.md

@@ -13,13 +13,31 @@ This package is a thin wrapper around [TinyMCE](https://github.com/tinymce/tinym
 
 |Angular version|`tinymce-angular` version|
 |---            |---                      |
-|>=16.x <=20.x  |8+                       |
+|>=16.x <=21.x  |8+                       |
 |14+            |7.x                      |
 |13+            |6.x                      |
 |9+             |4.x                      |
 |<= 8           |3.x                      |
 |< 5            | Not supported           |
 
+### Not yet Zoneless ( >=Angular v20.2 )
+* This integration still requires `zone.js` to ensure backward compatibility to older Angular versions. Therefore, your application will need to include `provideZoneDetection()` its providers like below:
+
+```jsx
+import { NgModule, provideZoneChangeDetection } from '@angular/core';
+
+@NgModule({
+  declarations: [
+    // ...
+  ],
+  imports: [
+   // ...
+  ],
+  providers: [ provideZoneChangeDetection() ],
+  bootstrap: [ AppComponent ]
+})
+```
+
 ### Issues
 
 Have you found an issue with tinymce-angular or do you have a feature request? 

package.json

@@ -15,19 +15,19 @@
   },
   "private": true,
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20",
-    "@angular-devkit/core": "^20",
-    "@angular/animations": "^20",
-    "@angular/cdk": "^20",
-    "@angular/cli": "^20",
-    "@angular/common": "^20",
-    "@angular/compiler": "^20",
-    "@angular/compiler-cli": "^20",
-    "@angular/core": "^20",
-    "@angular/forms": "^20",
-    "@angular/language-service": "^20",
-    "@angular/material": "^20",
-    "@angular/platform-browser": "^20",
+    "@angular-devkit/build-angular": "^21.0.5",
+    "@angular-devkit/core": "^21.0.5",
+    "@angular/animations": "^21.0.8",
+    "@angular/cdk": "^21.0.6",
+    "@angular/cli": "^21.0.5",
+    "@angular/common": "^21.0.8",
+    "@angular/compiler": "^21.0.8",
+    "@angular/compiler-cli": "^21.0.8",
+    "@angular/core": "^21.0.8",
+    "@angular/forms": "^21.0.8",
+    "@angular/language-service": "^21.0.8",
+    "@angular/material": "^21.0.6",
+    "@angular/platform-browser": "^21.0.8",
     "@babel/core": "^7.24.9",
     "@ephox/agar": "^8.0.1",
     "@ephox/bedrock-client": "^14.1.1",

tinymce-angular-component/src/test/ts/alien/InitTestEnvironment.ts

@@ -4,7 +4,16 @@ import 'zone.js/plugins/fake-async-test';
 
 import { TestBed } from '@angular/core/testing';
 import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
+import { NgModule, provideZoneChangeDetection } from '@angular/core';
 
-TestBed.initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
-  teardown: { destroyAfterEach: true },
-});
+@NgModule({
+  providers: [ provideZoneChangeDetection() ],
+})
+class AppTestingModule {}
+
+TestBed.initTestEnvironment(
+  [ BrowserTestingModule, AppTestingModule ], platformBrowserTesting(),
+  {
+    teardown: { destroyAfterEach: true },
+  }
+);

tinymce-angular-component/src/test/ts/alien/TestHooks.ts

@@ -69,6 +69,7 @@ export const editorHook = <T = unknown>(component: Type<T>, moduleDef: TestModul
     fixture.detectChanges();
 
     return firstValueFrom(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       editorComponent.onInit.pipe(
         throwTimeout(10000, `Timed out waiting for editor to load`),
         switchMap(
@@ -79,10 +80,10 @@ export const editorHook = <T = unknown>(component: Type<T>, moduleDef: TestModul
               // after global tinymce is removed in a clean up. Specifically, it happens when unloading/loading different versions of TinyMCE
                 if (editor.licenseKeyManager) {
                   editor.licenseKeyManager.validate({}).then(() => {
-                    resolve(editor);
+                    resolve(editor as Editor);
                   }).catch((reason) => console.warn(reason));
                 } else {
-                  resolve(editor);
+                  resolve(editor as Editor);
                 }
               });
             })

tsconfig.json

@@ -4,15 +4,15 @@
     "baseUrl": ".",
     "sourceMap": true,
     "declaration": false,
-    "moduleResolution": "node",
+    "moduleResolution": "nodenext",
     "noUnusedLocals": true,
     "strict": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "es5",
-    "module": "es2015",
+    "module": "nodenext",
     "typeRoots": [
-      "node_modules/@types"
+     "node_modules/@types"
     ],
     "lib": [
       "es2017",