Question

我使用Angular1构建了一个小型测试应用程序，该应用程序使用ADAL连接到Office365租户。由于我希望开始包含Angular2组件，我尝试使用JSPM和SystemJS加载我的模块，根据angular.io上的示例。

我正在为遇到同样错误消息的任何人提供以下信息：

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

我花了几个小时才弄清楚出了什么问题，盲目地踩着ADAL代码。 ADAL.js文件依赖于它在全局命名空间中声明AuthenticationContext，并在将文件加载到“模块”时使用SystemJS包，它现在将其隐藏在依赖于它的另一段代码中。

我想微软可以更好地打包它的代码 - 理想情况下把它变成NPM包（而不仅仅是支持Bower），但我真的不知道如何解决这个问题......

为了获取文件，我使用了jspm命令，例如：

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

使用适当的依赖关系干净地填充我的package.json，允许轻松地在另一台开发机器上安装。

当我使用Microsoft提供的示例时，他们只是使用HTML中的脚本标记静态加载javascript文件。 SystemJS在开发和生产方面使它变得更加简单，因为它在运行时动态加载。但是，当我依赖下面主应用程序代码中的import语句时，SystemJS似乎将adal.js中的代码包装在“模块”中，因此它有效地隐藏了以前存在于全局范围内的变量。这会导致错误，因为全局未定义变量AuthenticationContext。

我的主要应用代码如下：

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

Answer 1

我的修复只是在我的代码中注释掉第二行：

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

要获取代码，我只需要在我的index.html文件中使用脚本标记手动加载它，该文件引用Microsoft提供的CDN

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

这不是超级干净，但它有效。

Answer 2

您应该只能将adal导出为AuthenticationContext。我已经测试了以下systemjs配置，它对我有用。

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'
}

然后，您可以import 'adal-angular';和AuthenticationContext。

与SystemJS加载程序一起使用时，ADAL库会受到损坏 - ReferenceError：未定义AuthenticationContext

2 个答案: