Angular 18 Upgrade

2025-07-22 06:49:49 -04:00 · 2024-07-11 18:28:33 +00:00 · 2024-07-11 18:28:33 +00:00 · 7dc029ec4e
commit 7dc029ec4e
parent b8bca83612
14 changed files with 7416 additions and 5512 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -6,7 +6,7 @@ stages:

 build-android:
  stage: build
-  image: walljm/gradle_android:8.0.2-jdk17-33-node1
+  image: walljm/gradle_android:8.2.1-jdk17-android34-node22
  before_script:
    - cd ./src/android
    - bash ./install-sdk.sh
@ -29,7 +29,7 @@ build-android:

 test:
  stage: test
-  image: walljm/node-chrome-headless:21.6
+  image: walljm/node-chrome-headless:22.4-bookworm
  variables:
    NODE_OPTIONS: "--max_old_space_size=2048"
  script:
@ -68,7 +68,7 @@ deploy-prod-site:

 deploy-android:
  stage: prod
-  image: walljm/gradle_android:8.0.2-jdk17-33-node1
+  image: walljm/gradle_android:8.2.1-jdk17-android34-node22
  needs:
    - build-android
  before_script:
--- a/docker-node-chrome/Dockerfile
+++ b/docker-node-chrome/Dockerfile
@ -1,4 +1,4 @@
-FROM node:21.6.2-bookworm
+FROM node:22.4-bookworm

 RUN apt-get update -qqy \
  && apt-get -qqy install \
--- a/docker-node-chrome/build.sh
+++ b/docker-node-chrome/build.sh
@ -1,2 +1,2 @@
-docker build -t walljm/node-chrome-headless:21.6 .
-docker push walljm/node-chrome-headless:21.6
+docker build -t walljm/node-chrome-headless:22.4-bookworm .
+docker push walljm/node-chrome-headless:22.4-bookworm
--- a/gradle_android_node/Dockerfile
+++ b/gradle_android_node/Dockerfile
@ -1,5 +1,5 @@

-FROM gradle:8.0.2-jdk17-focal
+FROM gradle:8.2.1-jdk17-focal

 # Install Git and dependencies
 RUN apt-get update \
@ -7,7 +7,7 @@ RUN apt-get update \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists /var/cache/apt

-RUN curl -L -o node.tar.gz "https://nodejs.org/dist/v21.6.2/node-v21.6.2-linux-x64.tar.gz" && \
+RUN curl -L -o node.tar.gz "https://nodejs.org/dist/v22.4.1/node-v22.4.1-linux-x64.tar.gz" && \
    tar -xzf node.tar.gz -C /usr/local --strip-components=1 && \
    rm node.tar.gz && \
    ln -s /usr/local/bin/node /usr/local/bin/nodejs
@ -42,7 +42,7 @@ RUN $ANDROID_SDK_ROOT/cmdline-tools/latest/bin/sdkmanager --update
 RUN $ANDROID_SDK_ROOT/cmdline-tools/latest/bin/sdkmanager --verbose \
    "build-tools;34.0.0" \
    "build-tools;30.0.3" \
-    "platforms;android-33" \
+    "platforms;android-34" \
    "platform-tools"


--- a/gradle_android_node/build.sh
+++ b/gradle_android_node/build.sh
@ -1,2 +1,2 @@
-docker build -t walljm/gradle_android:8.0.2-jdk17-33-node1 .
-docker push walljm/gradle_android:8.0.2-jdk17-33-node1
+docker build -t walljm/gradle_android:8.2.1-jdk17-android34-node22 .
+docker push walljm/gradle_android:8.2.1-jdk17-android34-node22
--- a/src/android/build.gradle
+++ b/src/android/build.gradle
@ -7,7 +7,7 @@ buildscript {
        mavenCentral()
    }
    dependencies {
-        classpath 'com.android.tools.build:gradle:8.1.4'
+        classpath 'com.android.tools.build:gradle:8.2.1'
        classpath 'com.google.gms:google-services:4.4.2'
        classpath "com.github.triplet.gradle:play-publisher:3.8.1"

--- a/src/android/capacitor-cordova-android-plugins/build.gradle
+++ b/src/android/capacitor-cordova-android-plugins/build.gradle
@ -9,7 +9,7 @@ buildscript {
        mavenCentral()
    }
    dependencies {
-        classpath 'com.android.tools.build:gradle:8.1.4'
+        classpath 'com.android.tools.build:gradle:8.2.1'
    }
 }

