如何在 Angular 2 (Azure-AD) 中的 webpack 中加载 adal.js [英] How to load adal.js in webpack inside Angular 2 (Azure-AD)

问题描述

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

Inside my NG2 project, if I write:

import adal from 'adal-angular'; 

它给了我'adal 未定义'.这是为什么?

it gives me 'adal is undefined'. Why is that?

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

I want to use adal.js inside my angular 2 project.
I already have run

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

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

Then, inside my component.ts file, if I do:

从'adal-angular'导入adal；

import adal from 'adal-angular';

adal 未定义.

如何在我的 component.ts 文件中正确导入它，并使用类型?

推荐答案

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

To fix this, you will need to do a number of things:

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 中:

With those packages installed, you have to do the following:
inside your component.ts:

1. 写一个三斜杠来导入类型
   ///
2. 导入 adal.js 并使用公开加载程序将其公开为 AuthenticationContext
   import 'expose?AuthenticationContext!../../../node_modules/adal-angular/lib/adal.js';
3. 声明一个 AuthenticationContextStatic 类型的变量并为其赋值 AuthenticationContext
   让 createAuthContextFn: adal.AuthenticationContextStatic = AuthenticationContext;
   

4. 现在您可以使用 createAuthContextFn
   初始化身份验证上下文让配置: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);}

(Optionally) To handle the callback from AD, write this piece of code inside your bootstrapped component aka AppComponent:
if (context.isCallback(location.hash)) { var requestInfo = context.getRequestInfo(location.hash); context.saveTokenFromHash(requestInfo); }

这篇关于如何在 Angular 2 (Azure-AD) 中的 webpack 中加载 adal.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！