Update to Angular 18 + ESLint 9

.eslintrc.json

@@ -1,41 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": ["projects/**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts"],
-      "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
-      "rules": {
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "app",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "app",
-            "style": "kebab-case"
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.html"],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended",
-        "plugin:@angular-eslint/template/accessibility"
-      ],
-      "rules": {}
-    }
-  ]
-}

eslint.config.js

@@ -0,0 +1,44 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+      "@typescript-eslint/no-inferrable-types": "off",
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);

package.json

@@ -12,46 +12,40 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.7",
-    "@angular/cdk": "^17.3.7",
-    "@angular/common": "^17.3.7",
-    "@angular/compiler": "^17.3.7",
-    "@angular/core": "^17.3.7",
-    "@angular/forms": "^17.3.7",
-    "@angular/platform-browser": "^17.3.7",
-    "@angular/platform-browser-dynamic": "^17.3.7",
-    "@angular/router": "^17.3.7",
+    "@angular/animations": "^18.0.1",
+    "@angular/cdk": "^18.0.3",
+    "@angular/common": "^18.0.1",
+    "@angular/compiler": "^18.0.1",
+    "@angular/core": "^18.0.1",
+    "@angular/forms": "^18.0.3",
+    "@angular/platform-browser": "^18.0.1",
+    "@angular/platform-browser-dynamic": "^18.0.3",
+    "@angular/router": "^18.0.3",
     "@codemirror/collab": "^6.1.1",
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/language": "^6.10.2",
     "@codemirror/legacy-modes": "^6.4.0",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.26.3",
+    "@codemirror/view": "^6.28.1",
     "@emailjs/browser": "^4.3.3",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "@sandkasten/codemirror6-editor": "^0.0.2",
+    "@sandkasten/codemirror6-editor": "^0.0.3",
     "ansi-to-html": "^0.7.2",
     "codemirror": "^6.0.1",
     "rxjs": "~7.8.1",
-    "sse.js": "^2.4.1",
-    "tslib": "^2.6.2",
-    "zone.js": "~0.14.5"
+    "sse.js": "^2.5.0",
+    "tslib": "^2.6.3",
+    "zone.js": "~0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.7",
-    "@angular-eslint/builder": "^17.4.0",
-    "@angular-eslint/eslint-plugin": "^17.4.0",
-    "@angular-eslint/eslint-plugin-template": "^17.4.0",
-    "@angular-eslint/schematics": "^17.4.0",
-    "@angular-eslint/template-parser": "^17.4.0",
-    "@angular/cli": "~17.3.7",
-    "@angular/compiler-cli": "^17.3.7",
+    "@angular-devkit/build-angular": "^18.0.4",
+    "@angular/cli": "~18.0.2",
+    "@angular/compiler-cli": "^18.0.3",
     "@types/jasmine": "~5.1.4",
-    "@typescript-eslint/eslint-plugin": "^7.9.0",
-    "@typescript-eslint/parser": "^7.9.0",
-    "eslint": "^8.57.0",
+    "angular-eslint": "18.0.1",
+    "eslint": "^9.5.0",
     "jasmine-core": "~5.1.2",
     "karma": "~6.4.2",
     "karma-chrome-launcher": "~3.2.0",
@@ -59,7 +53,8 @@
     "karma-firefox-launcher": "^2.1.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "prettier": "^3.2.5",
-    "typescript": "~5.4.5"
+    "prettier": "^3.3.2",
+    "typescript": "~5.4.5",
+    "typescript-eslint": "^8.0.0-alpha.30"
   }
 }

src/app/components/editor/editor.component.ts

@@ -151,8 +151,8 @@ export class EditorComponent {
 
     this.client = new WebSocket(`${environment.webSocketUrl}/live/${idRoom}`);
     this.client.addEventListener('open', async () => {
-      let conn = new Connection(this.client!);
-      let { version, doc } = await getDocument(conn);
+      const conn = new Connection(this.client!);
+      const { version, doc } = await getDocument(conn);
 
       this.codemirror.editor?.dispatch({
         changes: {

src/app/components/header/header.component.ts

@@ -1,7 +1,6 @@
 import {
   Component,
   ElementRef,
-  HostListener,
   Input,
   ViewChild,
 } from '@angular/core';

src/app/components/landing-page/landing-page.component.ts

@@ -21,9 +21,7 @@ export class LandingPageComponent implements OnInit {
 
   ngOnInit() {
     this.themeService.isDarkTheme.subscribe((value) => {
-      value
-        ? (this.themeClass = 'dark-theme')
-        : (this.themeClass = 'light-theme');
+      this.themeClass = value ? 'dark-theme' : 'light-theme';
     });
   }
   // Si click sur "Run", on redirige vers la page d'édition

src/app/services/backendService.service.ts

@@ -3,10 +3,10 @@ import { SSE } from 'sse.js';
 import { Observable, Subject } from 'rxjs';
 import { environment } from '../../environments/environment';
 
-export type ExecutionMessage = {
+export interface ExecutionMessage {
   type: 'stdout' | 'stderr' | 'exit';
   text: string;
-};
+}
 
 @Injectable({
   providedIn: 'root',
@@ -16,8 +16,6 @@ export class BackendService {
 
   private resultSubject = new Subject<ExecutionMessage>();
 
-  constructor() {}
-
   async createRoom(code: string) {
     const reponse = await fetch(`${this.apiUrl}/live`, {
       method: 'POST',

src/app/services/connection.service.ts

@@ -47,7 +47,7 @@ function pushUpdates(
   fullUpdates: readonly Update[]
 ): Promise<boolean> {
   // Strip off transaction data
-  let updates = fullUpdates.map((u) => ({
+  const updates = fullUpdates.map((u) => ({
     clientID: u.clientID,
     changes: u.changes.toJSON(),
   }));
@@ -76,7 +76,7 @@ export function getDocument(
 }
 
 export function peerExtension(startVersion: number, connection: Connection) {
-  let plugin = ViewPlugin.fromClass(
+  const plugin = ViewPlugin.fromClass(
     class {
       private pushing = false;
       private done = false;
@@ -90,11 +90,11 @@ export function peerExtension(startVersion: number, connection: Connection) {
       }
 
       async push() {
-        let updates = sendableUpdates(this.view.state);
+        const updates = sendableUpdates(this.view.state);
 
         if (this.pushing || !updates.length) return;
         this.pushing = true;
-        let version = getSyncedVersion(this.view.state);
+        const version = getSyncedVersion(this.view.state);
         await pushUpdates(connection, version, updates);
         this.pushing = false;
         // Regardless of whether the push failed or new updates came in
@@ -105,8 +105,8 @@ export function peerExtension(startVersion: number, connection: Connection) {
 
       async pull() {
         while (!this.done) {
-          let version = getSyncedVersion(this.view.state);
-          let updates = await pullUpdates(connection, version);
+          const version = getSyncedVersion(this.view.state);
+          const updates = await pullUpdates(connection, version);
           this.view.dispatch(receiveUpdates(this.view.state, updates));
         }
       }

src/main.ts

@@ -2,11 +2,7 @@ import { createTranslateLoader } from './app/app.module';
 import { importProvidersFrom } from '@angular/core';
 import { AppComponent } from './app/app.component';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import {
-  withInterceptorsFromDi,
-  provideHttpClient,
-  HttpClient,
-} from '@angular/common/http';
+import { withInterceptorsFromDi, provideHttpClient, HttpClient } from '@angular/common/http';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 import { TranslationService } from './app/services/translation.service';

tsconfig.json

@@ -6,20 +6,19 @@
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
+    "esModuleInterop": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
-    "allowSyntheticDefaultImports": true,
     "lib": ["ES2022", "dom"],
   },
   "angularCompilerOptions": {