How to load adal.js in webpack inside Angular 2 (Azure-AD)

Question

Inside my NG2 project, if I write:

import adal from \'adal-angular\'; 

it gives me \'adal is undefined\'. Why is that?

I want to u

Answer 1

To fix this, you will need to do a number of things:

npm install adal-angular --save        (=>"@types/adal": "^1.0.22")
npm install @types/adal --save-dev     (=>"adal-angular": "^1.0.12")
npm install expose-loader

With those packages installed, you have to do the following:
inside your component.ts:

1. write a triple slash to import the typings
   /// <reference path="../../../node_modules/@types/adal/index.d.ts" />
2. import adal.js and expose it as AuthenticationContext using the expose loader
   import 'expose?AuthenticationContext!../../../node_modules/adal-angular/lib/adal.js';
3. declare a variable of type AuthenticationContextStatic and assign it value of AuthenticationContext
   let createAuthContextFn: adal.AuthenticationContextStatic = AuthenticationContext;
   

4. Now you can initialize the authentication context using the createAuthContextFn
   let config: adal.Config = { clientId : 'test' }; let context = new createAuthContextFn(config);

5. (Optionally) To handle the callback from AD, write this piece of code inside your bootstrapped component aka AppComponent:
   if (context.isCallback(location.hash)) { var requestInfo = context.getRequestInfo(location.hash); context.saveTokenFromHash(requestInfo); }

Answer 2

you can also use adal-ts

npm install adal-ts --save