[問題] angular 5 - Azure AD 登入 - js library import

General
1

目前公司想要使用 Azure AD 做前端驗證，
我參考以下文章做範例: https://blogs.msdn.microsoft.com/premier_developer/2017/04/26/using-adal-with-angular2/

目前卡在在元件裡 import js…
都會顯示以下錯誤

services/adal.service.ts(5,22): error TS2304: Cannot find name ‘adal’.
services/adal.service.ts(5,57): error TS2304: Cannot find name ‘AuthenticationContext’.
services/adal.service.ts(9,22): error TS2503: Cannot find namespace ‘adal’.
services/adal.service.ts(12,28): error TS2304: Cannot find name ‘createAuthContextFn’.

我也參考了以下 import js libraries 方式都不成功…
https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af

想請問有什麼方式可以 import .js libraries 做使用呢?

2

直接將該 js library 放到 .angular-cli.json 的 scripts 裡，不使用 import 並搭配 declare 的方式將 adal 宣告出來使用
這樣子應可解決這個問題

1個讚
3

謝謝 Kevin~
我改成以下後，還是找不到 namespace adal，
希望我不是問了蠢問題…
===.angular-cli.json===
“scripts”: [
{ “input”: “…/node_modules/adal-angular/lib/adal.js”, “output”: “adal” }
],

===adal.service.ts===
declare var adal: any;

createAuthContextFn: adal.AuthenticationContextStatic = adal.AuthenticationContext;
private context: adal.AuthenticationContext;
createAuthContextFn: adal.AuthenticationContextStatic = adal.AuthenticationContext;
private context: adal.AuthenticationContext;

webpack cimpiled 結果:
ERROR in services/adal.service.ts(8,26): error TS2503: Cannot find namespace ‘adal’.
services/adal.service.ts(9,22): error TS2503: Cannot find namespace ‘adal’.

4

那應該是指型別，將 : 後的型別拿掉看看

5

Kevin 感謝回覆~~

剛剛發現是宣告型別問題如下
adal.AuthenticationContextStatic

我繼續試試看感恩~!!

6

實際執行後 compile 會成功，
但是瀏覽器console出現以下問題

GET http://127.0.0.1:4200/adal.bundle.js net::ERR_ABORTED
ERROR ReferenceError: adal is not defined

====Network====
Request URL:http://127.0.0.1:4200/adal.bundle.js
Request Method:GET
Status Code:404 Not Found
Remote Address:127.0.0.1:4200
Referrer Policy:no-referrer-when-downgrade

另外想請問用這樣的方式宣告後，
在開發時是否就無法使用 auto complete 功能嗎?
謝謝~

7

對，除非可以正確地引用 Types.

8

最後我試到以下設定就可以正確使用以下 libraries

  1. npm install
    npm install adal-angular --save
    npm install @types/adal --save-dev

  2. ===.angular-cli.json===
    “scripts”: [
    { “input”: “…/node_modules/adal-angular/lib/adal.js”, “output”: “adal” }
    ],

  3. ===adal.service.ts===
    declare var adal; // angular-adal/lib/adal.js
    import * as _ from ‘adal’; // @types/adal

感謝 Kevin 的幫助~

1個讚