Upgrade to Angular 17

angular.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
@@ -15,7 +15,7 @@
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "optimization": false,
-            "polyfills": "src/polyfills.ts",
+            "polyfills": "zone.js",
             "assets": [
               {
                 "glob": "**/*",
@@ -59,26 +59,26 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angular-upgrade-guide:build"
+            "buildTarget": "angular-upgrade-guide:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "angular-upgrade-guide:build:production"
+              "buildTarget": "angular-upgrade-guide:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular-upgrade-guide:build"
+            "buildTarget": "angular-upgrade-guide:build"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": "zone.js",
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": ["src/styles.css"],

package.json

@@ -12,37 +12,36 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "14.0.0-next.16",
-    "@angular/cdk": "14.0.0-next.13",
-    "@angular/cli": "14.0.0-next.13",
-    "@angular/common": "14.0.0-next.16",
-    "@angular/compiler": "14.0.0-next.16",
-    "@angular/compiler-cli": "14.0.0-next.16",
-    "@angular/core": "14.0.0-next.16",
-    "@angular/fire": "^7.3.0",
-    "@angular/forms": "14.0.0-next.16",
-    "@angular/material": "14.0.0-next.13",
-    "@angular/platform-browser": "14.0.0-next.16",
-    "@angular/platform-browser-dynamic": "14.0.0-next.16",
-    "@angular/router": "14.0.0-next.16",
-    "@angular/service-worker": "14.0.0-next.16",
+    "@angular/animations": "17.3.7",
+    "@angular/cdk": "17.3.7",
+    "@angular/cli": "17.3.6",
+    "@angular/common": "17.3.7",
+    "@angular/compiler": "17.3.7",
+    "@angular/compiler-cli": "17.3.7",
+    "@angular/core": "17.3.7",
+    "@angular/fire": "17.0.1",
+    "@angular/forms": "17.3.7",
+    "@angular/material": "17.3.7",
+    "@angular/platform-browser": "17.3.7",
+    "@angular/platform-browser-dynamic": "17.3.7",
+    "@angular/router": "17.3.7",
+    "@angular/service-worker": "17.3.7",
     "@types/showdown": "^1.4.32",
-    "core-js": "^2.4.1",
-    "rxjs": "6.6.7",
+    "firebase": "~9.8.1",
+    "rxjs": "~7.8.0",
     "snarkdown": "^1.2.2",
     "tslib": "^2.0.0",
-    "typescript": "4.6.4",
-    "zone.js": "~0.11.5",
-    "firebase": "~9.8.1"
+    "typescript": "5.2",
+    "zone.js": "~0.14.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~14.0.0-next.13",
+    "@angular-devkit/architect": "0.1703.6",
+    "@angular-devkit/build-angular": "~17.3.6",
     "firebase-tools": "~10.8.0",
-    "tslint": "~6.1.0",
-    "@angular-devkit/architect": "0.1400.0-next.13",
     "fuzzy": "^0.1.3",
     "inquirer": "^6.2.2",
-    "inquirer-autocomplete-prompt": "^1.0.1"
+    "inquirer-autocomplete-prompt": "^1.0.1",
+    "tslint": "~6.1.0"
   },
   "prettier": {
     "trailingComma": "es5",

src/app/app.component.html

@@ -49,7 +49,7 @@ <h3>{{'Angular versions'|i18n}}</h3>
             </select>
           </mat-form-field>
 
-          <span style="white-space: nowrap">{{'To'|i18n}} v.
+          <span style="white-space: nowrap; padding-left: 5px">{{'To'|i18n}} v.
           <mat-form-field appearance="outline">
             <select (change)="to = getVersion($event.target.value);  track.send('setting-to','v'+$event.target.value); showUpdatePath()" placeholder="to" matNativeControl>
               <option *ngFor="let version of versions" [value]="version.name" [selected]="version.name === to.name">{{version.name}}</option>

src/main.ts

@@ -1,14 +1,11 @@
-import { enableProdMode, ɵrenderComponent as renderComponent } from '@angular/core';
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
-import { AppComponent } from './app/app.component';
 
 if (environment.production) {
   enableProdMode();
 }
 
 platformBrowserDynamic().bootstrapModule(AppModule);
-
-// renderComponent(AppComponent);

src/test.ts

@@ -14,7 +14,6 @@ import {
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare var __karma__: any;
-declare var require: any;
 
 // Prevent Karma from running prematurely.
 __karma__.loaded = function () {};
@@ -24,9 +23,5 @@ getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting()
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
 // Finally, start Karma to run the tests.
 __karma__.start();

src/tsconfig.app.json

@@ -10,17 +10,17 @@
       "dom"
     ],
     "outDir": "../out-tsc/app",
-    "target": "es2015",
+    "target": "ES2022",
     "module": "es2015",
     "baseUrl": "",
-    "types": []
+    "types": [],
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "enableIvy": true
   },
   "files": [
-    "main.ts",
-    "polyfills.ts"
+    "main.ts"
   ],
   "include": [
     "**/*.d.ts"

src/tsconfig.spec.json

@@ -10,16 +10,16 @@
     ],
     "outDir": "../out-tsc/spec",
     "module": "commonjs",
-    "target": "es6",
+    "target": "ES2022",
     "baseUrl": "",
     "types": [
       "jasmine",
       "node"
-    ]
+    ],
+    "useDefineForClassFields": false
   },
   "files": [
-    "test.ts",
-    "polyfills.ts"
+    "test.ts"
   ],
   "include": [
     "**/*.spec.ts"

tsconfig.json

@@ -9,10 +9,11 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2015",
+    "target": "ES2022",
     "lib": [
       "es2016",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   }
 }