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

Question

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

import adal from 'adal-angular'; 

它给我“adal 未定义”。这是为什么？

我想在我的 Angular 2 项目中使用 adal.js。
我已经跑了

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

然后，在我的 component.ts 文件中，如果我这样做:

从'adal-angular'导入adal；

adal 未定义。

如何将它正确地导入到我的 component.ts 文件中，并使用类型？

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 并使用公开加载程序将其公开为 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);
}