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

在我的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；

adal是不确定的。

如何将其正确导入我的component.ts文件中，并使用键入？

最佳答案

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

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并使用暴露加载器将其暴露为AuthenticationContextimport '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);}

关于angular - 如何在Angular 2(Azure-AD)的webpack中加载adal.js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40044892/