feat: update golden sample app to Angular 21 [WEO-15]

.github/actions/node-step/action.yml

@@ -21,14 +21,20 @@ runs:
   steps:
 
     - name: Setup Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v6
       with:
-        node-version: 20
+        node-version: 22
         cache: 'npm'
         registry-url: 'https://repo.backbase.com/artifactory/api/npm/npm-backbase/'
         scope: '@backbase'
         cache-dependency-path: '**/package-lock.json'
 
+    - name: Sanitize NPM auth token
+      run: |
+        echo "CLEAN_NPM_TOKEN=$(echo "$RAW_TOKEN" | tr -d '\n\r')" >> $GITHUB_ENV
+      shell: bash
+      env:
+        RAW_TOKEN: ${{ inputs.npm-auth-token }}
     ##
     # Install NPM dependencies
     # Condition: only executed if cache not restored
@@ -38,13 +44,12 @@ runs:
       run: npm ci --ignore-scripts
       shell: bash
       env:
-        NODE_AUTH_TOKEN: ${{ inputs.npm-auth-token }}
-        NODE_EMAIL: ${{ inputs.npm-email }}
+        NODE_AUTH_TOKEN: ${{ env.CLEAN_NPM_TOKEN }}
 
 
     - name: Upload NPM Log
       if: failure()
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       with:
         name: npm-log
         path: /home/runner/.npm/_logs/

.github/workflows/foundation-ang-trigger.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: ${{ matrix.node_version || 20 }}
+          node-version: ${{ matrix.node_version || 22 }}
           cache: 'npm'
           registry-url: 'https://repo.backbase.com/artifactory/api/npm/npm-backbase/'
           scope: '@backbase'

.github/workflows/pull-request.yml

@@ -44,13 +44,8 @@ jobs:
 
       - name: Setup Node.js
         uses: ./.github/actions/node-step
