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

Answer 2

你也可以使用adal-ts

  

npm install adal-ts --save