Fix InjectionToken types to allow new inject(Token) syntax to be used with msal-angular (#7653)

change/@azure-msal-angular-f9e43c58-0c6f-4239-9cae-ddd37a47e893.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "dx: Fix InjectionToken types to allow new Angular 14+ inject(TOKEN) syntax.",
+  "packageName": "@azure/msal-angular",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

lib/msal-angular/src/constants.spec.ts

@@ -0,0 +1,50 @@
+import { Component, inject } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import {
+  MSAL_BROADCAST_CONFIG,
+  MSAL_GUARD_CONFIG,
+  MSAL_INSTANCE,
+  MSAL_INTERCEPTOR_CONFIG,
+} from "./constants";
+
+describe("Injection Tokens", () => {
+  it("should produce helpful type errors on mismatch", async () => {
+    // These are all cases where a type error is expected.
+    // While Jest cannot verify the type errors, we can use TypeScript's
+    // type checking to verify that the errors are present.
+    @Component({
+      selector: "app-strongly-typed-functional-injection",
+      template: "",
+    })
+    class MistypedFunctionalInjection {
+      // @ts-expect-error MSAL_INSTANCE is not a string.
+      msalInstance: string = inject(MSAL_INSTANCE);
+      // @ts-expect-error MSAL_GUARD_CONFIG is not a string.
+      guardConfig: string = inject(MSAL_GUARD_CONFIG);
+      // @ts-expect-error MSAL_INTERCEPTOR_CONFIG is not a string.
+      interceptorConfig: string = inject(MSAL_INTERCEPTOR_CONFIG);
+      // @ts-expect-error MSAL_BROADCAST_CONFIG is not a string.
+      broadcastConfig: string = inject(MSAL_BROADCAST_CONFIG);
+    }
+
+    await TestBed.configureTestingModule({
+      providers: [
+        MSAL_INSTANCE,
+        MSAL_GUARD_CONFIG,
+        MSAL_INTERCEPTOR_CONFIG,
+        MSAL_BROADCAST_CONFIG,
+      ].map((provide, useValue) => ({
+        provide,
+        useValue,
+      })),
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(MistypedFunctionalInjection);
+    const instance = fixture.componentInstance;
+
+    expect(instance.msalInstance).toBeDefined();
+    expect(instance.guardConfig).toBeDefined();
+    expect(instance.interceptorConfig).toBeDefined();
+    expect(instance.broadcastConfig).toBeDefined();
+  });
+});

lib/msal-angular/src/constants.ts

@@ -5,16 +5,21 @@
 
 import { InjectionToken } from "@angular/core";
 
-export const MSAL_INSTANCE = new InjectionToken<string>("MSAL_INSTANCE");
+import { type IPublicClientApplication } from "@azure/msal-browser";
+import { type MsalBroadcastConfiguration } from "./msal.broadcast.config";
+import { type MsalGuardConfiguration } from "./msal.guard.config";
+import { type MsalInterceptorConfiguration } from "./msal.interceptor.config";
 
-export const MSAL_GUARD_CONFIG = new InjectionToken<string>(
-  "MSAL_GUARD_CONFIG"
+export const MSAL_INSTANCE = new InjectionToken<IPublicClientApplication>(
+  "MSAL_INSTANCE"
 );
 
-export const MSAL_INTERCEPTOR_CONFIG = new InjectionToken<string>(
-  "MSAL_INTERCEPTOR_CONFIG"
+export const MSAL_GUARD_CONFIG = new InjectionToken<MsalGuardConfiguration>(
+  "MSAL_GUARD_CONFIG"
 );
 
-export const MSAL_BROADCAST_CONFIG = new InjectionToken<string>(
-  "MSAL_BROADCAST_CONFIG"
-);
+export const MSAL_INTERCEPTOR_CONFIG =
+  new InjectionToken<MsalInterceptorConfiguration>("MSAL_INTERCEPTOR_CONFIG");
+
+export const MSAL_BROADCAST_CONFIG =
+  new InjectionToken<MsalBroadcastConfiguration>("MSAL_BROADCAST_CONFIG");