Angular 20 and all JS deps

Fixes #186

Author: PowerKiKi

angular.json

@@ -11,7 +11,7 @@
             "prefix": "app",
             "architect": {
                 "build": {
-                    "builder": "@angular-devkit/build-angular:application",
+                    "builder": "@angular/build:application",
                     "options": {
                         "outputPath": "dist/demo",
                         "index": "src/index.html",
@@ -52,7 +52,7 @@
                     "defaultConfiguration": "production"
                 },
                 "serve": {
-                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "builder": "@angular/build:dev-server",
                     "options": {
                         "port": 4212
                     },
@@ -67,10 +67,10 @@
                     "defaultConfiguration": "development"
                 },
                 "extract-i18n": {
-                    "builder": "@angular-devkit/build-angular:extract-i18n"
+                    "builder": "@angular/build:extract-i18n"
                 },
                 "test": {
-                    "builder": "@angular-devkit/build-angular:karma",
+                    "builder": "@angular/build:karma",
                     "options": {
                         "polyfills": ["zone.js", "zone.js/testing"],
                         "tsConfig": "tsconfig.spec.json",
@@ -110,7 +110,7 @@
             "prefix": "lib",
             "architect": {
                 "build": {
-                    "builder": "@angular-devkit/build-angular:ng-packagr",
+                    "builder": "@angular/build:ng-packagr",
                     "options": {
                         "project": "projects/fab-speed-dial/ng-package.json"
                     },
@@ -125,7 +125,7 @@
                     "defaultConfiguration": "production"
                 },
                 "test": {
-                    "builder": "@angular-devkit/build-angular:karma",
+                    "builder": "@angular/build:karma",
                     "options": {
                         "tsConfig": "projects/fab-speed-dial/tsconfig.spec.json",
                         "polyfills": ["zone.js", "zone.js/testing"]
@@ -139,5 +139,31 @@
                 }
             }
         }
+    },
+    "schematics": {
+        "@schematics/angular:component": {
+            "type": "component"
+        },
+        "@schematics/angular:directive": {
+            "type": "directive"
+        },
+        "@schematics/angular:service": {
+            "type": "service"
+        },
+        "@schematics/angular:guard": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:interceptor": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:module": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:pipe": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:resolver": {
+            "typeSeparator": "."
+        }
     }
 }

package.json

@@ -16,37 +16,37 @@
         "serve-demo": "echo '💡 open http://localhost:8000/fab-speed-dial/' && mkdir -p dist/server && ln -fs ../demo/browser dist/server/fab-speed-dial && php -S localhost:8000 -t dist/server/"
     },
     "dependencies": {
-        "@angular/animations": "^19.2.13",
-        "@angular/cdk": "19.2.17",
-        "@angular/common": "^19.2.13",
-        "@angular/compiler": "^19.2.13",
-        "@angular/core": "^19.2.13",
-        "@angular/forms": "^19.2.13",
-        "@angular/material": "19.2.17",
-        "@angular/platform-browser": "^19.2.13",
-        "@angular/platform-browser-dynamic": "^19.2.13",
+        "@angular/animations": "^20.0.2",
+        "@angular/cdk": "20.0.2",
+        "@angular/common": "^20.0.2",
+        "@angular/compiler": "^20.0.2",
+        "@angular/core": "^20.0.2",
+        "@angular/forms": "^20.0.2",
+        "@angular/material": "20.0.2",
+        "@angular/platform-browser": "^20.0.2",
+        "@angular/platform-browser-dynamic": "^20.0.2",
         "rxjs": "~7.8.2",
         "tslib": "^2.8.1",
-        "zone.js": "~0.15.0"
+        "zone.js": "~0.15.1"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "^19.2.13",
-        "@angular/cli": "^19.2.13",
-        "@angular/compiler-cli": "^19.2.13",
-        "@playwright/test": "^1.51.1",
-        "@types/jasmine": "~5.1.7",
-        "angular-eslint": "^19.3.0",
-        "eslint": "^9.24.0",
-        "jasmine-core": "~5.6.0",
+        "@angular/build": "^20.0.1",
+        "@angular/cli": "^20.0.1",
+        "@angular/compiler-cli": "^20.0.2",
+        "@playwright/test": "^1.52.0",
+        "@types/jasmine": "~5.1.8",
+        "angular-eslint": "^20.0.0",
+        "eslint": "^9.28.0",
+        "jasmine-core": "~5.8.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
-        "ng-packagr": "^19.2.2",
-        "playwright-ng-schematics": "2.0.2",
+        "ng-packagr": "^20.0.0",
+        "playwright-ng-schematics": "2.1.0",
         "prettier": "^3.5.3",
         "typescript": "~5.8.3",
-        "typescript-eslint": "^8.29.1"
+        "typescript-eslint": "^8.33.1"
     }
 }

