Chore/angular v19 migration

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-# This is a basic workflow to help you get started with Actions
+# This is a basic workflow to help you get started with Actions name: 'Tauri Build'
 name: 'Tauri Build'
 
 # Controls when the action will run.
@@ -18,59 +18,62 @@ on:
 jobs:
   build:
     strategy:
+      fail-fast: false
       matrix:
-        node-version: [18]
-        platform: [macos-latest, ubuntu-latest, windows-latest]
+        platform: [macos-latest, ubuntu-22.04, windows-latest]
 
     # The type of runner that the job will run on
     runs-on: ${{ matrix.platform }}
 
     steps:
-    - uses: actions/checkout@v2
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-    - name: Cache node modules
-      uses: actions/cache@v2
-      env:
-        cache-name: cache-node-modules
-      with:
-        # npm cache files are stored in `~/.npm`
-        path: ~/.npm
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-build-${{ env.cache-name }}-
-          ${{ runner.os }}-build-
-          ${{ runner.os }}-
+      - name: Setup Node.js 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
 
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
+      - name: Cache Node modules
+        uses: actions/cache@v4
+        with:
+          # npm cache files are stored in ~/.npm
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
 
-    - name: install rust stable
-      uses: actions-rs/toolchain@v1
-      with:
-        toolchain: stable
-        profile: minimal
+      - name: Setup Rust toolchain (stable)
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          # Only required targets will be downloaded depending on platform
+          targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
 
-    - name: install dependencies (ubuntu only)
-      if: matrix.platform == 'ubuntu-latest'
-      run: |
-        sudo apt-get update
-        sudo apt-get install -y libgtk-3-dev libappindicator3-dev librsvg2-dev patchelf libsoup-3.0 libwebkit2gtk-4.1-dev
+      - name: Install dependencies (Linux only)
+        if: matrix.platform == 'ubuntu-22.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libgtk-3-dev \
+            libappindicator3-dev \
+            librsvg2-dev \
+            patchelf \
+            libsoup-3.0 \
+            libwebkit2gtk-4.1-dev
 
-    - name: Install Dependencies
-      run: npm i && npm i -D cli-truncate
+      - name: Install Node dependencies
+        run: npm install
 
-    - name: Check lint
-      run: npm run lint
+      - name: Check lint
+        run: npm run lint
 
-    - name: Run headless unit test
-      if: matrix.platform == 'ubuntu-latest'
-      uses: GabrielBB/xvfb-action@v1
-      with:
-        run: npm run test
+      - name: Run unit tests (Linux only)
+        if: matrix.platform == 'ubuntu-22.04'
+        uses: GabrielBB/xvfb-action@v1
+        with:
+          run: npm run test
 
-    - name: build tauri app
-      uses: tauri-apps/tauri-action@v0
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Build Tauri app
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -12,11 +12,11 @@
 
 # Introduction
 
-Bootstrap and package your project with Angular 18 (Typescript + SASS + Hot Reload) and Tauri (Rust) for creating Desktop applications.
+Bootstrap and package your project with Angular 19 (Typescript + SASS + Hot Reload) and Tauri (Rust) for creating Desktop applications.
 
 Currently runs with:
 
-- Angular v18.2.7
+- Angular v19.2.14
 - Tauri 2.0.0
 
 With this sample, you can:
