Using Adal.js in Angular 7

Question

I am developing a web application using Angular 7 and this app communicates to a Web API back-end services written in dot.net core.

These two applications have been deployed to Azure and all its configurations has been set up: resource group, enable CORS, Azure AD, etc...

The problem I am facing is at the moment to consume the endpoints, lets say to do a normal get. I am getting a 401 http error which make sense. So, I starting implementing Adal.js in my Angular App to let the user authenticate to the Azure Active Directory, get the token and inject the token on the Request Header (following this post: Using ADAL.js with Angular4+). However, I am getting this error:

adal.services.ts

import { Injectable } from '@angular/core';
import { adal } from 'adal-angular';
import { Observable, Subscriber } from 'rxjs';
import { retry } from 'rxjs/operators';

import { AdalConfigService } from './adal-config.service';

declare var AuthenticationContext: adal.AuthenticationContextStatic;
let createAuthContextFn: adal.AuthenticationContextStatic = AuthenticationContext;

@Injectable({
  providedIn: 'root',
})
export class AdalService {
  private context: adal.AuthenticationContext;
  constructor(private configService: AdalConfigService) {
    this.context = new createAuthContextFn(configService.adalSettings);
  }

Error:

I already have the following Adal.js packages installed: npm install adal-angular npm install @type/adal-angular

Has anyone face a similar issue? Any help is very welcome

Vadim Gremyachev · Answer 1 · 2019-07-19T00:40:25.870

Since @types/adal has been replaced with @types/adal-angular, it appears the way how AuthenticationContext is exported has changed since then and now it could be imported using ES6 syntax like this:

import * as AuthenticationContext from 'adal-angular';

Example

import { Injectable } from '@angular/core';
import { AdalConfigService } from './adal-config.service';
import * as AuthenticationContext from 'adal-angular';

@Injectable()
export class AdalService {
    private context: AuthenticationContext;
    constructor(private configService: AdalConfigService) {
        this.context = new AuthenticationContext(configService.adalSettings);
    }
    login() {
        this.context.login();
    }
}

The type definition of adal-angular is different from actual types. For example, there is no getCachedUser function on actual code but it exists on the type definition. — Gao Shenghan, Jul 31 '20 at 23:45

Using Adal.js in Angular 7

1 Answers1