projects/fab-speed-dial/package.json

@@ -8,9 +8,9 @@
         "tslib": "^2.8.1"
     },
     "peerDependencies": {
-        "@angular/common": "^19.1.0",
-        "@angular/core": "^19.1.0",
-        "@angular/material": "^19.1",
+        "@angular/common": "^20.0",
+        "@angular/core": "^20.0",
+        "@angular/material": "^20.0",
         "rxjs": "^7.8.2"
     }
 }

projects/fab-speed-dial/src/lib/fab-speed-dial.spec.ts

@@ -123,6 +123,7 @@ describe('FabSpeedDial', () => {
 
 /** Test component that contains an fab speed dial buttons */
 @Component({
+    imports: [EcoFabSpeedDialActionsComponent, EcoFabSpeedDialTriggerComponent, EcoFabSpeedDialComponent],
     template: `
         <div>
             <eco-fab-speed-dial [direction]="direction" [(open)]="open">
@@ -139,7 +140,6 @@ describe('FabSpeedDial', () => {
             <div class="testElement">Test element</div>
         </div>
     `,
-    imports: [EcoFabSpeedDialActionsComponent, EcoFabSpeedDialTriggerComponent, EcoFabSpeedDialComponent],
 })
 class TestAppComponent {
     public readonly fabActions = viewChild.required(EcoFabSpeedDialActionsComponent);

projects/fab-speed-dial/src/lib/fab-speed-dial.ts

@@ -12,19 +12,20 @@ import {
     output,
     Renderer2,
     ViewEncapsulation,
+    DOCUMENT,
 } from '@angular/core';
 import {MatMiniFabAnchor, MatMiniFabButton} from '@angular/material/button';
-import {DOCUMENT} from '@angular/common';
+
 import {forkJoin, fromEvent, Subscription} from 'rxjs';
 import {take} from 'rxjs/operators';
 
 const Z_INDEX_ITEM = 23;
 
 export type Direction = 'up' | 'down' | 'left' | 'right';
 
-type MiniFab = MatMiniFabButton | MatMiniFabAnchor;
+type MiniFab = MatMiniFabButton;
 
-function getHostElement(miniFab: MiniFab): HTMLButtonElement | HTMLAnchorElement {
+function getHostElement(miniFab: MiniFab): HTMLElement {
     return miniFab._elementRef.nativeElement;
 }
 

src/app/app.component.ts

@@ -15,8 +15,6 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrl: './app.component.scss',
     imports: [
         MatToolbarModule,
         MatButtonModule,
@@ -29,6 +27,8 @@ import {MatToolbarModule} from '@angular/material/toolbar';
         EcoFabSpeedDialTriggerComponent,
         EcoFabSpeedDialActionsComponent,
     ],
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.scss',
 })
 export class AppComponent {
     public open = false;

tsconfig.json

@@ -3,6 +3,7 @@
 {
     "compileOnSave": false,
     "compilerOptions": {
+        "esModuleInterop": true,
         "outDir": "./dist/out-tsc",
         "strict": true,
         "paths": {