Upgrade to Angular v19

angular.json

@@ -71,6 +71,9 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ],
+    "analytics": "16b52a22-0b9c-4212-944f-d6466f612e5b"
   }
 }

package.json

@@ -12,18 +12,19 @@
   "private": true,
   "dependencies": {
     "@angular/cdk": "^17.0.0",
-    "@angular/common": "^18.2.12",
-    "@angular/compiler": "^18.2.12",
-    "@angular/core": "^18.2.12",
-    "@angular/forms": "^18.2.12",
-    "@angular/platform-browser": "^18.2.12",
-    "@angular/ssr": "^18.2.12",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/ssr": "^19.0.0",
     "@rx-angular/cdk": "17.0.0",
     "@rx-angular/state": "17.0.0",
     "@rx-angular/template": "17.0.0",
     "@tanstack/angular-query-experimental": "^5.17.0",
     "body-parser": "^1.20.1",
     "cors": "^2.8.5",
+    "express": "^4.21.1",
     "rxjs": "~7.4.0",
     "tslib": "^2.5.0"
   },
@@ -33,9 +34,9 @@
     "@angular-eslint/eslint-plugin-template": "16.2.0",
     "@angular-eslint/schematics": "16.2.0",
     "@angular-eslint/template-parser": "16.2.0",
-    "@angular/build": "^18.2.12",
-    "@angular/cli": "^18.2.12",
-    "@angular/compiler-cli": "^18.2.12",
+    "@angular/build": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
     "@push-based/user-flow": "^0.20.1",
     "@rx-angular/eslint-plugin": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "5.62.0",
@@ -47,4 +48,4 @@
     "typescript": "~5.5.4"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}

projects/todo-mvc/src/app/app.component.ts

@@ -1,37 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { TodoListComponent } from './todo-list.component';
-
-@Component({
-  selector: 'app-footer',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  template: `
-    <footer>
-      <strong>Fully zoneless Angular app</strong> using
-      <code>
-        <a
-          href="https://github.com/rx-angular/rx-angular/blob/master/libs/state/README.md"
-        >
-          &#64;rx-angular/state</a
-        >
-      </code>
-      to manage state and
-      <code>
-        <a
-          href="https://github.com/rx-angular/rx-angular/blob/master/libs/template/README.md"
-          >&#64;rx-angular/template</a
-        ></code
-      >
-      to detect changes.
-    </footer>
-  `,
-}) class FooterComponent {}
-
+import { FooterComponent } from './footer.component';
 
 @Component({
   selector: 'app-root',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [TodoListComponent, FooterComponent],
   template: `
     <app-todo-list />

projects/todo-mvc/src/app/footer.component.ts

@@ -0,0 +1,27 @@
+import { Component, ChangeDetectionStrategy } from "@angular/core";
+
+@Component({
+  selector: 'app-footer',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  template: `
+    <footer>
+      <strong>Fully zoneless Angular app</strong> using
+      <code>
+        <a
+          href="https://github.com/rx-angular/rx-angular/blob/master/libs/state/README.md"
+        >
+          &#64;rx-angular/state</a
+        >
+      </code>
+      to manage state and
+      <code>
+        <a
+          href="https://github.com/rx-angular/rx-angular/blob/master/libs/template/README.md"
+          >&#64;rx-angular/template</a
+        ></code
+      >
+      to detect changes.
+    </footer>
+  `,
+}) export class FooterComponent {}

projects/todo-mvc/src/app/todo-list.component.ts

@@ -11,17 +11,16 @@ import { TodoService } from './todo-list.service';
 import { TodoComponent } from './todo.component';
 
 @Component({
-  standalone: true,
-  selector: 'app-todo-list',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ReactiveFormsModule, RxLet, TodoComponent, CdkDropList, CdkDrag],
-  providers: [TodoService],
-  styles: `
+    selector: 'app-todo-list',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [ReactiveFormsModule, RxLet, TodoComponent, CdkDropList, CdkDrag],
+    providers: [TodoService],
+    styles: `
       :host {
         display: block;
       }
     `,
-  template: `
+    template: `
     <header class="header">
       <h1>Todo</h1>
       <input
@@ -104,7 +103,7 @@ import { TodoComponent } from './todo.component';
         Clear completed
       </button>
     </footer>
-  `,
+  `
 })
 export class TodoListComponent {
   @HostBinding('class.todo-app') readonly todoApp = true;

projects/todo-mvc/src/main.ts

@@ -1,5 +1,5 @@
-import {} from '@angular/common/http';
-import { NgZone, importProvidersFrom, ɵNoopNgZone } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import {
   QueryClient,
@@ -9,8 +9,8 @@ import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
   providers: [
-    { provide: NgZone, useClass: ɵNoopNgZone },
-    importProvidersFrom(HttpClientModule),
+    provideExperimentalZonelessChangeDetection(),
+    provideHttpClient(),
     provideAngularQuery(new QueryClient()),
   ],
 }).catch((err) => console.error(err));

projects/todo-mvc/tsconfig.app.json

@@ -10,6 +10,7 @@
   "include": ["src/**/*.d.ts"],
   "angularCompilerOptions": {
     "strictTemplates": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "strictStandalone": true
   }
 }

server.js

@@ -5,9 +5,10 @@ const crypto = require("crypto");
 
 const app = express();
 
-const randomFail = () => {
-  if (Math.random() <= 0.5) {
-    throw new Error("Random error");
+const randomFail = (res) => {
+  if (Math.random() <= 0.2) {
+    res.status(500).json({ error: "Random failure" });
+    throw new Error("Random failure");
   }
 }
 
@@ -21,13 +22,13 @@ app.use(bodyParser.json());
 
 app.get("/todo", (req, res) => {
   console.log("GET /todo");
-  randomFail();
+  randomFail(res);
   res.status(200).json(todos);
 });
 
 app.post("/todo", (req, res) => {
   console.log("POST /todo");
-  randomFail();
+  randomFail(res);
 
   const text = req.body.text;
 
@@ -40,7 +41,7 @@ app.post("/todo", (req, res) => {
 app.delete("/todo/:id", (req, res) => {
   const id = req.params.id;
   console.log("DELETE /todo/" + id);
-  randomFail();
+  randomFail(res);
 
   const index = todos.findIndex((todo) => todo.id === id);
   todos.splice(index, 1);
@@ -51,7 +52,7 @@ app.delete("/todo/:id", (req, res) => {
 app.put("/todo/:id", (req, res) => {
   const id = req.params.id;
   console.log("PUT /todo/" + id);
-  randomFail();
+  randomFail(res);
 
   const text = req.body.text;
   const done = req.body.done;
@@ -64,7 +65,7 @@ app.put("/todo/:id", (req, res) => {
 
 app.put("/todo", (req, res) => {
   console.log("PUT /todo");
-  randomFail();
+  randomFail(res);
 
   todos = req.body;