--- a/src/android/variables.gradle
+++ b/src/android/variables.gradle
@ -1,17 +1,17 @@
 ext {
    minSdkVersion = 22
-    firebaseMessagingVersion = '23.0.5'
+    firebaseMessagingVersion = '23.3.1'
    compileSdkVersion = 34
    targetSdkVersion = 34
-    androidxActivityVersion = '1.7.0'
-    androidxAppCompatVersion = '1.7.0'
+    androidxActivityVersion = '1.8.0'
+    androidxAppCompatVersion = '1.6.1'
    androidxCoordinatorLayoutVersion = '1.2.0'
-    androidxCoreVersion = '1.10.0'
-    androidxFragmentVersion = '1.5.6'
+    androidxCoreVersion = '1.12.0'
+    androidxFragmentVersion = '1.6.2'
    coreSplashScreenVersion = '1.0.1'
-    androidxWebkitVersion = '1.6.1'
+    androidxWebkitVersion = '1.9.0'
    junitVersion = '4.13.2'
-    androidxJunitVersion = '1.2.1'
-    androidxEspressoCoreVersion = '3.6.1'
+    androidxJunitVersion = '1.1.5'
+    androidxEspressoCoreVersion = '3.5.1'
    cordovaAndroidVersion = '10.1.1'
 }
--- a/src/ios/App/Podfile.lock
+++ b/src/ios/App/Podfile.lock
@ -5,9 +5,9 @@ PODS:
  - AppAuth/Core (1.7.1)
  - AppAuth/ExternalUserAgent (1.7.1):
    - AppAuth/Core
-  - Capacitor (5.7.0):
+  - Capacitor (6.1.0):
    - CapacitorCordova
-  - CapacitorCordova (5.7.0)
+  - CapacitorCordova (6.1.0)
  - CodetrixStudioCapacitorGoogleAuth (0.0.1):
    - Capacitor
    - GoogleSignIn (~> 6.2.4)
@ -42,8 +42,8 @@ EXTERNAL SOURCES:

 SPEC CHECKSUMS:
  AppAuth: e93b919be5dbcbba49555011ce94f7d716368574
-  Capacitor: fc155ee2ee45a2093d716f13cf5aa5a865e2d85a
-  CapacitorCordova: e825fce1a2e14e4b5730641c7e098dccf74397b7
+  Capacitor: 187bd7847b6f71467015a20200a1a071be3e5f14
+  CapacitorCordova: be703980ca797f847c3356f78fa175d21c8330c2
  CodetrixStudioCapacitorGoogleAuth: fcce058390347c1ce5d8ac4764bdf1f5c1ee233b
  GoogleSignIn: 5651ce3a61e56ca864160e79b484cd9ed3f49b7a
  GTMAppAuth: 0ff230db599948a9ad7470ca667337803b3fc4dd
--- a/src/package-lock.json
+++ b/src/package-lock.json
--- a/src/package.json
+++ b/src/package.json
@ -16,51 +16,51 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^17.2.3",
-    "@angular/cdk": "^17.2.1",
-    "@angular/common": "^17.2.3",
-    "@angular/compiler": "^17.2.3",
-    "@angular/core": "^17.2.3",
-    "@angular/fire": "^17.0.1",
-    "@angular/forms": "^17.2.3",
-    "@angular/material": "^17.2.1",
-    "@angular/platform-browser": "^17.2.3",
-    "@angular/platform-browser-dynamic": "^17.2.3",
-    "@angular/router": "^17.2.3",
-    "@capacitor/android": "^5.7.0",
-    "@capacitor/core": "^5.7.0",
-    "@capacitor/ios": "^5.7.0",
+    "@angular/animations": "^18.1.0",
+    "@angular/cdk": "^18.0.6",
+    "@angular/common": "^18.1.0",
+    "@angular/compiler": "^18.1.0",
+    "@angular/core": "^18.1.0",
+    "@angular/fire": "^18.0.1",
+    "@angular/forms": "^18.1.0",
+    "@angular/material": "^18.0.6",
+    "@angular/platform-browser": "^18.1.0",
+    "@angular/platform-browser-dynamic": "^18.1.0",
+    "@angular/router": "^18.1.0",
+    "@capacitor/android": "^6.0.0",
+    "@capacitor/core": "^6.0.0",
+    "@capacitor/ios": "^6.0.0",
    "@codetrix-studio/capacitor-google-auth": "^3.4.0-rc.0",
-    "@ngx-pwa/local-storage": "^17.0.0",
+    "@ngx-pwa/local-storage": "^18.0.0",
    "angular2-uuid": "^1.1.1",
    "firebase": "^10.8.0",
    "marked": "^9.0.0",
