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

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); }