Msal undefined in Angular 4.5 Service for Azure B2C authentication

Question

I am working on Angular 4.5 application and Azure B2C authentication work. I have separate app with my azure B2C configuration and is working so I know problem is in my code. I am getting error for Msal undefined.

I have install Msal library by

 npm install msal

but I am not sure if I need to add reference to package.json file before or after installation??

The Visual Studio Code doesn't give me any error but at browser it does.

error

 ReferenceError: 'Msal' is not defined
 at MsalService (http://localhost:4000/0.chunk.js:15545:9)
 at createClass (http://localhost:4000/main.bundle.js:11407:13)
 at _createProviderInstance (http://localhost:4000/main.bundle.js:11380:13)
 at createProviderInstance (http://localhost:4000/main.bundle.js:11214:5)
 at createViewNodes (http://localhost:4000/main.bundle.js:12679:17)
 at callViewAction (http://localhost:4000/main.bundle.js:13138:13)
 at execComponentViewsAction (http://localhost:4000/main.bundle.js:13047:13)
 at createViewNodes (http://localhost:4000/main.bundle.js:12716:5)
 at callViewAction (http://localhost:4000/main.bundle.js:13138:13)
 at execComponentViewsAction (http://localhost:4000/main.bundle.js:13047:13)
 at createViewNodes (http://localhost:4000/main.bundle.js:12716:5)
 at createRootView (http://localhost:4000/main.bundle.js:12584:5)
 at callWithDebugContext (http://localhost:4000/main.bund

Msal Service where error generating;

import { Injectable } from '@angular/core';

   declare var bootbox: any;
   declare var Msal: any;

 @Injectable()
 export class MsalService{

 access_token: string;

 tenantConfig = {       
    tenant: 'mytenant.onmicrosoft.com',
    clientID: 'my client id xxx',
    signUpSignInPolicy: 'B2C_1_SiUpIn',
    b2cScopes: ["http://myb2cscope/App/Read"]
 };

 authority = "https://login.microsoftonline.com/tfp/" + this.tenantConfig.tenant + "/" + this.tenantConfig.signUpSignInPolicy;   

 /* B2C SignIn SignUp Policy Configuration*/
   clientApplication = new Msal.UserAgentApplication(
    this.tenantConfig.clientID, this.authority, 
    function (errorDesc: any, token: any, error: any, tokenType: any) {
        // Called after loginRedirect or acquireTokenPopup
    }
 );

  public login(): void {
    var _this = this;
     this.clientApplication.loginPopup(this.tenantConfig.b2cScopes).then(function (idToken: any) {
         _this.clientApplication.acquireTokenSilent(_this.tenantConfig.b2cScopes).then(
             function (accessToken: any) {
                 _this.access_token = accessToken;
             }, function (error: any) {
                 _this.clientApplication.acquireTokenPopup(_this.tenantConfig.b2cScopes).then(
                     function (accessToken: any) {
                         _this.access_token = accessToken;
                     }, function (error: any) {
                         bootbox.alert("Error acquiring the popup:\n" + error);
                     });
             })
     }, function (error: any) {
         bootbox.alert("Error during login:\n" + error);
     });
 }

 logout(): void {
     this.clientApplication.logout();
 };

 isOnline(): boolean {
     return this.clientApplication.getUser() != null; 
 };

 getProduct(): string
      {
          return "12 Apples";
      }
   }

I am not sure if I am missing very obvious or if there is way to confirm my install Msal library is working????

score 2 · Answer 1 · answered Jan 14 '18 at 17:57

msal.d.ts file in MSAL version 0.1.0 doesn't have export hence it cannot be refered as import in service class and browser will through this error 'module'

Later versions 0.1.3 of MSAL seem to work well now, I'm using version 0.1.3, and it a simple:

 import * as Msal from 'msal';

score 1 · Answer 2 · edited Oct 25 '18 at 18:09

1

Instead of using pure msal.js library, you can try using msal@angular:

npm install msal-angular --save

Hope this helps!

edited Oct 25 '18 at 18:09

Joel

1,564
7
12
20

answered Oct 25 '18 at 15:40

Roman Olkhovsky

11
2

score 0 · Answer 3 · answered Jan 14 '18 at 16:28

0

Try to add <script type="text/javascript" src="path_to_msal_package/msal.js"></script> in your app.html or try this angular-msal package https://www.npmjs.com/package/msal-angular

Edit: The error you get ReferenceError: 'Msal' is not defined means that even if you installed 'Msal' lib, is not injected in the project.

Here is an example https://github.com/sunilbandla/msal-angular-sample

answered Jan 14 '18 at 16:28

DrNio

1,936
1
19
25

I am working on .. but no luck... even I refer to right path .. angular is complaining that it is not module – K.Z Jan 14 '18 at 17:14
[at-loader] Checking finished with 1 errors [at-loader] ./src/app/security/Services/msal.service.ts:2:20 TS2306: File 'C:/Developments/AntDev/Presentation/node_modules/msal/out/msal.d.ts' is not a module. – K.Z Jan 14 '18 at 17:14
that is how I am trying to add reference==> import {Msal} from 'node_modules/msal/out/msal'; – K.Z Jan 14 '18 at 17:15
i couldn't find something very specific with angular, so for now i would recommend adding the script like this https://github.com/sunilbandla/msal-angular-sample/blob/master/src/index.html – DrNio Jan 14 '18 at 17:35
https://github.com/sunilbandla/msal-angular-sample/blob/master/src/app/services/auth.service.ts – DrNio Jan 14 '18 at 17:36
apparently file doesn't have export and hence is not module so it won't work by importing... – K.Z Jan 14 '18 at 17:44
https://stackoverflow.com/questions/44228493/how-to-properly-import-and-use-the-msal-microsoft-authentication-library-for-js – K.Z Jan 14 '18 at 17:44
i have found solution, listed in my answer below – K.Z Jan 14 '18 at 17:57

Msal undefined in Angular 4.5 Service for Azure B2C authentication

error

Msal Service where error generating;

3 Answers3