search

AzureAD / microsoft-authentication-library-for-js

Microsoft Authentication Library (MSAL) for JS
http://aka.ms/aadv2
MIT License
3.64k stars 2.65k forks source link

ERROR TypeError: this.instance.initializeWrapperLibrary #3212

Closed venkatesh-thatham closed 3 years ago

venkatesh-thatham commented 3 years ago

Library

Framework

Description

Error Message

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]

MSAL Configuration

// Provide configuration values here.
// For Azure B2C issues, please include your policies.

Reproduction steps

app.config.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpBackend } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable()
export class AppConfig {
    private http: HttpClient;

    static settings: any;

    constructor(handler: HttpBackend) {
        this.http = new HttpClient(handler);
    }

    load() {
        const jsonFile = `assets/${environment.appConfig}`;
        return new Promise<void>((resolve, reject) => {
            this.http.get(jsonFile).subscribe(
                data => {
                    AppConfig.settings = data
                    resolve()
                },
                error => {
                    console.log(error)
                    reject()
                }
            )
        });
    }
}

app.module.ts

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: '/'
};
}

Expected behavior

Identity Provider

Browsers/Environment

Regression

Security

Source

github-actions[bot] commented 3 years ago

Invalid Issue Template: Please update the original issue and make sure to fill out the entire issue template so we can better assist you.

tnorling commented 3 years ago

@thatham What versions of msal-angular and msal-browser are you using? Please make sure you're using the latest: msal-angular@2.0.0-beta.0 and msal-browser@2.12.0

venkatesh-thatham commented 3 years ago

@tnorling I'm using "@azure/msal-angular": "^2.0.0-beta.0" and "@azure/msal-browser": "^2.12.0". Here's my package.json for your reference.

{
  "name": "test-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "hmr": "ng serve --configuration hmr",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.5",
    "@angular/common": "~11.2.5",
    "@angular/compiler": "~11.2.5",
    "@angular/core": "~11.2.5",
    "@angular/forms": "~11.2.5",
    "@angular/platform-browser": "~11.2.5",
    "@angular/platform-browser-dynamic": "~11.2.5",
    "@angular/router": "~11.2.5",
    "@azure/msal-angular": "^2.0.0-beta.0",
    "@azure/msal-browser": "^2.12.0",
    "rxjs": "~6.6.0",
    "rxjs-compat": "^6.5.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.3",
    "@angular/cli": "~11.2.4",
    "@angular/compiler-cli": "~11.2.5",
    "@angular/language-service": "~11.2.5",
    "@angularclass/hmr": "^2.1.3",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}
tnorling commented 3 years ago

@thatham Can you try reinstalling your packages? initializeWrapperLibrary is a function and we haven't seen this before. Are you able to reproduce this with our samples?

venkatesh-thatham commented 3 years ago

@tnorling found the root cause, I've used muliptovider for factory "multi: true" that cause this error. Thank you for your time and effort