Update angular template to v22 (#976)

* Update angular template to v22

* Skip deno angular

* Add change file

* Too much copy pastes from test project

Author: Legend-Master

.changes/angular-22.md

@@ -0,0 +1,6 @@
+---
+"create-tauri-app": patch
+"create-tauri-app-js": patch
+---
+
+Updated angular template to v22 and typescript to v6

.github/workflows/templates-test.yml

@@ -155,7 +155,8 @@ jobs:
         working-directory: tauri-app
 
       - run: ${{ matrix.settings.run_cmd }} tauri build ${{ matrix.settings.no_bundle_flag }}
-        if: matrix.settings.manager != 'npm'
+        # Skip deno angular test for now, `ng build` stucks on deno
+        if: matrix.settings.manager != 'npm' && !(matrix.settings.manager == 'deno' && matrix.settings.template == 'angular')
         working-directory: tauri-app
 
       - run: ${{ matrix.settings.run_cmd }} tauri build -- ${{ matrix.settings.no_bundle_flag }}

templates/template-angular/angular.json.lte

@@ -21,7 +21,6 @@
           "builder": "@angular/build:application",
           "options": {
             "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [

templates/template-angular/package.json.lte

@@ -10,23 +10,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^20.1.4",
-    "@angular/compiler": "^20.1.4",
-    "@angular/core": "^20.1.4",
-    "@angular/forms": "^20.1.4",
-    "@angular/platform-browser": "^20.1.4",
-    "@angular/router": "^20.1.4",
+    "@angular/common": "^22.0.1",
+    "@angular/compiler": "^22.0.1",
+    "@angular/core": "^22.0.1",
+    "@angular/forms": "^22.0.1",
+    "@angular/platform-browser": "^22.0.1",
+    "@angular/router": "^22.0.1",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.15.1",
     "@tauri-apps/api": "{% if v2 %}^2{% else %}^1{% endif %}"{% if v2 %},
     "@tauri-apps/plugin-opener": "^2"{% endif %}
   },
   "devDependencies": {
-    "@angular/build": "^20.1.4",
-    "@angular/cli": "^20.1.4",
-    "@angular/compiler-cli": "^20.1.4",
+    "@angular/build": "^22.0.1",
+    "@angular/cli": "^22.0.1",
+    "@angular/compiler-cli": "^22.0.1",
     "@tauri-apps/cli": "{% if v2 %}^2{% else %}^1{% endif %}",
-    "typescript": "~5.8.3"
+    "typescript": "~6.0.3"
   }
 }

templates/template-angular/src/app/app.component.html

@@ -15,7 +15,7 @@ <h1>Welcome to Tauri + Angular!</h1>
     <input #greetInput id="greet-input" placeholder="Enter a name..." />
     <button type="submit">Greet</button>
   </form>
-  <p>{{ greetingMessage }}</p>
+  <p>{{ greetingMessage() }}</p>
 
   <router-outlet />
 </main>

templates/template-angular/src/app/app.component.ts.lte

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, signal } from "@angular/core";
 import { RouterOutlet } from "@angular/router";
 import { invoke } from "@tauri-apps/api/{% if v2 %}core{% else %}tauri{% endif %}";
 
@@ -9,14 +9,14 @@ import { invoke } from "@tauri-apps/api/{% if v2 %}core{% else %}tauri{% endif %
   styleUrl: "./app.component.css",
 })
 export class AppComponent {
-  greetingMessage = "";
+  greetingMessage = signal("");
 
   greet(event: SubmitEvent, name: string): void {
     event.preventDefault();
 
     // Learn more about Tauri commands at {% if v2 %}https://tauri.app/develop/calling-rust/{% else %}https://v1.tauri.app/v1/guides/features/command{% endif %}
     invoke<string>("greet", { name }).then((text) => {
-      this.greetingMessage = text;
+      this.greetingMessage.set(text);
     });
   }
 }

templates/template-angular/src/app/app.config.ts

@@ -1,16 +1,11 @@
 import {
   ApplicationConfig,
   provideBrowserGlobalErrorListeners,
-  provideZoneChangeDetection,
 } from "@angular/core";
 import { provideRouter } from "@angular/router";
 
 import { routes } from "./app.routes";
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-    provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
-  ],
+  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
 };

templates/template-angular/tsconfig.app.json

@@ -3,6 +3,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "composite": true,
     "outDir": "./out-tsc/app",
     "types": []
   },