angularjs – 与SystemJS加载器一起使用时,ADAL库会受到损坏 – ReferenceError：未定义AuthenticationContext

2023年5月23日 239次阅读

我使用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};

最佳答案 我的修复只是注释掉我的代码中的第二行：

//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>

这不是超级干净,但它的工作原理.

点赞