@@ -52,10 +52,10 @@ Please follow [Angular-cli documentation](https://github.com/angular/angular-cli
 npm install -g @angular/cli
 ```
 
-Older @angular/cli references may grab angular version 16. To update to angular version 18 specifically for the global cli run:
+Older @angular/cli references may grab angular version 18. To update to angular version 19 specifically for the global cli run:
 
 ``` bash
-npm install -g @angular/cli@^18
+npm install -g @angular/cli@^19
 ```
 
 ## To build for development

angular.json

@@ -18,12 +18,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "src/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -33,7 +36,8 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "development": {
@@ -43,8 +47,6 @@
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": false,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -59,8 +61,6 @@
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-tauri",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "scripts": {
     "ng": "ng",
     "start": "npm run tauri:serve",
@@ -18,28 +18,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "18.2.7",
-    "@angular/compiler": "18.2.7",
-    "@angular/core": "18.2.7",
-    "@angular/forms": "18.2.7",
-    "@angular/language-service": "18.2.7",
-    "@angular/platform-browser": "18.2.7",
-    "@angular/platform-browser-dynamic": "18.2.7",
-    "@angular/router": "18.2.7",
+    "@angular/common": "19.2.14",
+    "@angular/compiler": "19.2.14",
+    "@angular/core": "19.2.14",
+    "@angular/forms": "19.2.14",
+    "@angular/language-service": "19.2.14",
+    "@angular/platform-browser": "19.2.14",
+    "@angular/platform-browser-dynamic": "19.2.14",
+    "@angular/router": "19.2.14",
     "@tauri-apps/api": "1.6.0",
     "rxjs": "7.8.1",
     "tslib": "2.7.0",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "18.2.7",
+    "@angular-devkit/build-angular": "19.2.15",
     "@angular-eslint/builder": "18.3.1",
     "@angular-eslint/eslint-plugin": "18.3.1",
     "@angular-eslint/eslint-plugin-template": "18.3.1",
     "@angular-eslint/schematics": "18.3.1",
     "@angular-eslint/template-parser": "18.3.1",
-    "@angular/cli": "18.2.7",
-    "@angular/compiler-cli": "18.2.7",
+    "@angular/cli": "19.2.15",
+    "@angular/compiler-cli": "19.2.14",
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
     "@tauri-apps/cli": "2.0.1",

src-tauri/tauri.conf.json

@@ -4,7 +4,7 @@
 	"version": "1.0.0",
 	"identifier": "com.angular.tauri.dev",
 	"build": {
-		"frontendDist": "../dist",
+		"frontendDist": "../dist/browser",
 		"devUrl": "http://localhost:4200",
 		"beforeDevCommand": "npm run web:serve",
 		"beforeBuildCommand": "npm run web:prod"

src/app/app.component.ts

@@ -4,9 +4,10 @@ import { APP_CONFIG } from '../environments/environment';
 import {TauriService} from './core/services';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: false
 })
 export class AppComponent {
   constructor(

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { CoreModule } from './core/core.module';
 import { SharedModule } from './shared/shared.module';
 
@@ -24,7 +24,6 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
   imports: [
     BrowserModule,
     FormsModule,
-    HttpClientModule,
     CoreModule,
     SharedModule,
     HomeModule,
@@ -38,7 +37,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
       }
     })
   ],
-  providers: [],
+  providers: [provideHttpClient(withInterceptorsFromDi())],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/detail/detail.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-detail',
-  templateUrl: './detail.component.html',
-  styleUrls: ['./detail.component.scss']
+    selector: 'app-detail',
+    templateUrl: './detail.component.html',
+    styleUrls: ['./detail.component.scss'],
+    standalone: false
 })
 export class DetailComponent implements OnInit {
 

src/app/home/home.component.ts

@@ -2,9 +2,10 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
 @Component({
-  selector: 'app-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
+    selector: 'app-home',
+    templateUrl: './home.component.html',
+    styleUrls: ['./home.component.scss'],
+    standalone: false
 })
 export class HomeComponent implements OnInit {
 

src/app/shared/components/page-not-found/page-not-found.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-page-not-found',
-  templateUrl: './page-not-found.component.html',
-  styleUrls: ['./page-not-found.component.scss']
+    selector: 'app-page-not-found',
+    templateUrl: './page-not-found.component.html',
+    styleUrls: ['./page-not-found.component.scss'],
+    standalone: false
 })
 export class PageNotFoundComponent implements OnInit {
   constructor() {}

src/app/shared/directives/webview/webview.directive.ts

@@ -1,7 +1,8 @@
 import { Directive } from '@angular/core';
 
 @Directive({
-  selector: 'webview'
+    selector: 'webview',
+    standalone: false
 })
 export class WebviewDirective {
   constructor() { }

tsconfig.json

@@ -4,12 +4,12 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "strict": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,