如何在Angular 2 (Azure-AD)的webpack中加载adal.js

Question

在我的NG2项目中，如果我写:

import adal from 'adal-angular'; 

它给我'adal is undefined'。为什么呢?

我想在angular 2项目中使用adal.js。
我已经运行了

npm install adal-angular --save
npm install @types/adal --save

然后，在我的组件中。

import adal from 'adal-angular';

adal未定义。

如何在组件中正确导入它?并使用?

Answer 1

要解决这个问题，您需要做一些事情:

npm install adal-angular --save        (=>"@types/adal": "^1.0.22")
npm install @types/adal --save-dev     (=>"adal-angular": "^1.0.12")
npm install expose-loader

安装了这些包后，您必须执行以下操作:
在你的component.ts:

1. 写一个三斜杠来导入类型
   /// <reference path="../../../node_modules/@types/adal/index.d.ts" />
2. 导入adal.js并使用expose加载器将其暴露为AuthenticationContext
   import 'expose?AuthenticationContext!../../../node_modules/adal-angular/lib/adal.js';
3. 声明一个AuthenticationContextStatic类型的变量，并给它赋AuthenticationContext的值
   let createAuthContextFn: adal.AuthenticationContextStatic = AuthenticationContext;
   

4. 现在您可以使用createAuthContextFn
   初始化身份验证上下文 let config: adal.Config = { clientId : 'test' }; let context = new createAuthContextFn(config);

5. (可选)要处理AD的回调，在你的引导组件AppComponent中编写这段代码:if (context.isCallback(location.hash)) { var requestInfo = context.getRequestInfo(location.hash); context.saveTokenFromHash(requestInfo); }

Answer 2

也可以使用adal-ts

npm install adal-ts——save