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 use adal.js inside my angular 2 project.
I already have run

npm install adal-angular --save
npm install @types/adal --save

Then, inside my component.ts file, if I do:

import adal from 'adal-angular';

adal is undefined.

How can I import it correctly inside my component.ts file, and also use the typings?

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); }