如何在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 is undefined。为什么？

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. 写一个三元组斜杠以导入类型
   
   ///<参考路径= ../../../ 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）;

1. write a triple slash to import the typings
   /// <reference path="../../../node_modules/@types/adal/index.d.ts" />
2. import adal.js and expose it as AuthenticationContext using the expose loader
   import 'expose?AuthenticationContext!../../../node_modules/adal-angular/lib/adal.js';
3. declare a variable of type AuthenticationContextStatic and assign it value of AuthenticationContext
   let createAuthContextFn: adal.AuthenticationContextStatic = AuthenticationContext;
   

4. Now you can initialize the authentication context using the 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）;
}

(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屋！