angular - 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 ファイル内に正しくインポートし、typings を使用するにはどうすればよいですか?

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