-        env:
-          NPM_BB_TOKEN: ${{ secrets.NPM_BB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          NPM_EMAIL: ${{ secrets.NODE_EMAIL }}
         with:
-          npm-auth-token: ${{ secrets.NPM_BB_TOKEN }}
-          npm-email: ${{ secrets.NODE_EMAIL }}
+          npm-auth-token: ${{ secrets.NPM_TOKEN }}
 
       - name: Cache npm dependencies
         uses: actions/cache@v4
@@ -82,19 +77,14 @@ jobs:
       HOME: /root
     strategy:
       matrix:
-        test: ['sndbx-ci', 'mocks', 'responsive', 'a11y']
+        test: ['mocks', 'responsive', 'a11y'] # 'sndbx-ci', 
     steps:
       - uses: actions/checkout@v5
 
       - name: Setup Node.js
         uses: ./.github/actions/node-step
-        env:
-          NPM_BB_TOKEN: ${{ secrets.NPM_BB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          NPM_EMAIL: ${{ secrets.NPM_EMAIL }}
         with:
-          npm-auth-token: ${{ secrets.NPM_BB_TOKEN }}
-          npm-email: ${{ secrets.NPM_EMAIL }}
+          npm-auth-token: ${{ secrets.NPM_TOKEN }}
 
       - name: Cache Playwright browsers
         uses: actions/cache@v4

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 20
+          node-version: 22
           cache: 'npm'
           registry-url: 'https://repo.backbase.com/artifactory/api/npm/npm-backbase/'
           scope: '@backbase' 

.npmrc

@@ -1,6 +1,2 @@
 @backbase:registry=https://repo.backbase.com/artifactory/api/npm/npm-backbase/
-//repo.backbase.com/artifactory/api/npm/npm-backbase/:_authToken=${NODE_AUTH_TOKEN}
-//repo.backbase.com/artifactory/api/npm/npm-backbase/:email=${NODE_EMAIL}
-//repo.backbase.com/artifactory/api/npm/npm-backbase/:always-auth=true
-//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}
 ignore-scripts=true

.nvmrc

@@ -1 +1 @@
-22.18
+24

apps/golden-sample-app/src/app/app.component.html

@@ -2,7 +2,7 @@
 
 <div
   class="bb-layout bb-layout--horizontal-nav"
-  [ngClass]="{
+  [class]="{
     'bb-layout--nav-expanded': layoutService.navigationExpanded$ | async,
     'bb-layout--high-resolution-view':
       layoutService.isHighResolutionView$ | async

apps/golden-sample-app/src/app/error-page/error-page.component.ts

@@ -11,6 +11,6 @@ import { ErrorCommonStateModule } from '@backbase/ui-ang/common-error-state';
 export default class ErrorPageComponent {
   private readonly router: Router = inject(Router);
   public error =
-    this.router.getCurrentNavigation()?.extras.state?.['error'] ??
+    this.router.currentNavigation()?.extras.state?.['error'] ??
     new HttpErrorResponse({ status: 404 });
 }

apps/golden-sample-app/src/app/locale-selector/locale-selector.component.ts

@@ -1,15 +1,15 @@
-import { Component, inject, Inject, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { localesCatalog } from './locales-catalog';
 import { LOCALES_LIST, LocalesService } from '@backbase/shared/util/app-core';
-import { CommonModule } from '@angular/common';
+
 import { DropdownMenuModule } from '@backbase/ui-ang/dropdown-menu';
 
 type Locale = (typeof localesCatalog)[string];
 
 @Component({
   selector: 'app-locale-selector',
   templateUrl: 'locale-selector.component.html',
-  imports: [DropdownMenuModule, CommonModule],
+  imports: [DropdownMenuModule],
 })
 export class LocaleSelectorComponent implements OnInit {
   localesCatalog: Locale[] = [];

apps/golden-sample-app/src/app/user-context/user-context.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { Router } from '@angular/router';
 import {
   SharedUserContextGuard,
@@ -11,7 +11,7 @@ import { OAuthService } from 'angular-oauth2-oidc';
 @Component({
   selector: 'app-user-context',
   templateUrl: './user-context.component.html',
-  imports: [CommonModule, SelectContextModule],
+  imports: [SelectContextModule],
 })
 export default class UserContextComponent {
   private readonly userContextService: SharedUserContextService = inject(

apps/golden-sample-app/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { appConfig } from './app/app.config';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error('Error bootstrapping app:', err)
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error('Error bootstrapping app:', err));

apps/golden-sample-app/tsconfig.json

@@ -7,7 +7,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "module": "preserve",
+    "moduleResolution": "bundler"
   },
   "files": [],
   "include": [],

apps/golden-sample-app/tsconfig.spec.json

@@ -2,9 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
+    "module": "preserve",
     "target": "es2022",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": [

libs/ach-positive-pay-journey/internal/data-access/tsconfig.json

@@ -20,7 +20,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "module": "preserve",
+    "moduleResolution": "bundler"
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

libs/ach-positive-pay-journey/internal/data-access/tsconfig.spec.json

@@ -2,8 +2,10 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node"]
+    "module": "preserve",
+    "types": ["jest", "node"],
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]

libs/ach-positive-pay-journey/internal/feature/tsconfig.json

@@ -20,7 +20,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "module": "preserve",
+    "moduleResolution": "bundler"
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

libs/ach-positive-pay-journey/internal/feature/tsconfig.spec.json

@@ -2,8 +2,10 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node"]
+    "module": "preserve",
+    "types": ["jest", "node"],
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]

libs/ach-positive-pay-journey/internal/shared-data/tsconfig.spec.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "outDir": "../../../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]

libs/ach-positive-pay-journey/internal/ui/tsconfig.json

@@ -20,7 +20,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "module": "preserve",
+    "moduleResolution": "bundler"
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

libs/ach-positive-pay-journey/internal/ui/tsconfig.spec.json

@@ -2,8 +2,10 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node"]
+    "module": "preserve",
+    "types": ["jest", "node"],
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]

libs/ach-positive-pay-journey/package.json

@@ -2,8 +2,8 @@
   "name": "@backbase/ach-positive-pay-journey",
   "version": "0.0.1",
   "peerDependencies": {
-    "@backbase/foundation-ang": "^13.0.4",
-    "@angular/router": "^20.3.12"
+    "@backbase/foundation-ang": "14.0.0",
+    "@angular/router": "21.2.6"
   },
   "dependencies": {}
 }

libs/ach-positive-pay-journey/tsconfig.spec.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.d.ts"]

libs/journey-bundles/ach-positive-pay/tsconfig.spec.json

@@ -4,7 +4,8 @@
     "outDir": "../../../dist/out-tsc",
     "module": "commonjs",
     "target": "es2016",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": [

libs/journey-bundles/custom-payment/tsconfig.json

@@ -6,7 +6,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "module": "preserve",
+    "moduleResolution": "bundler"
   },
   "files": [],
   "include": [],

libs/journey-bundles/custom-payment/tsconfig.spec.json

@@ -2,9 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
-    "module": "commonjs",
+    "module": "preserve",
     "target": "es2016",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": [

libs/journey-bundles/transactions/tsconfig.json

@@ -6,7 +6,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "module": "preserve",
+    "moduleResolution": "bundler"
   },
   "files": [],
   "include": [],

libs/journey-bundles/transactions/tsconfig.spec.json

@@ -2,9 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
-    "module": "commonjs",
+    "module": "preserve",
     "target": "es2016",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": [

libs/journey-bundles/transfer/tsconfig.json

@@ -6,7 +6,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "module": "preserve",
+    "moduleResolution": "bundler"
   },
   "files": [],
   "include": [],

libs/journey-bundles/transfer/tsconfig.spec.json

@@ -2,9 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
-    "module": "commonjs",
+    "module": "preserve",
     "target": "es2016",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": [

libs/journey-bundles/user-accounts/tsconfig.json

@@ -17,7 +17,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "module": "preserve",
+    "moduleResolution": "bundler"
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,