Merge pull request #9 from dimeloper/feature/update-to-angular-v19-and-utilise-features

Update to angular v19 and utilise latest features

Author: dimeloper

README.md

@@ -3,11 +3,15 @@
 # Angular Optimization with Pokemon
 
 This is a basic Angular app, featuring a pokedex to showcase some performance optimisation techniques within Angular SPAs.
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.2.0.
+This project was generated with the [Angular CLI](https://github.com/angular/angular-cli).
 
 If you want to find out more about the optimization techniques we followed, please make sure to check out the related article:
 [Supercharging Angular apps for better performance](https://medium.com/zeal-tech-blog/supercharging-angular-apps-for-better-performance-6814e46bb3c0)
 
+## Update to version 19
+
+The project utilises Angular version 19 and most of its latest features. If you want to review the changes so as to utilise the latest features in your project too, here is the related PR: [Update project to Angular v19](https://github.com/dimeloper/angular-optimization/pull/9).
+
 ## Performance measurements
 
 The idea is the following, we start with a couple of pages that are far from optimized, and we take some initial measurements using [unlighthouse](https://unlighthouse.dev/)* for faster feedback loops.

angular.json

@@ -19,7 +19,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/angular-optimization-examples",
             "index": "src/index.html",
@@ -42,23 +42,23 @@
             ],
             "scripts": [],
             "server": "src/main.server.ts",
-            "prerender": true,
+            "outputMode": "server",
             "ssr": {
-              "entry": "server.ts"
+              "entry": "src/server.ts"
             }
           },
           "configurations": {
             "production": {
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "620kB",
+                  "maximumError": "1MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
                 }
               ],
               "outputHashing": "all"
@@ -84,7 +84,7 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "angular-optimization-examples:build"
           }
@@ -97,10 +97,11 @@
               "zone.js/testing"
             ],
             "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
             "assets": [
-              "src/favicon.ico",
-              "src/assets"
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
             ],
             "styles": [
               "@angular/material/prebuilt-themes/pink-bluegrey.css",

package.json

@@ -14,31 +14,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.10",
-    "@angular/cdk": "18.0.3",
-    "@angular/common": "^18.2.10",
-    "@angular/compiler": "^18.2.10",
-    "@angular/core": "^18.2.10",
-    "@angular/forms": "^18.2.10",
-    "@angular/material": "18.0.3",
-    "@angular/platform-browser": "^18.2.10",
-    "@angular/platform-browser-dynamic": "^18.2.10",
-    "@angular/platform-server": "^18.2.10",
-    "@angular/router": "^18.2.10",
-    "@angular/ssr": "^18.2.11",
+    "@angular/animations": "^19.0.4",
+    "@angular/cdk": "19.0.3",
+    "@angular/common": "^19.0.4",
+    "@angular/compiler": "^19.0.4",
+    "@angular/core": "^19.0.4",
+    "@angular/forms": "^19.0.4",
+    "@angular/material": "19.0.3",
+    "@angular/platform-browser": "^19.0.4",
+    "@angular/platform-browser-dynamic": "^19.0.4",
+    "@angular/platform-server": "^19.0.4",
+    "@angular/router": "^19.0.4",
+    "@angular/ssr": "^19.0.5",
+    "@netlify/angular-runtime": "^2.1.0",
     "express": "^4.18.2",
-    "ngx-device-detector": "^8.0.0",
+    "ngx-device-detector": "^9.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.11",
-    "@angular/cli": "^18.2.11",
-    "@angular/compiler-cli": "^18.2.10",
+    "@angular-devkit/build-angular": "^19.0.5",
+    "@angular/cli": "^19.0.5",
+    "@angular/compiler-cli": "^19.0.4",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
-    "@types/node": "^18.18.0",
+    "@types/node": "^20.17.10",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
@@ -47,7 +48,7 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "prettier": "^3.2.5",
     "source-map-explorer": "^2.5.3",
-    "typescript": "~5.4.5"
+    "typescript": "~5.6.3"
   },
   "volta": {
     "node": "20.18.0"