Microsoft-authentication-library-for-js: [MSAL for Angular] Support for Angular 6/7/8

[anth-git]

I'm submitting a...

[x] Feature request

Current behavior

No support for Angular 6

Expected behavior

Support for Angular 6 ;)

In #398 you stated that

We don't have support for angular 6 yet but that's in our backlog and we will work on it in future.

I would like to ask if you have any rough estimate when can we expect it?
Is it a matter of weeks or months?

[BenBullock1992]

@anth-git - I managed to get this working with Angular 6.1.6 by simply installing the rxjs-compat npm module. This resolved all the RxJS peer issues I was experiencing.

"dependencies": {
"@angular/animations": "^6.1.6",
"@angular/common": "^6.1.6",
"@angular/compiler": "^6.1.6",
"@angular/core": "^6.1.6",
"@angular/forms": "^6.1.6",
"@angular/http": "^6.1.6",
"@angular/platform-browser": "^6.1.6",
"@angular/platform-browser-dynamic": "^6.1.6",
"@angular/router": "^6.1.6",
"@azure/msal-angular": "^0.1.1",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"rxjs": "^6.3.2",
"rxjs-compat": "^6.3.2",
"zone.js": "~0.8.26"
}

[anth-git]

@BenBullock1992 Thanks a lot, it indeed works now, although I still have peer dependency warnings:

warning " > @azure/[email protected]" has incorrect peer dependency "@angular/common@^4.3.0".
warning " > @azure/[email protected]" has incorrect peer dependency "@angular/core@^4.3.0".
warning " > @azure/[email protected]" has incorrect peer dependency "rxjs@^5.0.1".

[BenBullock1992]

@anth-git - Awesome, good to hear! And yeah, I get the warnings too. I suspect when Microsoft support MSAL for Angular 6 these warnings will go away.

[nehaagrawal]

@anth-git @BenBullock1992 We are planning to give support for angular 6 in future. As @BenBullock1992 suggested you should be able to make it work by using rxjs-compat for now. I will update this ticket once we release support for angular 6.

[rsuk]

Although my app compiles and login works after adding rxjs-compat, I'm seeing "Observable.fromPromise is not a function" errors coming from msal.interceptor.js when making api requests. Looks like the code to silently refresh the token is failing due to the changes in rxjs (removal of observable.fromPromise).

Stack trace:

ERROR TypeError: rxjs_Observable__WEBPACK_IMPORTED_MODULE_2__.Observable.fromPromise is not a function
at MsalInterceptor.intercept (msal.interceptor.js:38)
at HttpInterceptorHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptorHandler.handle (http.js:1137)
at HttpXsrfInterceptor.push../node_modules/@angular/common/fesm5/http.js.HttpXsrfInterceptor.intercept (http.js:1741)
at HttpInterceptorHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptorHandler.handle (http.js:1137)
at HttpInterceptingHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptingHandler.handle (http.js:1788)
at MergeMapSubscriber.project (http.js:974)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:60)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:50)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at Observable._subscribe (scalar.js:5)

[anth-git]

@rsuk I have the same error, but strangely enough only after first API call. Subsequent calls are handled correctly

[RobARichardson]

@rsuk @anth-git I'm having the exact same issue.

[anth-git]

For now I resolved it by implementing my own interceptor based on MsalInterceptor

[BenBullock1992]

@anth-git - I'm not experiencing this at runtime but am getting the error when running tests. Can you post your interceptor code for reference please?

[anth-git]

It's just copy-pasted MsalInterceptor with replaced Observable.fromPromise with from

import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BroadcastService, MsalService } from '@azure/msal-angular';
import { from } from 'rxjs';
import { Observable } from 'rxjs/Observable';

// TODO: Remove when MSAL library supports Angular 6, and use MsalInterceptor instead

@Injectable()
export class MsalInterceptorTmp implements HttpInterceptor {