-    "ngx-markdown": "^17.1.1",
+    "ngx-markdown": "^18.0.0",
    "reselect": "^5.1.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.6.2",
    "zone.js": "~0.14.4"
  },
  "devDependencies": {
-    "@angular-devkit/architect": "0.1702.1",
-    "@angular-devkit/build-angular": "^17.2.1",
-    "@angular-eslint/builder": "17.2.1",
-    "@angular-eslint/eslint-plugin": "17.2.1",
-    "@angular-eslint/eslint-plugin-template": "17.2.1",
-    "@angular-eslint/schematics": "17.2.1",
-    "@angular-eslint/template-parser": "17.2.1",
-    "@angular/cli": "^17.2.1",
-    "@angular/compiler-cli": "^17.2.1",
-    "@capacitor/cli": "^5.7.0",
+    "@angular-devkit/architect": "0.1800.7",
+    "@angular-devkit/build-angular": "^18.0.7",
+    "@angular-eslint/builder": "18.1.0",
+    "@angular-eslint/eslint-plugin": "18.1.0",
+    "@angular-eslint/eslint-plugin-template": "18.1.0",
+    "@angular-eslint/schematics": "18.1.0",
+    "@angular-eslint/template-parser": "18.1.0",
+    "@angular/cli": "^18.0.7",
+    "@angular/compiler-cli": "^18.1.0",
+    "@capacitor/cli": "^6.0.0",
    "@cypress/schematic": "^2.5.1",
    "@types/jasmine": "~5.1.4",
    "@types/jasminewd2": "~2.0.13",
    "@types/node": "^20.11.21",
-    "@typescript-eslint/eslint-plugin": "7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
-    "cypress": "latest",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "cypress": "13.6.6",
    "eslint": "^8.57.0",
-    "eslint-plugin-deprecation": "^2.0.0",
+    "eslint-plugin-deprecation": "^3.0.0",
    "eslint-plugin-optimize-regex": "^1.2.1",
    "eslint-plugin-simple-import-sort": "^12.0.0",
    "eslint-plugin-unused-imports": "^3.1.0",
@ -77,7 +77,7 @@
    "karma-jasmine-html-reporter": "^2.1.0",
    "open": "^10.0.4",
    "ts-node": "~10.9.2",
-    "typescript": "~5.3.3"
+    "typescript": "~5.4.5"
  },
  "browserslist": [
    "last 1 Chrome version",
--- a/src/src/app/app.module.ts
+++ b/src/src/app/app.module.ts
@ -1,6 +1,6 @@
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { APP_ID, NgModule } from '@angular/core';
 import { AngularFireModule } from '@angular/fire/compat';
 import { AngularFireAuthModule } from '@angular/fire/compat/auth';
@ -76,8 +76,7 @@ export function markedOptionsFactory(): MarkedOptions {
  };
 }

-@NgModule({
-  declarations: [
+@NgModule({ declarations: [
        AppComponent,
        NotesAdminPageComponent,
        SavedPagesAdminPageComponent,
@ -98,26 +97,20 @@ export function markedOptionsFactory(): MarkedOptions {
        OkCancelModalComponent,
        CardEditModalComponent,
    ],
-  imports: [
-    BrowserModule,
-    HttpClientModule,
-
+    bootstrap: [AppComponent], imports: [BrowserModule,
        ReactiveFormsModule,
        FormsModule,
        AppRoutingModule,
        BrowserAnimationsModule,
-
        MarkdownModule.forRoot({
            markedOptions: {
                provide: MARKED_OPTIONS,
                useFactory: markedOptionsFactory,
            },
        }),
-
        AngularFireModule.initializeApp(FirebaseConfig),
        AngularFireAuthModule,
        AngularFireDatabaseModule,
-
        DragDropModule,
        MatSidenavModule,
        MatChipsModule,
@ -147,9 +140,5 @@ export function markedOptionsFactory(): MarkedOptions {
        MatTooltipModule,
        MatFormFieldModule,
        MatTabsModule,
-    ClipboardModule,
-  ],
-  providers: [{ provide: APP_ID, useValue: 'ng-cli-universal' }],
-  bootstrap: [AppComponent],
-})
+        ClipboardModule], providers: [{ provide: APP_ID, useValue: 'ng-cli-universal' }, provideHttpClient(withInterceptorsFromDi())] })
 export class AppModule {}
--- a/src/src/styles.scss
+++ b/src/src/styles.scss
@ -13,15 +13,15 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$db-primary: mat.define-palette(mat.$indigo-palette);
-$db-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$db-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+$db-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);

 // The warn palette is optional (defaults to red).
-$db-warn: mat.define-palette(mat.$red-palette);
+$db-warn: mat.m2-define-palette(mat.$m2-red-palette);

 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$db-theme: mat.define-light-theme(
+$db-theme: mat.m2-define-light-theme(
  (
    color: (
      primary: $db-primary,
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@ -5,7 +5,7 @@
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
-    "downlevelIteration": true,
+    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",