INT-3378: Support Angular v20

Author: tiny-ben-tran

package.json

@@ -15,31 +15,31 @@
   },
   "private": true,
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19",
+    "@angular-devkit/build-angular": "^20",
     "@angular-devkit/core": "^19",
-    "@angular/animations": "^19",
+    "@angular/animations": "^20",
     "@angular/cdk": "^19",
-    "@angular/cli": "^19",
-    "@angular/common": "^19",
-    "@angular/compiler": "^19",
-    "@angular/compiler-cli": "^19",
-    "@angular/core": "^19",
-    "@angular/forms": "^19",
+    "@angular/cli": "^20",
+    "@angular/common": "^20",
+    "@angular/compiler": "^20",
+    "@angular/compiler-cli": "^20",
+    "@angular/core": "^20",
+    "@angular/forms": "^20",
     "@angular/language-service": "^19",
     "@angular/material": "^19",
-    "@angular/platform-browser": "^19",
-    "@angular/platform-browser-dynamic": "^19",
+    "@angular/platform-browser": "^20",
+    "@angular/platform-browser-dynamic": "^20",
     "@babel/core": "^7.24.9",
     "@ephox/agar": "^8.0.1",
     "@ephox/bedrock-client": "^14.1.1",
     "@ephox/bedrock-server": "^14.1.3",
     "@ephox/sugar": "^9.3.1",
-    "@storybook/addon-essentials": "~8.5",
-    "@storybook/addon-interactions": "~8.5",
+    "@storybook/addon-essentials": "9.0.0-alpha.12",
+    "@storybook/addon-interactions": "^9.0.0-alpha.10",
     "@storybook/addon-links": "^8.2.5",
-    "@storybook/angular": "~8.5",
-    "@storybook/blocks": "^8.2.5",
-    "@storybook/test": "~8.5",
+    "@storybook/angular": "^9",
+    "@storybook/blocks": "^9.0.0-alpha.17",
+    "@storybook/test": "^9.0.0-alpha.2",
     "@tinymce/beehive-flow": "^0.19.0",
     "@tinymce/eslint-plugin": "^3.0.0",
     "@tinymce/miniature": "^6.0.0",
@@ -61,7 +61,7 @@
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
     "rxjs": "^7.8.1",
-    "storybook": "~8.5",
+    "storybook": "^9",
     "tinymce": "^8.0.0",
     "tinymce-4": "npm:tinymce@^4",
     "tinymce-5": "npm:tinymce@^5",
@@ -71,10 +71,13 @@
     "tinymce-8": "npm:tinymce@^8",
     "to-string-loader": "^1.1.5",
     "tslib": "^2.6.2",
-    "typescript": "~5.5.4",
+    "typescript": "^5.9.3",
     "webpack": "^5.95.0",
     "zone.js": "~0.15.0"
   },
   "version": "9.1.2-rc",
-  "name": "@tinymce/tinymce-angular"
+  "name": "@tinymce/tinymce-angular",
+  "dependencies": {
+    "@angular/router": "^20"
+  }
 }

stories/Editor.stories.ts

@@ -12,10 +12,10 @@ import { ViewQueryComponent } from './viewquery/Viewquery.component';
 import { MaterialTabs } from './materialtabs/MaterialTabs.component';
 import { SafePipe } from './pipes/Safe.pipe';
 import { MatTabsModule } from '@angular/material/tabs';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ContainerComponent, ContentProjectionComponent } from './contentprojection/ContentProjection.component';
 import { BindingComponent } from './data-binding/DataBinding.component';
 import { ReadonlyComponent } from './readonly/Readonly.component';
+import { BrowserModule } from '@angular/platform-browser';
 
 const meta: Meta = {
   component: EditorComponent,
@@ -168,7 +168,7 @@ export const MaterialTabsStory: StoryObj<EditorComponent> = {
   name: 'Material Tabs',
   render: () => ({
     moduleMetadata: {
-      imports: [ ReactiveFormsModule, FormsModule, BrowserAnimationsModule, MatTabsModule ],
+      imports: [ ReactiveFormsModule, FormsModule, BrowserModule, MatTabsModule ],
       declarations: [ MaterialTabs ],
     },
     template: `<material-tabs/>`
@@ -180,6 +180,7 @@ export const ContentProjectionStory: StoryObj<EditorComponent> = {
   render: () => ({
     moduleMetadata: {
       declarations: [ ContentProjectionComponent, ContainerComponent ],
+      imports: [ FormsModule ],
     },
     template: `<content-projection/>`
   }),