    constructor(private auth: MsalService, private broadcastService: BroadcastService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const scopes = this.auth.getScopesForEndpoint(req.url);
        this.auth.verbose('Url: ' + req.url + ' maps to scopes: ' + scopes);
        if (scopes === null) {
            return next.handle(req);
        }
        const tokenStored = this.auth.getCachedTokenInternal(scopes);
        if (tokenStored && tokenStored.token) {
            req = req.clone({
                setHeaders: {
                    Authorization: `Bearer ${tokenStored.token}`,
                }
            });
            return next.handle(req).do(event => { }, err => {
                if (err instanceof HttpErrorResponse && err.status === 401) {
                    const scopesl = this.auth.getScopesForEndpoint(req.url);
                    const tokenStoredl = this.auth.getCachedTokenInternal(scopesl);
                    if (tokenStoredl && tokenStoredl.token) {
                        this.auth.clearCacheForScope(tokenStoredl.token);
                    }
                    this.broadcastService.broadcast('msal:notAuthorized', { err, scopesl });
                }
            });
        } else {
            return from(this.auth.acquireTokenSilent(scopes).then(token => {
                const JWT = `Bearer ${token}`;
                return req.clone({
                    setHeaders: {
                        Authorization: JWT,
                    },
                });
            })).mergeMap(reql => next.handle(reql).do(event => { }, err => {
                if (err instanceof HttpErrorResponse && err.status === 401) {
                    const scopesl = this.auth.getScopesForEndpoint(reql.url);
                    const tokenStoredl = this.auth.getCachedTokenInternal(scopesl);
                    if (tokenStoredl && tokenStoredl.token) {
                        this.auth.clearCacheForScope(tokenStoredl.token);
                    }
                    this.broadcastService.broadcast('msal:notAuthorized', { err, scopesl });
                }
            })); // calling next.handle means we are passing control to next interceptor in chain
        }
    }
}

[RobARichardson]

Thanks, @anth-git. The interceptor works for me till this gets fixed.

[rajarameshvarma]

angular 7 is out. Is this still work in progress?

[217Wilder-User1]

angular 7 is out. Is this still work in progress?

@rajarameshvarma I'm using "@angular/core": "~7.0.0" and it works in Edge and Chrome.

[pandres95]

angular 7 is out. Is this still work in progress?

Is this still work in progress?

[Dedme]

angular 7 is out. Is this still work in progress?

@rajarameshvarma I'm using "@angular/core": "~7.0.0" and it works in Edge and Chrome.

i also have this built and working in angular 7.1.0. but the above fix was required.
i am using patch-package to change the dist files for the time being.

[pandres95]

@Dedme, is there an open PR patching that file up?

[Dedme]

@pandres95, i dont believe so.

[Dedme]

@pandres95 its unnecessarily large but attached is my package for patching the current npm file:
https://gist.github.com/Dedme/919d85c0390c7a82dfdacfa4d29881f9

this is applied using https://www.npmjs.com/package/patch-package.
this patch has the compiled codebase to fix IE compatibility and also the above fix resolving the observable.

[DeanB2015]

@Dedme Thanks for the .patch file. Just to confirm. The .patch is a es2015 dist of @azure\msal-angular\dist?

Note: I've posted about the IE11 issues here:
https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/414 Unfortunately, the es2015 dist files are causing problems with Edge. Do you get errors in Edge now?

[Dedme]

@DeanB2015 with my current patch file, i am having no issues with edge.

I have noted while it compiles, loads and runs in IE11, it is not authenticating via the popup,
it is throwing some sort of error.
apologies, out target browser has been Chrome.

the above problem was solved by adding a CustomEvent polyfill.
I have a new problem that:
when the popup opens, on first load the function contains the correct popupWindow object, however it it has a href of 'about:blank', so it reruns later, which then it does not contain the correct object.

it seems that the object reference is getting lost in IE. but not in others.

