update angular starter to v17

* renaming `my-app` to `app-root` to match what the CLI creates * replacing `zone.js/dist/zone` because of the 0.14.0 breaking changes * setup the application builder
stackblitz · Nov 9, 2023 · 30249c3 · 30249c3
1 parent cfa0522
commit 30249c3
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 60 deletions.
diff --git a/angular/angular.json b/angular/angular.json
@@ -8,40 +8,32 @@
     "demo": {
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "configurations": {
             "development": {
-              "buildOptimizer": false,
               "extractLicenses": false,
               "namedChunks": true,
               "optimization": false,
-              "sourceMap": true,
-              "vendorChunk": true
+              "sourceMap": true
             },
             "production": {
               "aot": true,
-              "buildOptimizer": true,
               "extractLicenses": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
               "namedChunks": false,
               "optimization": true,
               "outputHashing": "all",
-              "sourceMap": false,
-              "vendorChunk": false
+              "sourceMap": false
             }
           },
           "options": {
             "assets": [],
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "browser": "src/main.ts",
             "outputPath": "dist/demo",
             "scripts": [],
-            "styles": ["src/global_styles.css"],
+            "styles": [
+              "src/global_styles.css"
+            ],
             "tsConfig": "src/tsconfig.app.json"
           }
         },
@@ -54,31 +46,44 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "exclude": ["**/node_modules/**"],
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"]
+            "exclude": [
+              "**/node_modules/**"
+            ],
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ]
           }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "development": {
-              "browserTarget": "demo:build:development"
+              "buildTarget": "demo:build:development"
             },
             "production": {
-              "browserTarget": "demo:build:production"
+              "buildTarget": "demo:build:production"
             }
           },
           "defaultConfiguration": "development"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
             "karmaConfig": "src/karma.conf.js",
             "main": "src/test.ts",
-            "polyfills": [],
+            "polyfills": [
+              "zone.js",
+              ".zone.js/testing"
+            ],
             "scripts": [],
-            "styles": ["styles.css"],
+            "styles": [
+              "styles.css"
+            ],
             "tsConfig": "src/tsconfig.spec.json"
           }
         }
@@ -91,4 +96,4 @@
     }
   },
   "version": 1
-}
+}
diff --git a/angular/package.json b/angular/package.json
@@ -10,29 +10,28 @@
     "e2e": "ng e2e"
   },
   "dependencies": {
-    "@angular/animations": "^16.0.1",
-    "@angular/common": "^16.0.1",
-    "@angular/compiler": "^16.0.1",
-    "@angular/core": "^16.0.1",
-    "@angular/forms": "^16.0.1",
-    "@angular/platform-browser": "^16.0.1",
-    "@angular/platform-browser-dynamic": "^16.0.1",
-    "@angular/router": "^16.0.1",
+    "@angular/animations": "~17.0.1",
+    "@angular/common": "~17.0.1",
+    "@angular/compiler": "~17.0.1",
+    "@angular/core": "~17.0.1",
+    "@angular/forms": "~17.0.1",
+    "@angular/platform-browser": "~17.0.1",
+    "@angular/router": "~17.0.1",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0",
-    "zone.js": "^0.13.0"
+    "zone.js": "~0.14.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.1",
-    "@angular/cli": "^16.0.1",
-    "@angular/compiler-cli": "^16.0.1",
-    "@types/jasmine": "~4.0.0",
-    "jasmine-core": "~4.1.0",
-    "karma": "~6.3.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "@angular-devkit/build-angular": "~17.0.0",
+    "@angular/cli": "~17.0.0",
+    "@angular/compiler-cli": "~17.0.1",
+    "@types/jasmine": "~4.3.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.0.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.9.0"
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.2.0"
   }
-}
+}
diff --git a/angular/src/index.html b/angular/src/index.html
@@ -5,6 +5,6 @@
     <meta charset="UTF-8" />
   </head>
   <body>
-    <my-app>Loading...</my-app>
+    <app-root>Loading...</app-root>
   </body>
 </html>
diff --git a/angular/src/main.ts b/angular/src/main.ts
@@ -1,12 +1,10 @@
-import 'zone.js/dist/zone';
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { bootstrapApplication } from '@angular/platform-browser';
+import {Component} from '@angular/core';
+import {bootstrapApplication} from '@angular/platform-browser';
+import 'zone.js';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   standalone: true,
-  imports: [CommonModule],
   template: `
     <h1>Hello from {{ name }}!</h1>
     <a target="_blank" href="https://angular.io/start">

diff --git a/angular/src/tsconfig.app.json b/angular/src/tsconfig.app.json
@@ -4,6 +4,6 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
-  "files": ["main.ts", "polyfills.ts"],
+  "files": ["main.ts"],
   "include": ["**/*.d.ts"]
 }
diff --git a/angular/src/tsconfig.spec.json b/angular/src/tsconfig.spec.json
@@ -4,6 +4,6 @@
     "outDir": "../out-tsc/spec",
     "types": ["jasmine", "node"]
   },
-  "files": ["test.ts", "polyfills.ts"],
+  "files": ["test.ts"],
   "include": ["**/*.spec.ts", "**/*.d.ts"]
 }
diff --git a/angular/tsconfig.json b/angular/tsconfig.json
@@ -1,22 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "strict": true,
-    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
-    "typeRoots": ["node_modules/@types"],
-    "lib": ["es2018", "dom"]
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
   },
   "angularCompilerOptions": {
-    "strictTemplates": true,
-    "strictInjectionParameters": true
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }