我使用 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 将其打包，该"模块"现在将其隐藏在依赖于它的其他代码段中。
我想Microsoft可以更好地打包其代码 - 理想情况下使其成为 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';
要获取代码，我只需要使用索引中的脚本标记手动加载它.html该文件引用 Microsoft 提供的 CDN
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/adal.min.js"></script>
这不是超级干净，但它有效。
您应该能够将 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应该可用。