The problem occurs when IE changes the popUpWindow.location.href, this causes the popUpWindow to become an empty object (or something strange in IE i can't debug properly). it seems that it becomes some remote connection object that returns errors making some calls or rdp errors.
it returns window.closed as true, and also returns another 'blank' object for window.location..

more specifically the issue is located in the Msal UserAgentApplication.openWindow.
It checks if the window is closed which returns true, so cancels the pollTimer.
how this is avoided on IE, or even if after the window returns to the correct domain that it will work, i don't know.

Last Update: it seems that once its reloaded in the same domain, that it doens't reconnect to the window.
I would think that when changing the href causes IE to spawn a NEW object, which is not getting stored.

[Dedme]

I have raised a PR for angular 7 support.
this includes updates to many packages, and also updates to use RXJS 6 syntax.

https://github.com/AzureAD/microsoft-authentication-library-for-js/pull/524

[ssougnez]

When is this going to be released? It's a pretty annoying bug...

[ef32]

When is this going to be released, just an estimated time please? Angular is now on 7 and plans are in place to release 8 soon. Some feed back will be nice.

[mirkodelgado]

When is Angular 7 support going to be released? Could you please provide an estimated time frame?

[sameerag]

@mirkodelgado This upcoming summer, roadmap will be updated with details as we start this activity.

[souvikbasu]

Any work around for Angular 7 if this PR is not yet released? I need to authenticate to Azure AD on my Angular 7 app

Update

The PR doesn't look right to me with 76 files changed just for file format changes. I could fix the issue with changes in only 6 files as needed to upgrade to Rxjs 6.x. Shall I raise a PR for this fix as it is urgently needed by many?

[anth-git]

@souvikbasu it still works with Angular 7 and 8, but with Ivy renderer disabled.

[souvikbasu]

Just an update from my side, the current release works for me if rxjs-compat is installed as somebody already mentioned above. Tested on Angular 7.2.3

[kissferenc]

@souvikbasu thx, the install of rxjs-compat is works for me.

[sameerag]

786 to track this

[dotnetcanuck]

@anth-git @souvikbasu @kissferenc The upgrade guide for Angular 8 says to remove rxjs-compat though...?

[kissferenc]

@dotnetcanuck I removed the rxjs-compat library and the compiler can't compile my project.
Maybe I have to remove/upgrade some deprecated methodes.

These are the error codes:

ERROR in node_modules/rxjs/Subscription.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subscription'. node_modules/rxjs/BehaviorSubject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/BehaviorSubject'. node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/@azure/msal-angular/dist/broadcast.service.d.ts(1,10): error TS2305: Module '"../../../rxjs/Subscription"' has no exported member 'Subscription'. node_modules/@azure/msal-angular/dist/broadcast.service.d.ts(4,10): error TS2305: Module '"../../../rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'. node_modules/@azure/msal-angular/dist/broadcast.service.d.ts(5,10): error TS2305: Module '"../../../rxjs/Observable"' has no exported member 'Observable'. node_modules/@azure/msal-angular/dist/msal.interceptor.d.ts(2,10): error TS2305: Module '"../../../rxjs/Observable"' has no exported member 'Observable'.

[baltie]

You shouldn't remove the rxjs-compat libary until MSAL for Angular version 1.0 is ready. It is needed by the current version 0.1.2.

[dotnetcanuck]

@kissferenc @baltie I don't really understand how. Our project isn't using, nor has it imported rxjs-compat at all, and MSAL has been working fine so far. That's why I am so confused.

The project has been on Angular 7.3 until now, and I just upgraded it to Angular 8. I removed the MSAL package to get past the errors thrown by ng update (although later I found the --force flag), and then reinstalled it after the upgrade was done.

The project is still working fine, running on Angular 8, RxJS 6.5.2, and no references to rxjs-compat whatsoever. Everything I am reading says that rxjs-compat should be removed once you're on RxJS 6, so why is it that my project is working fine, yet, multiple people in this thread are seeing/saying the opposite?

[baltie]

This is the MSAL package you're using? https://www.npmjs.com/package/@azure/msal-angular

It depends on RxJS 5. So if it is working without you explicitly installing rxjs-compat, something else you're using is installing it for you. Have you tried npm ls rxjs-compat in your project directory? You should be able to see if it has been added by some other package. You can also check node_modules folder to see if the rxjs-compat folder is there with files in it. What I'm completely sure is that version 0.1.2 of the @azure/msal-angular package does not work with RxJS 6.5.2 without rxjs-compat.

For your last statement, you should remove rxjs-compat when your code has been upgraded to use RxJS 6. Since MSAL for Angular hasn't been upgraded to RxJS 6 and doesn't have rxjs-compat in its dependency list, you have to add it yourself.

[dotnetcanuck]

@baltie That is indeed the package that I've installed, yes.

Everything that you are saying makes logical sense to me, because a package that depends on RxJS 5 will not run against RxJS 6 without rxjs-compat. But that's the total opposite of what I'm seeing. Even our CI builds in DevOps haven't thrown any errors, and when I deploy the site to our Azure dev environment, everything works! (and yes, I used incognito mode, so no caching)

I have searched the node_modules folder, and rxjs-compat doesn't appear anywhere. Here's the output of npm ls for both rxjs-compat and msal-angular, exact paths/names redacted, of course. 😛

$ npm ls rxjs-compat
[email protected] C:\Git\repo\
`-- (empty)

$ npm ls @azure/msal-angular
[email protected] C:\Git\repo\
`-- @azure/[email protected]

What's weirder still is that when I run npm ls rxjs, the peer dependency error shows up, but the app compiles and runs.

$ npm ls rxjs
[email protected] C:\Git\repo
+-- @angular-devkit/[email protected]
| +-- @angular-devkit/[email protected]
| | `-- [email protected]
| +-- @angular-devkit/[email protected]
| | `-- [email protected]
| +-- @angular-devkit/[email protected]
| | `-- [email protected]
| +-- @ngtools/[email protected]
| | `-- [email protected]
| `-- [email protected]
+-- @angular/[email protected]
| +-- @angular-devkit/[email protected]
| | `-- [email protected]
| +-- @schematics/[email protected]
| | `-- [email protected]
| `-- [email protected]
|   `-- UNMET PEER DEPENDENCY [email protected]  deduped
+-- [email protected]
| `-- [email protected]
`-- UNMET PEER DEPENDENCY [email protected]

npm ERR! peer dep missing: rxjs@^5.0.1, required by @azure/[email protected]
npm ERR! peer dep missing: rxjs@^5.0.1, required by @azure/[email protected]

We're using the MSAL package to retrieve authorization tokens from Azure B2C. So my conclusion is that either we're using functions of the MSAL library that don't seem to care about RxJS at all, or that there's some other kind of voodoo magic going on.

Either way, this project doesn't go live for a little while still, so hopefully version 1.0 will be ready before it becomes a production issue?

¯\_(ツ)_/¯

[dotnetcanuck]

Update... So I don't know what changed, but our app suddenly stopped working with B2C, and would redirect back to the login screen after authentication was completed.

It took us a lot of time to diagnose it, and we eventually circled back to this very issue. Adding rxjs-compat fixed the problem, for the moment at least. (Cue me eating my words, above)

That said... given that MSAL.js 1.0.2 has been released, is there an updated timeline on when we can expect an update to msal-angular? Or perhaps have one of the several open pull requests (e.g. PR 543) merged, even as a temporary Preview? @sameerag (I would have asked in #786, but it's locked to collaborators only)

[sameerag]

@dotnetcanuck Let me get back on the temp preview, we are currently in planning for this activity and can do small incremental fixes if they help unblock some folks. cc @DarylThayil.

786 is locked for traction, easier to have all issues bunched up. We will open a feedback PR for Angular once we have our planning locked.

[Yossri21]

I am using Angular 8 & simply installing ' npm i rxjs-compat ' that's handle all the problems .

[GirishGowda37]

does MSAL supports in angular 7 version.?
I am currently using ADAL for authenticating with AD.
Please let me know

[DarylThayil]

we do not have stated support for angular 7 yet, we hope to have that by the end of the year.
Some have found ways to make this work for angular 7+
cc @jasonnutter

[davidgg]

I'm using it with Angular 8. Just install rxjs-compat and configure the module with your settings.

[jasonnutter]

As noted, we are working now to provide out of the box support for the newer versions of Angular (planning to have this available by the end of the year). In the mean time, we have heard that you can use @azure/msal-angular with the newer versions of Angular with some changes in your application (e.g. as @davidgg notes, using rxj-compat).

[ShinRai1090]

As noted, we are working now to provide out of the box support for the newer versions of Angular (planning to have this available by the end of the year). In the mean time, we have heard that you can use @azure/msal-angular with the newer versions of Angular with some changes in your application (e.g. as @davidgg notes, using rxj-compat).

Hope this comes out sooner, angular 9 is already almost here and even though there is support for latest versions using _rxjs-compat_, encountering below issues while performing a simple "_ng update @angular/cli_"

Fetching dependency metadata from registry... Package "@azure/msal-angular" has an incompatible peer dependency to "@angular/common" (requires "^4.3.0" (extended), would install "8.2.14"). Package "@azure/msal-angular" has an incompatible peer dependency to "@angular/core" (requires "^4.3.0" (extended), would install "8.2.14"). Package "@azure/msal-angular" has an incompatible peer dependency to "rxjs" (requires "^5.0.1", would install "6.5.3"). Incompatible peer dependencies found. Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together. You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.

[Taats]

I'm building an app and I need to connect with B2C, is there any ETA on this new version because we are in the 20's now and a new version is not yet to be found.

An estimate would be greatly appreciated!

[jasonnutter]

@Taats We're a little behind but we'll have something soon (this month), apologies for the delay!

[Taats]

@jasonnutter That is good news, thanks for the update! :)

[ShinRai1090]

@jasonnutter Can we expect the update this month for the msal angular wrapper?

[OlivierTD]

@jasonnutter I saw a merge of a beta version that happened today. Any ETA on when that version will be released? We're just starting a new project. It would be great if we could just use this new version right off the bat. Thanks!

[jasonnutter]

@Taats @ShinRai1090 @OlivierTD Please follow the upgrade here to try out the new beta for MSAL Angular: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev-angular-1.0-protectedresources/lib/msal-angular/docs/0.x-1.x-upgrade-guide.md

This version will support Angular 6+ and rxjs 6. Let me know if you have any feedback, thanks! Apologies again for the delay.

[ShinRai1090]

@Taats @ShinRai1090 @OlivierTD Please follow the upgrade here to try out the new beta for MSAL Angular: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev-angular-1.0-protectedresources/lib/msal-angular/docs/0.x-1.x-upgrade-guide.md

This version will support Angular 6+ and rxjs 6. Let me know if you have any feedback, thanks! Apologies again for the delay.

@madhugore1 @mamta92

[komi99]

getScopesForEndpoint() this method is always returning null for me instead of returning scope , how it is reading scope from endpoint

[jasonnutter]

@komi99 Please open a new issue if you have a usage question, thanks!