ERROR TypeError: this.instance.initializeWrapperLibrary

Description: I'm getting "core.js:6140 ERROR TypeError: this.instance.initializeWrapperLibrary is not a function" when using angular version 11.2.5. But, its working fine with "https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v2-samples/angular11-sample-app". Please advise

Code: `import { BrowserModule } from '@angular/platform-browser'; import { NgModule, APP_INITIALIZER } from '@angular/core'; import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'; import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser'; import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';

import { ApiKeyInterceptor } from './apikey.interceptor'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { AppConfig } from './app.config'; import { environment } from '../environments/environment'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, MsalModule ], providers: [ AppConfig, { provide: APP_INITIALIZER, useFactory: initializeApp, deps: [AppConfig], multi: true }, { provide: HTTP_INTERCEPTORS, useClass: ApiKeyInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true }, { provide: MSAL_INSTANCE, useFactory: MSALInstanceFactory, multi: true}, { provide: MSAL_GUARD_CONFIG, useFactory: MSALGuardConfigFactory, multi: true }, { provide: MSAL_INTERCEPTOR_CONFIG, useFactory: MSALInterceptorConfigFactory, multi: true }, MsalService, MsalGuard, MsalBroadcastService ], bootstrap: [AppComponent] }) export class AppModule { }

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1; // Remove this line to use Angular Universal

export function initializeApp(appConfig: AppConfig) { return () => appConfig.load(); }

export function loggerCallback(logLevel: LogLevel, message: string) { console.log(message); }

export function MSALInstanceFactory(): IPublicClientApplication { return new PublicClientApplication({ auth: { clientId: AppConfig.settings.msalConfig.clientID, authority: AppConfig.settings.msalConfig.authority, redirectUri: AppConfig.settings.msalConfig.redirectUri, postLogoutRedirectUri: AppConfig.settings.msalConfig.redirectUri }, cache: { cacheLocation: BrowserCacheLocation.LocalStorage, storeAuthStateInCookie: isIE, // set to true for IE 11. Remove this line to use Angular Universal }, system: { loggerOptions: { loggerCallback, logLevel: LogLevel.Info, piiLoggingEnabled: false } } }); }

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration { const protectedResourceMap = new Map<any, any>(AppConfig.settings.msalConfig.protectedResourceMap); return { interactionType: InteractionType.Redirect, protectedResourceMap }; }

export function MSALGuardConfigFactory(): MsalGuardConfiguration { return { interactionType: InteractionType.Redirect, authRequest: { scopes: AppConfig.settings.msalConfig.consentScopes }, loginFailedRoute: '/' }; }`

Error Message: core.js:6140 ERROR TypeError: this.instance.initializeWrapperLibrary is not a function at new MsalService (azure-msal-angular.js:35) at Object.MsalService_Factory [as factory] (azure-msal-angular.js:79) at R3Injector.hydrate (core.js:11363) at R3Injector.get (core.js:11183) at NgModuleRef$1.get (core.js:25238) at Object.get (core.js:24952) at lookupTokenUsingModuleInjector (core.js:3319) at getOrCreateInjectable (core.js:3431) at ɵɵdirectiveInject (core.js:14612) at NodeInjectorFactory.AppComponent_Factory [as factory]

Library: "@azure/msal-angular": "^2.0.0-beta.0"

AzureAD / microsoft-authentication-library-for-js

ERROR TypeError: this.instance.initializeWrapperLibrary #3211