OHID-330 Angular 19

workspace/.gitignore

@@ -45,3 +45,5 @@ Thumbs.db
 .nx/
 .nx/cache
 .nx/workspace-data
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

workspace/apps/pidp/.eslintrc.json

@@ -46,7 +46,8 @@
             "ignoreRestSiblings": false,
             "argsIgnorePattern": "_"
           }
-        ]
+        ],
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {

workspace/apps/pidp/jest.config.ts

@@ -17,9 +17,7 @@ export default {
       },
     ],
   },
-  transformIgnorePatterns: [
-    'node_modules/(?!.*\\.mjs$|swiper|ssr-window|dom7)',
-  ],
+  transformIgnorePatterns: ['node_modules/(?!(.*.mjs$|keycloak.js))'],
   snapshotSerializers: [
     'jest-preset-angular/build/serializers/no-ng-attributes',
     'jest-preset-angular/build/serializers/ng-snapshot',

workspace/apps/pidp/project.json

@@ -4,6 +4,7 @@
   "projectType": "application",
   "sourceRoot": "apps/pidp/src",
   "prefix": "app",
+  "tags": ["scope:pidp", "type:app"],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
@@ -74,7 +75,8 @@
       "options": {
         "port": 4200,
         "proxyConfig": "apps/pidp/proxy.conf.json"
-      }
+      },
+      "continuous": true
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
@@ -92,6 +94,5 @@
         "jestConfig": "apps/pidp/jest.config.ts"
       }
     }
-  },
-  "tags": ["scope:pidp", "type:app"]
+  }
 }

workspace/apps/pidp/src/app/app.component.spec.ts

@@ -1,8 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { TestBed } from '@angular/core/testing';
 import { Title } from '@angular/platform-browser';
-import { ActivatedRoute, Data, NavigationEnd, Scroll } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import {
+  ActivatedRoute,
+  Data,
+  NavigationEnd,
+  RouterModule,
+  Scroll,
+} from '@angular/router';
 
 import { Observable, of } from 'rxjs';
 
