4

I built a small test application using Angular1 that uses ADAL to connect to an Office365 tenant. Since I wish to start including Angular2 components, I tried to use JSPM and SystemJS to load my modules, as per the examples on angular.io.

I am putting the information below for anyone who stumbles on the same error message:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
ReferenceError: AuthenticationContext is not defined

It took me literally hours to figure out what was wrong, stepping blindly through ADAL code. The ADAL.js file relies on the fact that it declares AuthenticationContext in the global namespace, and using SystemJS packages it when it loads the file into a "module" which now hides it from the other piece of code that relies on it.

I guess Microsoft can do a better job packaging its code - ideally make it an NPM package (instead of just supporting Bower), but I don't really know how this can be solved...

To obtain the files, I used jspm commands such as:

jspm install angular
jspm install github:azuread/azure-activedirectory-library-for-js

that cleanly populated my package.json with the proper dependencies, allowing installation on another dev machine easily.

When I use the Microsoft supplied examples, they simply statically load the javascript files using script tags in the HTML. SystemJS makes it a whole lot simpler in both development and production, since it loads dynamically at run time. However, when I rely on the import statements in my main app code below, SystemJS seems to wrap the code in adal.js inside a "module", so it effectively hides variables that used to exist in the global scope. This result in an error because the variable AuthenticationContext is then undefined globally.

My main app code looks like:

import 'angular';
import 'azuread/azure-activedirectory-library-for-js/dist/adal.min';
import 'azuread/azure-activedirectory-library-for-js/dist/adal-angular.min';
var app = angular.module('app', ['AdalAngular']);

app.config(
['$httpProvider', 'adalAuthenticationServiceProvider', function
( $httpProvider,   adalProvider) {

  var endpoints = {
    "https://login.microsoftonline.com": "56fc9778-8aac-45d2-9305-b9171ffafa8/oauth2/authorize"
  };

  adalProvider.init(
      {
        tenant: '56fc9778-8aac-45d2-9305-b9171ffafa8',
        clientId: 'ace0c960-c792-4620-884e-9029ba16b61',
        endpoints: endpoints
      },
      $httpProvider
  );
}]);
export {app};
pierrebo
  • 904
  • 2
  • 10
  • 22

2 Answers2

1

My fix is simply to comment out the second line in my code:

//import 'azuread/azure-activedirectory-library-for-js/dist/adal.min';

and to get the code, I just need to manually load it using a script tag in my index.html file that refers to the CDN supplied by Microsoft

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/adal.min.js"></script>

This is not super clean, but it works.

pierrebo
  • 904
  • 2
  • 10
  • 22
1

You should just be able to export adal as AuthenticationContext. I've tested the following systemjs config and it works for me.

meta: {
  'node_modules/angular/angular.js': { format: 'global', exports: 'angular' },
  'node_modules/adal-angular/dist/adal.min.js': { format: 'global', exports: 'AuthenticationContext' },
  'node_modules/adal-angular/dist/adal-angular.min.js': { format: 'global', deps: ['angular', 'adal'] }
},
paths: {
  'angular': 'node_modules/angular/angular.js',
  'adal': 'node_modules/adal-angular/dist/adal.min.js',
  'adal-angular': 'node_modules/adal-angular/dist/adal-angular.min.js'
}

You can then just import 'adal-angular'; and AuthenticationContext should be available.

Ross
  • 1,425
  • 1
  • 19
  • 38