Angular 18.1 and all JS deps #10322

Except:

- @types/node, we run on node 18

Author: PowerKiKi

.eslintrc.json

@@ -73,6 +73,38 @@
                         }
                     }
                 ],
+                "@typescript-eslint/restrict-plus-operands": [
+                    "error",
+                    {
+                        // Allow some flexibility
+                        "allowAny": true,
+                        "allowBoolean": true,
+                        "allowNullish": true,
+                        "allowNumberAndString": true
+                    }
+                ],
+                "@typescript-eslint/restrict-template-expressions": [
+                    "error",
+                    {
+                        // Allow some flexibility
+                        "allowAny": true,
+                        "allowBoolean": true,
+                        "allowNullish": true,
+                        "allowNumber": true
+                    }
+                ],
+                "@typescript-eslint/no-unused-expressions": [
+                    "error",
+                    {
+                        "allowTernary": true
+                    }
+                ],
+                "@typescript-eslint/no-unused-vars": [
+                    "error",
+                    {
+                        "caughtErrors": "none"
+                    }
+                ],
                 "no-restricted-globals": [
                     "error",
                     "atob",

package.json

@@ -16,46 +16,41 @@
         "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": "^17.1.1",
-        "@angular/cdk": "^17.1.1",
-        "@angular/common": "^17.1.1",
-        "@angular/compiler": "^17.1.1",
-        "@angular/core": "^17.1.1",
-        "@angular/forms": "^17.1.1",
-        "@angular/material": "^17.1.1",
-        "@angular/platform-browser": "^17.1.1",
-        "@angular/platform-browser-dynamic": "^17.1.1",
+        "@angular/animations": "^18.1.0",
+        "@angular/cdk": "^18.1.0",
+        "@angular/common": "^18.1.0",
+        "@angular/compiler": "^18.1.0",
+        "@angular/core": "^18.1.0",
+        "@angular/forms": "^18.1.0",
+        "@angular/material": "^18.1.0",
+        "@angular/platform-browser": "^18.1.0",
+        "@angular/platform-browser-dynamic": "^18.1.0",
         "rxjs": "~7.8.1",
         "tslib": "^2.6.2",
         "zone.js": "~0.14.3"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "^17.1.1",
-        "@angular-eslint/builder": "17.2.1",
-        "@angular-eslint/eslint-plugin": "17.2.1",
-        "@angular-eslint/eslint-plugin-template": "17.2.1",
-        "@angular-eslint/schematics": "17.2.1",
-        "@angular-eslint/template-parser": "17.2.1",
-        "@angular/cli": "^17.1.1",
-        "@angular/compiler-cli": "^17.1.1",
-        "@angular/language-service": "^17.1.1",
+        "@angular-devkit/build-angular": "^18.1.0",
+        "@angular/cli": "^18.1.0",
+        "@angular/compiler-cli": "^18.1.0",
+        "@angular/language-service": "^18.1.0",
         "@playwright/test": "^1.41.1",
         "@types/jasmine": "~5.1.4",
         "@types/jasminewd2": "~2.0.13",
         "@types/node": "^18",
-        "@typescript-eslint/eslint-plugin": "^6.10.0",
-        "@typescript-eslint/parser": "^6.10.0",
-        "eslint": "^8.53.0",
+        "angular-eslint": "18.1.0",
+        "eslint": "^9.6.0",
         "jasmine-core": "~5.1.1",
         "jasmine-spec-reporter": "~7.0.0",
         "karma": "~6.4.2",
         "karma-chrome-launcher": "~3.2.0",
         "karma-coverage-istanbul-reporter": "~3.0.2",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "^2.1.0",
-        "ng-packagr": "^17.1.2",
-        "prettier": "3.2.5",
+        "ng-packagr": "^18.1.0",
+        "prettier": "3.3.3",
         "ts-node": "~10.9.2",
-        "typescript": "~5.3.3"
+        "typescript": "~5.5.3",
+        "typescript-eslint": "8.0.0-alpha.38"
     }
 }

projects/fab-speed-dial/package.json

@@ -7,9 +7,9 @@
         "tslib": "^2.6"
     },
     "peerDependencies": {
-        "@angular/common": "^17.1",
-        "@angular/core": "^17.1",
-        "@angular/material": "^17.1",
+        "@angular/common": "^18.1",
+        "@angular/core": "^18.1",
+        "@angular/material": "^18.1",
         "rxjs": "^7.8.0"
     }
 }

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

@@ -77,7 +77,7 @@ export class EcoFabSpeedDialActionsComponent implements AfterContentInit {
     private initButtonStates(): void {
         this._buttons.forEach((button, i) => {
             this.renderer.addClass(getHostElement(button), 'eco-fab-action-item');
-            this.changeElementStyle(getHostElement(button), 'z-index', '' + (Z_INDEX_ITEM - i));
+            this.changeElementStyle(getHostElement(button), 'z-index', '' + (Z_INDEX_ITEM - i).toString());
         });
     }
 
@@ -98,7 +98,7 @@ export class EcoFabSpeedDialActionsComponent implements AfterContentInit {
                 }
 
                 const hostElement = getHostElement(button);
-                this.changeElementStyle(hostElement, 'transition-delay', transitionDelay + 'ms');
+                this.changeElementStyle(hostElement, 'transition-delay', transitionDelay.toString() + 'ms');
                 this.changeElementStyle(hostElement, 'opacity', '1');
                 this.changeElementStyle(hostElement, 'transform', transform);
             });
@@ -126,12 +126,12 @@ export class EcoFabSpeedDialActionsComponent implements AfterContentInit {
                 transform = 'scale(0)';
                 opacity = '0';
             } else {
-                transform = this.getTranslateFunction(55 * (i + 1) - i * 5 + 'px');
+                transform = this.getTranslateFunction((55 * (i + 1) - i * 5).toString() + 'px');
             }
 
             const hostElement = getHostElement(button);
 
-            this.changeElementStyle(hostElement, 'transition-delay', transitionDelay + 'ms');
+            this.changeElementStyle(hostElement, 'transition-delay', transitionDelay.toString() + 'ms');
             this.changeElementStyle(hostElement, 'opacity', opacity);
             this.changeElementStyle(hostElement, 'transform', transform);
 

src/index.html

@@ -10,6 +10,7 @@
         <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
     </head>
     <body>
-        <app-root />
+        <!-- eslint-disable-next-line @angular-eslint/template/prefer-self-closing-tags -->
+        <app-root></app-root>
     </body>
 </html>

src/main.ts

@@ -35,4 +35,4 @@ bootstrapApplication(AppComponent, {
             FormsModule,
         ),
     ],
-}).catch(err => console.error(err));
+}).catch((err: unknown) => console.error(err));

tsconfig.json

@@ -5,6 +5,7 @@
         "baseUrl": "./",
         "outDir": "./dist/out-tsc",
         "forceConsistentCasingInFileNames": true,
+        "esModuleInterop": true,
         "strict": true,
         "noImplicitOverride": true,
         "noPropertyAccessFromIndexSignature": true,
@@ -16,7 +17,6 @@
             "@ecodev/fab-speed-dial/*": ["dist/fab-speed-dial/*"]
         },
         "declaration": false,
-        "downlevelIteration": true,
         "experimentalDecorators": true,
         "moduleResolution": "node",
         "importHelpers": true,