@@ -40,7 +45,7 @@ describe('AppComponent', () => {
     };
 
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
+      imports: [RouterModule.forRoot([])],
       providers: [
         AppComponent,
         {

workspace/apps/pidp/src/app/app.component.ts

@@ -27,11 +27,10 @@ import { SnowplowService } from '@core/services/snowplow.service';
 import { UtilsService } from '@core/services/utils.service';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  standalone: true,
-  imports: [RouterOutlet],
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    imports: [RouterOutlet]
 })
 export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   private readonly destroy$ = new Subject<void>();

workspace/apps/pidp/src/app/core/core.ts

@@ -1,10 +1,15 @@
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import {
-  ENVIRONMENT_INITIALIZER,
+  provideHttpClient,
+  withInterceptors,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import {
   EnvironmentProviders,
   InjectionToken,
   Provider,
   inject,
+  provideEnvironmentInitializer,
+  provideZoneChangeDetection,
 } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import {
@@ -14,12 +19,18 @@ import {
   withRouterConfig,
 } from '@angular/router';
 
+import {
+  INCLUDE_BEARER_TOKEN_INTERCEPTOR_CONFIG,
+  IncludeBearerTokenCondition,
+  createInterceptorCondition,
+  includeBearerTokenInterceptor,
+} from 'keycloak-angular';
 import { provideEnvironmentNgxMask } from 'ngx-mask';
 
 import { provideHttpInterceptors } from '@bcgov/shared/data-access';
 import { provideMaterialConfig, provideNgxProgressBar } from '@bcgov/shared/ui';
 
-import { provideKeycloak } from '@app/modules/keycloak/keycloak';
+import { provideKeycloakAngular } from '@app/modules/keycloak/keycloak.config';
 
 export interface CoreOptions {
   routes: Routes;
@@ -28,18 +39,30 @@ export interface CoreOptions {
 // create unique injection token for the guard
 export const CORE_GUARD = new InjectionToken<string>('CORE_GUARD');
 
+const bearerTokenCondition =
+  createInterceptorCondition<IncludeBearerTokenCondition>({
+    urlPattern: /^(.+)?$/i,
+  });
+
 export function provideCore(
   options: CoreOptions,
 ): (Provider | EnvironmentProviders)[] {
   return [
+    provideKeycloakAngular(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
     { provide: CORE_GUARD, useValue: 'CORE_GUARD' },
+    {
+      provide: INCLUDE_BEARER_TOKEN_INTERCEPTOR_CONFIG,
+      useValue: [bearerTokenCondition],
+    },
     provideAnimations(),
     provideNgxProgressBar(),
     provideMaterialConfig(),
     provideEnvironmentNgxMask(),
     provideHttpClient(
       // DI-based interceptors must be explicitly enabled.
       withInterceptorsFromDi(),
+      withInterceptors([includeBearerTokenInterceptor]),
     ),
     provideHttpInterceptors(),
     provideRouter(
@@ -56,12 +79,11 @@ export function provideCore(
       // disabled debug tracing
       // withDebugTracing()
     ),
-    provideKeycloak(),
     // order matters
     // (especially when accessing some of the above defined providers)
     // init has to be last
     {
-      provide: ENVIRONMENT_INITIALIZER,
+      provide: provideEnvironmentInitializer,
       multi: true,
       useValue(): void {
         const coreGuard = inject(CORE_GUARD, {

workspace/apps/pidp/src/app/core/party/party.resolver.spec.ts

@@ -4,15 +4,15 @@ import {
   ActivatedRouteSnapshot,
   ResolveFn,
   Router,
+  RouterModule,
   RouterStateSnapshot,
 } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
 
 import { Observable } from 'rxjs';
 
 import { randNumber } from '@ngneat/falso';
 import { Spy, createSpyFromClass, provideAutoSpy } from 'jest-auto-spies';
-import { KeycloakService } from 'keycloak-angular';
+import Keycloak from 'keycloak-js';
 
 import { APP_CONFIG, APP_DI_CONFIG } from '@app/app.config';
 import { AuthRoutes } from '@app/features/auth/auth.routes';
@@ -39,7 +39,7 @@ describe('partyResolver', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
+      imports: [RouterModule.forRoot([])],
       providers: [
         {
           provide: APP_CONFIG,
@@ -56,7 +56,7 @@ describe('partyResolver', () => {
         provideAutoSpy(LoggerService),
         provideAutoSpy(DocumentService),
         provideAutoSpy(Router),
-        provideAutoSpy(KeycloakService),
+        provideAutoSpy(Keycloak),
         provideAutoSpy(ActivatedRouteSnapshot),
         provideAutoSpy(RouterStateSnapshot),
       ],

workspace/apps/pidp/src/app/core/services/common-data.service.spec.ts

@@ -1,17 +1,15 @@
 import { TestBed } from '@angular/core/testing';
-import { CommonDataService } from './common-data.service';
+import { RouterModule } from '@angular/router';
 
-import { RouterTestingModule } from '@angular/router/testing';
+import { CommonDataService } from './common-data.service';
 
 describe('CommonDataService', () => {
   let service: CommonDataService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
-      providers: [
-        CommonDataService,
-      ],
+      imports: [RouterModule.forRoot([])],
+      providers: [CommonDataService],
     });
 
     service = TestBed.inject(CommonDataService);

workspace/apps/pidp/src/app/core/services/route-state.service.spec.ts

@@ -1,12 +1,12 @@
 import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterModule } from '@angular/router';
 
 import { RouteStateService } from './route-state.service';
 
 describe('RouteStateService', () => {
   beforeEach(() =>
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
+      imports: [RouterModule.forRoot([])],
     }),
   );
 

workspace/apps/pidp/src/app/features/access/components/access-request-card/access-request-card.component.ts

@@ -11,17 +11,16 @@ import {
 } from '@bcgov/shared/ui';
 
 @Component({
-  selector: 'app-access-request-card',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FaIconComponent,
-    InjectViewportCssClassDirective,
-    TextButtonDirective,
-    NgClass,
-  ],
-  templateUrl: './access-request-card.component.html',
-  styleUrl: './access-request-card.component.scss',
+    selector: 'app-access-request-card',
+    imports: [
+        CommonModule,
+        FaIconComponent,
+        InjectViewportCssClassDirective,
+        TextButtonDirective,
+        NgClass,
+    ],
+    templateUrl: './access-request-card.component.html',
+    styleUrl: './access-request-card.component.scss'
 })
 export class AccessRequestCardComponent {
   @Input() public icon: IconProp;

workspace/apps/pidp/src/app/features/access/components/enrolment-error/enrolment-error.component.ts

@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
 import { AlertComponent, AlertContentDirective } from '@bcgov/shared/ui';
 
 @Component({
-  selector: 'app-enrolment-error',
-  template: `
+    selector: 'app-enrolment-error',
+    template: `
     <ui-alert
       type="info"
       icon="error_outline"
@@ -15,8 +15,7 @@ import { AlertComponent, AlertContentDirective } from '@bcgov/shared/ui';
       </ng-container>
     </ui-alert>
   `,
-  styles: [],
-  standalone: true,
-  imports: [AlertComponent, AlertContentDirective],
+    styles: [],
+    imports: [AlertComponent, AlertContentDirective]
 })
 export class EnrolmentErrorComponent {}

workspace/apps/pidp/src/app/features/access/pages/access-requests-page/access-requests.page.spec.ts

@@ -4,7 +4,7 @@ import { TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { provideAutoSpy } from 'jest-auto-spies';
-import { KeycloakService } from 'keycloak-angular';
+import Keycloak from 'keycloak-js';
 
 import { APP_CONFIG, APP_DI_CONFIG } from '@app/app.config';
 
@@ -23,7 +23,7 @@ describe('PortalCardComponent', () => {
           useValue: APP_DI_CONFIG,
         },
         provideAutoSpy(HttpClient),
-        provideAutoSpy(KeycloakService),
+        provideAutoSpy(Keycloak),
       ],
     });
     component = TestBed.inject(AccessRequestsPage);

workspace/apps/pidp/src/app/features/access/pages/access-requests-page/access-requests.page.ts

@@ -32,19 +32,18 @@ import { Constants } from '@app/shared/constants';
 import { AccessRequestCardComponent } from '../../components/access-request-card/access-request-card.component';
 
 @Component({
-  selector: 'app-access-request-page',
-  templateUrl: './access-requests.page.html',
-  styleUrls: ['./access-requests.page.scss'],
-  standalone: true,
-  imports: [
-    BreadcrumbComponent,
-    FaIconComponent,
-    InjectViewportCssClassDirective,
-    MatButtonModule,
-    NgIf,
-    AccessRequestCardComponent,
-    NgFor,
-  ],
+    selector: 'app-access-request-page',
+    templateUrl: './access-requests.page.html',
+    styleUrls: ['./access-requests.page.scss'],
+    imports: [
+        BreadcrumbComponent,
+        FaIconComponent,
+        InjectViewportCssClassDirective,
+        MatButtonModule,
+        NgIf,
+        AccessRequestCardComponent,
+        NgFor,
+    ]
 })
 export class AccessRequestsPage implements OnInit, OnDestroy {
   /**

workspace/apps/pidp/src/app/features/access/pages/bc-provider-application/bc-provider-application.page.spec.ts

@@ -8,7 +8,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { randNumber, randTextRange } from '@ngneat/falso';
 import { NavigationService } from '@pidp/presentation';
 import { Spy, createSpyFromClass, provideAutoSpy } from 'jest-auto-spies';
-import { KeycloakService } from 'keycloak-angular';
+import Keycloak from 'keycloak-js';
 
 import { APP_CONFIG, APP_DI_CONFIG } from '@app/app.config';
 import { PartyService } from '@app/core/party/party.service';
@@ -55,7 +55,7 @@ describe('BcProviderApplicationPage', () => {
         },
         provideAutoSpy(HttpClient),
         provideAutoSpy(FormUtilsService),
-        provideAutoSpy(KeycloakService),
+        provideAutoSpy(Keycloak),
         provideAutoSpy(NavigationService),
         provideAutoSpy(Router),
       ],

workspace/apps/pidp/src/app/features/access/pages/bc-provider-application/bc-provider-application.page.ts

@@ -81,7 +81,6 @@ import { BcProviderApplicationResource } from './bc-provider-application-resourc
   selector: 'app-bc-provider-application',
   templateUrl: './bc-provider-application.page.html',
   styleUrls: ['./bc-provider-application.page.scss'],
-  standalone: true,
   imports: [
     AsyncPipe,
     BreadcrumbComponent,