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?

hannes neukermans · Accepted Answer · 2016-10-19T15:02:05.983

20

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:

write a triple slash to import the typings
/// <reference path="../../../node_modules/@types/adal/index.d.ts" />
import adal.js and expose it as AuthenticationContext using the expose loader
import 'expose?AuthenticationContext!../../../node_modules/adal-angular/lib/adal.js';
declare a variable of type AuthenticationContextStatic and assign it value of AuthenticationContext
let createAuthContextFn: adal.AuthenticationContextStatic = AuthenticationContext;
Now you can initialize the authentication context using the createAuthContextFn
let config: adal.Config = { clientId : 'test' }; let context = new createAuthContextFn(config);
(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); }

edited Oct 19 '16 at 15:02

answered Oct 14 '16 at 14:18

hannes neukermans

12,017
7
37
56

1

Can you provide a plunkr of this? I am unable to get past the let part as I get errors on step 5 – Isaac Levin Oct 26 '16 at 13:25
1

Here is a gist [auth.provider.ts](https://gist.github.com/HNeukermans/b282bb6779c91e7b1c98caca24a2c5b4) – hannes neukermans Oct 26 '16 at 13:55
you can clone [Ng2a.Frontend](https://github.com/HNeukermans/Ng2a.Frontend). To get a working example – hannes neukermans Oct 26 '16 at 13:57
I just took a look at that repo. I get an error trying to run the server using the quickstart :/ – Isaac Levin Oct 26 '16 at 13:58
1

also, in that auth.provider.ts, what is AuthContext? – Isaac Levin Oct 26 '16 at 14:04
if you use typescript and want to use adal, you can also try using npm install adal-ts. – hannes neukermans Dec 03 '16 at 20:25
@hannesneukermans Thanks for the help here. Can you post a gist of your authentication.context.ts file, too? – Robert Bernstein Jul 07 '17 at 19:01

score 2 · Answer 2 · answered Nov 17 '16 at 21:39

2

you can also use adal-ts

npm install adal-ts --save

answered Nov 17 '16 at 21:39

hannes neukermans

12,017
7
37
56

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

2 Answers2

Linked