angularjs - ADAL 库在与 SystemJS 加载程序一起使用时被破坏 - ReferenceError : AuthenticationContext is not defined

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>

这不是 super 干净，但它有效。