Update example app

Author: frederikprijck

projects/playground/src/app/app.component.spec.ts

@@ -5,7 +5,10 @@ import { AppComponent } from './app.component';
 import { AuthService } from '../../../auth0-angular/src/lib/auth.service';
 import { BehaviorSubject, of, ReplaySubject } from 'rxjs';
 import { ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 import { expect } from '@jest/globals';
 
 describe('AppComponent', () => {
@@ -29,13 +32,14 @@ describe('AppComponent', () => {
     } as any;
 
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule, ReactiveFormsModule, HttpClientModule],
       declarations: [AppComponent],
+      imports: [RouterTestingModule, ReactiveFormsModule],
       providers: [
         {
           provide: AuthService,
           useValue: authMock,
         },
+        provideHttpClient(withInterceptorsFromDi()),
       ],
     }).compileComponents();
 
@@ -84,7 +88,8 @@ describe('AppComponent', () => {
   describe('when user is authenticated', () => {
     beforeEach(() => {
       const loading = authMock.isLoading$ as BehaviorSubject<boolean>;
-      const authenticated = authMock.isAuthenticated$ as BehaviorSubject<boolean>;
+      const authenticated =
+        authMock.isAuthenticated$ as BehaviorSubject<boolean>;
       const user = authMock.user$ as BehaviorSubject<any>;
 
       loading.next(false);
@@ -189,9 +194,9 @@ describe('AppComponent', () => {
       );
       const form = component.accessTokenOptionsForm.controls;
       form['usePopup'].setValue(false);
-      ((authMock.getAccessTokenSilently as unknown) as jest.SpyInstance).mockReturnValue(
-        of('access token silently')
-      );
+      (
+        authMock.getAccessTokenSilently as unknown as jest.SpyInstance
+      ).mockReturnValue(of('access token silently'));
 
       const btnRefresh = divToken.querySelector('button');
       btnRefresh?.click();
@@ -212,9 +217,9 @@ describe('AppComponent', () => {
       const form = component.accessTokenOptionsForm.controls;
       form['usePopup'].setValue(false);
       form['ignoreCache'].setValue(false);
-      ((authMock.getAccessTokenSilently as unknown) as jest.SpyInstance).mockReturnValue(
-        of('access token silently')
-      );
+      (
+        authMock.getAccessTokenSilently as unknown as jest.SpyInstance
+      ).mockReturnValue(of('access token silently'));
 
       const btnRefresh = divToken.querySelector('button');
       btnRefresh?.click();
@@ -235,9 +240,9 @@ describe('AppComponent', () => {
       const form = component.accessTokenOptionsForm.controls;
       form['usePopup'].setValue(false);
       form['ignoreCache'].setValue(true);
-      ((authMock.getAccessTokenSilently as unknown) as jest.SpyInstance).mockReturnValue(
-        of('access token silently')
-      );
+      (
+        authMock.getAccessTokenSilently as unknown as jest.SpyInstance
+      ).mockReturnValue(of('access token silently'));
 
       const btnRefresh = divToken.querySelector('button');
       btnRefresh?.click();
@@ -257,9 +262,9 @@ describe('AppComponent', () => {
       );
       const form = component.accessTokenOptionsForm.controls;
       form['usePopup'].setValue(true);
-      ((authMock.getAccessTokenWithPopup as unknown) as jest.SpyInstance).mockReturnValue(
-        of('access token popup')
-      );
+      (
+        authMock.getAccessTokenWithPopup as unknown as jest.SpyInstance
+      ).mockReturnValue(of('access token popup'));
 
       const btnRefresh = divToken.querySelector('button');
       btnRefresh?.click();
@@ -274,7 +279,8 @@ describe('AppComponent', () => {
   describe('when user is not authenticated', () => {
     beforeEach(() => {
       const loading = authMock.isLoading$ as BehaviorSubject<boolean>;
-      const authenticated = authMock.isAuthenticated$ as BehaviorSubject<boolean>;
+      const authenticated =
+        authMock.isAuthenticated$ as BehaviorSubject<boolean>;
 
       loading.next(false);
       authenticated.next(false);

projects/playground/src/app/app.module.ts

@@ -2,9 +2,10 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, APP_INITIALIZER } from '@angular/core';
 import {
   HttpClient,
-  HttpClientModule,
   HTTP_INTERCEPTORS,
   HttpBackend,
+  provideHttpClient,
+  withInterceptorsFromDi,
 } from '@angular/common/http';
 import { AuthModule } from 'projects/auth0-angular/src/lib/auth.module';
 import { AuthHttpInterceptor } from 'projects/auth0-angular/src/lib/auth.interceptor';
@@ -25,14 +26,13 @@ import { AuthClientConfig } from 'projects/auth0-angular/src/lib/auth.config';
  * @param handler The HttpBackend instance used to instantiate HttpClient manually
  * @param config The AuthConfigClient service
  */
-const configInitializer = (
-  handler: HttpBackend,
-  config: AuthClientConfig
-): (() => Promise<any>) => () =>
-  new HttpClient(handler)
-    .get('/assets/config.json')
-    .toPromise()
-    .then((loadedConfig: any) => config.set(loadedConfig)); // Set the config that was loaded asynchronously here
+const configInitializer =
+  (handler: HttpBackend, config: AuthClientConfig): (() => Promise<any>) =>
+  () =>
+    new HttpClient(handler)
+      .get('/assets/config.json')
+      .toPromise()
+      .then((loadedConfig: any) => config.set(loadedConfig)); // Set the config that was loaded asynchronously here
 
 @NgModule({
   declarations: [
@@ -43,12 +43,11 @@ const configInitializer = (
     NestedChildRouteComponent,
     ErrorComponent,
   ],
+  bootstrap: [AppComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
     ReactiveFormsModule,
-    HttpClientModule,
-
     // This playground has been configured by default to use dynamic configuration.
     // If you wish to specify configuration to `forRoot` directly, uncomment `authConfig`
     // here, and comment out the APP_INITIALIZER config in the providers array below.
@@ -62,7 +61,7 @@ const configInitializer = (
       multi: true,
     },
     { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true },
+    provideHttpClient(withInterceptorsFromDi()),
   ],
-  bootstrap: [AppComponent],
 })
 export class AppModule {}