如何在 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

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

从 'adal-angular' 导入广告；

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:

里面

写一个三重斜杠来导入类型
/// <reference path="../../../node_modules/@types/adal/index.d.ts" />
导入 adal.js 并使用公开加载程序将其公开为 AuthenticationContext
import 'expose?AuthenticationContext!../../../node_modules/adal-angular/lib/adal.js';
声明一个 AuthenticationContextStatic 类型的变量并为其赋值 AuthenticationContext
let createAuthContextFn: adal.AuthenticationContextStatic = AuthenticationContext;
现在您可以使用 createAuthContextFn
初始化身份验证上下文 let config: adal.Config = { clientId : 'test' }; let context = new createAuthContextFn(config);
（可选）要处理来自 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

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

How to load adal.js in webpack inside Angular 2 (Azure-AD)

azure-active-directory

adal

webpack

adal.js

angular