Not able to inject adal dependency to spfx project

[codeandcloud]

I have a SPFX through which I am building client-side web parts using AngularJS and adal-angular

Using this tutorial: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/call-microsoft-graph-from-your-web-part

Now I created a web part, tested a local ajax call and works. So I assume SPFX bootstrap went well. So to implement Azure AD-based authentication and authorization in my web part, I did an

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

And I wrote this

import { adal, adalConfig } from 'adal-angular';

For which I get two squiggly with similar error

[ts] Module '"e:/path/to/my/project/node_modules/@types/adal-angular/index"' has no exported member 'adal'.

import adal

Here is my dependencies list to see if I am missing any.

"dependencies": {
  "@microsoft/sp-core-library": "1.5.0",
  "@microsoft/sp-lodash-subset": "1.5.0",
  "@microsoft/sp-office-ui-fabric-core": "1.5.0",
  "@microsoft/sp-webpart-base": "1.5.0",
  "@types/es6-promise": "0.0.33",
  "@types/webpack-env": "1.13.1",
  "adal-angular": "^1.0.12",
  "adal-ts": "^0.6.0",
  "angular": "^1.6.6",
  "xml2js": "^0.4.19"
},
"devDependencies": {
  "@microsoft/sp-build-web": "1.5.0",
  "@microsoft/sp-module-interfaces": "1.5.0",
  "@microsoft/sp-webpart-workbench": "1.5.0",
  "@types/adal-angular": "^1.0.1",
  "@types/angularjs": "^1.5.14-alpha",
  "@types/chai": "3.4.34",
  "@types/mocha": "2.2.38",
  "ajv": "~5.2.2",
  "gulp": "~3.9.1"
}

What am I doing wrong?

Re-post of https://stackoverflow.com/q/51045521/17447 as it seems adal-angular seems more active here.

[nehaagrawal]

@codeandcloud what version for angularjs you are using? is this helpful? https://stackoverflow.com/questions/40044892/how-to-load-adal-js-in-webpack-inside-angular-2-azure-ad

[SlowFourierTransform]

Hi, I'm not sure if you've solved this, but I came across the same issue in Typescript. It looks like the documentation link you provided has been updated to use

import * as AuthenticationContext from 'adal-angular';

Which works in my app:

const config: AuthenticationContext.Options = {
            clientId: 'abcd-123-etc'
        };
const authContext: AuthenticationContext = new AuthenticationContext(config);