diff --git a/change/@azure-msal-angular-f9e43c58-0c6f-4239-9cae-ddd37a47e893.json b/change/@azure-msal-angular-f9e43c58-0c6f-4239-9cae-ddd37a47e893.json new file mode 100644 index 0000000000..d53f4e8b50 --- /dev/null +++ b/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": "bradkovach@gmail.com", + "dependentChangeType": "patch" +} diff --git a/lib/msal-angular/src/constants.spec.ts b/lib/msal-angular/src/constants.spec.ts new file mode 100644 index 0000000000..181e6452db --- /dev/null +++ b/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(); + }); +}); diff --git a/lib/msal-angular/src/constants.ts b/lib/msal-angular/src/constants.ts index dbb44746a5..5d79d6f0e1 100644 --- a/lib/msal-angular/src/constants.ts +++ b/lib/msal-angular/src/constants.ts @@ -5,16 +5,21 @@ import { InjectionToken } from "@angular/core"; -export const MSAL_INSTANCE = new InjectionToken("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( - "MSAL_GUARD_CONFIG" +export const MSAL_INSTANCE = new InjectionToken( + "MSAL_INSTANCE" ); -export const MSAL_INTERCEPTOR_CONFIG = new InjectionToken( - "MSAL_INTERCEPTOR_CONFIG" +export const MSAL_GUARD_CONFIG = new InjectionToken( + "MSAL_GUARD_CONFIG" ); -export const MSAL_BROADCAST_CONFIG = new InjectionToken( - "MSAL_BROADCAST_CONFIG" -); +export const MSAL_INTERCEPTOR_CONFIG = + new InjectionToken("MSAL_INTERCEPTOR_CONFIG"); + +export const MSAL_BROADCAST_CONFIG = + new InjectionToken("MSAL_BROADCAST_CONFIG");