Angular Ivy distribution #4298

hartmair · 2021-12-02T09:25:13Z

Core Library

MSAL.js v2 (@azure/msal-browser)

Wrapper Library

MSAL Angular (@azure/msal-angular)

Description

When compiling with Angular 13, the following pops up:

$ ng serve
⠙ Generating browser application bundles (phase: setup)...Processing legacy "View Engine" libraries:

@azure/msal-angular [es2015/esm2015] (https://github.com/AzureAD/microsoft-authentication-library-for-js.git)
Encourage the library authors to publish an Ivy distribution.

Source

External (Customer)

sameerag · 2021-12-02T17:27:15Z

@hartmair Added to this our board to track and prioritize.

sandrooco · 2022-01-05T08:08:18Z

@sameerag First of all: I hope you had a good start into the new year!
Is this something you'd let the OS community do or is it rather something you'd like to handle internally?
I'm be interested in contributing to this and also #4154 (could be done in the same PR).

sameerag · 2022-01-05T14:42:04Z

@sandrooco A very happy new year to you too! :)
We welcome contributions and in-fact would appreciate the community involvement in our work. Please check our community guidelines to get started. cc @jasonnutter

chamikasandamal · 2022-04-21T13:00:04Z

Is this started?

chamikasandamal · 2022-04-21T13:00:06Z

Is this started?

jasonnutter · 2022-04-21T14:56:07Z

@chamikasandamal Not yet, no. We'll update this issue when we have.

grosch · 2022-06-22T00:31:47Z

I'm be interested in contributing to this and also #4154 (could be done in the same PR).

@sandrooco Are you planning to do this still? Would love to have this updated.

sandrooco · 2022-06-22T07:19:12Z

@grosch this is handled internally at Microsoft now. There were two PRs from the community that got closed due to backwards compatibility "issues".
As @jasonnutter mentioned, they will update this issue as soon as there are news.

Pablodotjs · 2022-07-15T18:28:16Z

Is there any news about this?

Pablodotjs · 2022-08-23T16:58:41Z

Still blocked with this, any news Microsoft? 😞

urielzen · 2022-09-28T16:27:19Z

I can't believe this is still in the backlog after this long. How are we supposed to encourage our clients to use Microsoft accounts login if we are not even provided with this core implementation?

ZeroGDrive · 2022-10-24T10:06:31Z

Please consider resolving this ASAP, as angular 15 will remove view engine completely

johnvinosh · 2022-10-26T06:33:05Z

I am using Angular 14 and I am getting this error. Is there any workaround for this ?

EmLauber · 2022-11-03T02:21:42Z

Still no ETA for this, we will update once we have one. We are aware of Angular 15 removing view engine and that's influence on prioritization.

pflajszer · 2022-11-07T12:16:47Z

While the fix isn't in place yet, it would be great if you provided a workaround for this

pflajszer · 2022-11-08T09:25:55Z

I can confirm the following are compatible:

ng projects created with CLI v. 14.0.7
@azure/msal-angular v. 2.4.6
@azure/msal-browser v. 2.31.0
ngrx v. 7.5.7

ng version output:


Angular CLI: 14.0.7
Node: 18.10.0 (Unsupported)
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 14.2.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.8
@angular-devkit/build-angular   14.2.8
@angular-devkit/core            14.2.8
@angular-devkit/schematics      14.0.7
@angular/cli                    14.0.7
@schematics/angular             14.0.7
rxjs                            7.5.7
typescript                      4.7.4

bpardo1 · 2022-12-05T15:46:29Z

I've just ran ng s and magically the error dissapears.

Angular: 12.1.4
msal/browser: 2.14.2
msal/angular: 2.0.0

JonasGrunau · 2022-12-23T05:03:01Z

Could you at least provide a workaround for this? This error is blocking me.

walvekarnikhil · 2022-12-27T09:23:25Z

I am getting
MsalModule does not have a module def (ɵmod property)
any workaround for this?

spock123 · 2022-12-29T18:21:04Z

I had the error using esbuild, when I went back to the standard builder the error went away.
Not sure it helps anyone

EmLauber · 2023-04-27T21:18:35Z

We are actively working on this for our next major version release. I will update here once the alpha of v3 is available for testing.

drewauman · 2023-05-02T14:16:43Z

Thank you EmLauber, Do we have an estimated time for arrival for this update?

jazzolina · 2023-05-02T21:13:08Z

Also would love to see an update on the timeline.

EmLauber · 2023-05-03T23:58:20Z

MSAL.Angular v3 alpha with Angular 15 and Ivy support is released: https://github.com/AzureAD/microsoft-authentication-library-for-js/releases/tag/msal-angular-v3.0.0-alpha.0

alexanderzeillinger · 2023-05-05T06:06:25Z

Works with Angular 16 👍

webdevgaur · 2023-05-13T11:02:09Z

How do I make this work with Angular 16? I am still getting the 'not compatible with Ivy defect'

GuillaumeBONHOMMEAU · 2023-05-15T13:00:50Z

@webdevgaur Updating packages to those version should fix Ivy compatibility issues :

"@azure/msal-angular": "^3.0.0-alpha.0",
"@azure/msal-browser": "^3.0.0-alpha.0",

alrazihi · 2023-05-21T21:02:59Z

@webdevgaur Updating packages to those version should fix Ivy compatibility issues :
"@azure/msal-angular": "^3.0.0-alpha.0",
"@azure/msal-browser": "^3.0.0-alpha.0",

worked for me

{ "name": "msal-angular-tutorial", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular-devkit/core": "^16.0.2", "@angular-devkit/schematics": "^16.0.2", "@angular/animations": "^16.0.0", "@angular/cdk": "^16.0.1", "@angular/common": "^16.0.0", "@angular/compiler": "^16.0.0", "@angular/core": "^16.0.0", "@angular/forms": "^16.0.0", "@angular/material": "^16.0.1", "@angular/platform-browser": "^16.0.0", "@angular/platform-browser-dynamic": "^16.0.0", "@angular/router": "^16.0.0", "@schematics/angular": "^16.0.2", "@azure/msal-angular": "^3.0.0-alpha.0", "@azure/msal-browser": "^3.0.0-alpha.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" }, "devDependencies": { "@angular-devkit/build-angular": "^16.0.2", "@angular/cli": "~16.0.2", "@angular/compiler-cli": "^16.0.0", "@types/jasmine": "~4.3.0", "jasmine-core": "~4.6.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~5.0.2" } }

JimbobTheSailor · 2023-06-05T05:05:33Z

After updating to Angular 16 and therefore MSAL to 3.0.0-alpha.0 as per the workaround noted above:

"@azure/msal-angular": "^3.0.0-alpha.0",
"@azure/msal-browser": "^3.0.0-alpha.0",

I am now getting the router error when using MSAL in office.js

"Unhandled Navigation Error: TypeError: this._history.replaceState is not a function"

Is anyone else experiencing this? I have raised an issue here:
#6091

FreeBLD · 2023-06-20T13:40:59Z

I have a similar situation but with newer version. Upon updating the packages to

"@azure/msal-angular": "^3.0.0-beta.0",
"@azure/msal-browser": "^3.0.0-beta.0",

I'm getting this error stack

err in login TypeError: Cannot read properties of undefined (reading 'createElement') at SosAuthInterceptor.getAbsoluteUrl (azure-msal-angular.mjs:542:37) at azure-msal-angular.mjs:518:38 at Array.forEach (<anonymous>) at SosAuthInterceptor.matchResourcesToEndpoint (azure-msal-angular.mjs:511:37) at SosAuthInterceptor.getScopesForEndpoint (azure-msal-angular.mjs:490:49) at SosAuthInterceptor.intercept (azure-msal-angular.mjs:379:29) at SosAuthInterceptor.intercept (sos-auth-interceptor.ts:31:31) at http.mjs:1604:60 at Object.handle (http.mjs:1605:40) at JsonHeaderInterceptor.intercept (json-header-interceptor.ts:47:17)

Update:
I figured out the problem. I was missing the reference to the msalBroadcastService dependency. So the document object was used in place of the msalBroadcastService.
constructor( @Inject(MSAL_INTERCEPTOR_CONFIG) msalInterceptorConfig: MsalInterceptorConfiguration, authService: MsalService, location: Location, msalBroadcastService: MsalBroadcastService, @Inject(DOCUMENT) document: any) { super(msalInterceptorConfig, authService, location, <missing msalBroadcastService>, document); }

guilhermeadealmeida5 · 2023-07-04T20:25:33Z

after a lot of pain, worked.

step 1 - npm uninstall @azure/msal-browser @azure/msal-angular
step 2 - npm install @azure/[email protected] --force
step 3 - npm install @azure/msal-browser --force
step 4 - npm install --force (to update)

versions info:
Angular CLI: 16.1.3
Node: 18.16.0
Package Manager: npm 9.5.1
OS: win32 x64

Angular: 16.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1601.3
@angular-devkit/build-angular 16.1.3
@angular-devkit/core 16.1.3
@angular-devkit/schematics 16.1.3
@schematics/angular 16.1.3
rxjs 7.8.1
typescript 5.1.6

softgandhi · 2023-07-12T15:22:30Z

Thanks @guilhermeadealmeida5
Your steps worked for me too.

Erik--Vink · 2023-07-13T09:53:39Z

We would like to know if there are any updates on the timeline for releasing the current beta version as a final version.
Even though the beta version seems to work, it is a showstopper for our big enterprise applications.

ssaso · 2023-07-15T08:03:38Z

Thanks @guilhermeadealmeida5 this worked for me, but now when I deploy to Azure I got this error into the pipeline:

`Running 'npm install'...

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @azure/[email protected]
npm ERR! Found: @azure/[email protected]
npm ERR! node_modules/@azure/msal-browser
npm ERR! @azure/msal-browser@"^2.38.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @azure/msal-browser@"^3.0.0-alpha.0" from @azure/[email protected]
npm ERR! node_modules/@azure/msal-angular
npm ERR! @azure/msal-angular@"^3.0.0-alpha.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @azure/[email protected]
npm ERR! node_modules/@azure/msal-browser
npm ERR! peer @azure/msal-browser@"^3.0.0-alpha.0" from @azure/[email protected]
npm ERR! node_modules/@azure/msal-angular
npm ERR! @azure/msal-angular@"^3.0.0-alpha.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2023-07-15T07_55_54_947Z-debug-0.log

---End of Oryx build logs---
Oryx has failed to build the solution.
`

Any ideas?

Edit: Actually I fixed it by removing
this code:
"peerDependencies": {
"@azure/msal-browser": "^3.0.0-alpha.0",
"rxjs": "^7.0.0"
}
from package-lock.json, under
"node_modules/@azure/msal-angular": {
"version": "3.0.0-alpha.0"

guilhermeadealmeida5 · 2023-07-15T11:15:52Z

do u used "--force" in the end? this package has something incompatible. this error gonna happen when u install others package neither. U have to use "--force " in the end. And my tip is, when they make a new version from msal, we have to update for the version more compatible LTS

dzhavat · 2023-07-17T21:23:58Z

@ssaso Your fix might be working but doesn't look right. The package-lock.json file should not be modified manually.

One of the lines in the error log you've pasted consists of Found: @azure/[email protected].

The @azure/[email protected] depends on @azure/msal-browser@^3.0.0-alpha.0. So in order to fix the error properly, you should remove @azure/[email protected] and instead install @azure/msal-browser@^3.0.0-alpha.0. Better yet, you can consider installing the latest version which right now is @azure/[email protected] (and @azure/msal-browser@^3.0.0-beta.1). Hope that helps :)

ssaso · 2023-07-21T11:30:49Z

do u used "--force" in the end? this package has something incompatible. this error gonna happen when u install others package neither. U have to use "--force " in the end. And my tip is, when they make a new version from msal, we have to update for the version more compatible LTS

When installing yes, followed your steps, and I get this locally:

npm install --force
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @azure/[email protected]
npm WARN Found: @azure/[email protected]
npm WARN node_modules/@azure/msal-browser
npm WARN @azure/msal-browser@"^2.38.0" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @azure/msal-browser@"^3.0.0-beta.1" from @azure/[email protected]
npm WARN node_modules/@azure/msal-angular
npm WARN @azure/msal-angular@"^3.0.0-beta.1" from the root project
npm WARN
npm WARN Conflicting peer dependency: @azure/[email protected]
npm WARN node_modules/@azure/msal-browser
npm WARN peer @azure/msal-browser@"^3.0.0-beta.1" from @azure/[email protected]
npm WARN node_modules/@azure/msal-angular
npm WARN @azure/msal-angular@"^3.0.0-beta.1" from the root project

but it is all ok.
@dzhavat
The thing is when I run the pipeline in Azue, then this error happens even for the beta version.

npm install --force
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @azure/[email protected]
npm WARN Found: @azure/[email protected]
npm WARN node_modules/@azure/msal-browser
npm WARN @azure/msal-browser@"^2.38.0" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @azure/msal-browser@"^3.0.0-beta.1" from @azure/[email protected]
npm WARN node_modules/@azure/msal-angular
npm WARN @azure/msal-angular@"^3.0.0-beta.1" from the root project
npm WARN
npm WARN Conflicting peer dependency: @azure/[email protected]
npm WARN node_modules/@azure/msal-browser
npm WARN peer @azure/msal-browser@"^3.0.0-beta.1" from @azure/[email protected]
npm WARN node_modules/@azure/msal-angular
npm WARN @azure/msal-angular@"^3.0.0-beta.1" from the root project

This is without modifying the package-lock file

Edit: Okej now everything went smoothly, the thing was when I was executing: npm install @azure/msal-browser --force somehow it was installing 2.38 even though msal-angular was 3.0.0, so I explicitly changed the version to 3.0.0.beta.1 in the package json file.

dzhavat · 2023-07-22T06:08:02Z

@ssaso npm install @azure/msal-browser is installing 2.38.0 because that version is marked as latest on npm. Good to hear that everything's fine now. :)

swami-sanapathi · 2023-07-24T11:28:37Z

Hope stable version released soon.

ozkoidi · 2023-07-24T13:18:32Z

Hope stable version released soon.

Same here, I'm waiting for this to move to Angular 16 since they removed the Angular Compatibility Compiler (ngcc). But it's been a year and a half since this issue was opened... 😞

swami-sanapathi · 2023-08-06T17:54:00Z

Yes the main issue is with the compiler removal, in my enterprise application we've been using angular 8 version with 70+ third-party libs :( still I'm finding the ways to make the app with the latest version.

tnorling · 2023-08-16T19:40:21Z

Closing as msal-angular v3 has been released, which supports Ivy. If you run into any specific issues with the new build please let us know by opening a new issue. Thanks!

SathishRavichandran · 2023-12-15T07:44:24Z

How to make msalv1 to work with Angular 16 is there any workaround

msal.module.d.ts(7, 13): This likely means that the library (@azure/msal-angular) which declares MsalModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

sandrooco · 2023-12-18T08:02:01Z

How to make msalv1 to work with Angular 16 is there any workaround

No there is no workaround. Try to update to the current V3+ versions - it shouldn't be a big thing (API didn't change drastically).

JimbobTheSailor · 2023-12-18T09:45:32Z

When it come to MSAL, don’t develop on anything less than the latest version. MSAL It is a complex thing to program and get working in an office addin, don’t waste your development time on a lower version

…

On Mon, 18 Dec 2023 at 7:02 pm, Sandro ***@***.***> wrote: How to make msalv1 to work with Angular 16 is there any workaround No there is no workaround. Try to update to the current V3+ versions - it shouldn't be a big thing (API didn't change drastically). — Reply to this email directly, view it on GitHub <#4298 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGDFAOZEUTVU5CPCJNCHY4LYJ72A3AVCNFSM5JGTKHCKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBVHE3TENJYGI2Q> . You are receiving this because you commented.Message ID: <AzureAD/microsoft-authentication-library-for-js/issues/4298/1859725825@ github.com>

hartmair added the feature Feature requests. label Dec 2, 2021

hartmair changed the title ~~Ivy distribution~~ Angular Ivy distribution Dec 2, 2021

github-actions bot added msal-angular Related to @azure/msal-angular package msal-browser Related to msal-browser package labels Dec 2, 2021

sandrooco mentioned this issue Feb 1, 2022

Feature/angular 13 #4467

Closed

kyubisation mentioned this issue Mar 11, 2022

feat: update @azure/msal-angular to Angular 13 and rxjs 7 #4599

Closed

sameerag added the tracked-internally Bugs that are tracked by Msft internally label Apr 15, 2022

jo-arroyo mentioned this issue Jun 30, 2022

MSAL Angular not Ivy compatible #4956

Closed

bmahall mentioned this issue Oct 26, 2022

'MsalModule' does not appear to be an NgModule class #5336

Closed

YanerTavuz mentioned this issue Nov 22, 2022

Angular 15 support #5410

Closed

sameerag mentioned this issue Apr 30, 2023

Angular 15.2.8 MSAL not compatible #5945

Closed

lalimasharda mentioned this issue May 24, 2023

Importing MsalModule which does not have a ɵmod property #6051

Closed

frontend-specialisten mentioned this issue Jun 1, 2023

Update MSAL v.3 Energinet-DataHub/greenforce-frontend#1772

Closed

tnorling mentioned this issue Jul 6, 2023

ES5 with Angular / Ivy breaks build with getInternalNameOfClass() called on a non-ES5 class #3277

Closed

26 tasks

tnorling closed this as completed Aug 16, 2023

Angular Ivy distribution #4298

Angular Ivy distribution #4298

Comments

hartmair commented Dec 2, 2021

Core Library

Wrapper Library

Description

Source

sameerag commented Dec 2, 2021

sandrooco commented Jan 5, 2022

sameerag commented Jan 5, 2022 • edited Loading

chamikasandamal commented Apr 21, 2022

chamikasandamal commented Apr 21, 2022

jasonnutter commented Apr 21, 2022

grosch commented Jun 22, 2022

sandrooco commented Jun 22, 2022

Pablodotjs commented Jul 15, 2022

Pablodotjs commented Aug 23, 2022

urielzen commented Sep 28, 2022

ZeroGDrive commented Oct 24, 2022

johnvinosh commented Oct 26, 2022

EmLauber commented Nov 3, 2022

pflajszer commented Nov 7, 2022 • edited Loading

pflajszer commented Nov 8, 2022

bpardo1 commented Dec 5, 2022 • edited Loading

JonasGrunau commented Dec 23, 2022

walvekarnikhil commented Dec 27, 2022

spock123 commented Dec 29, 2022

EmLauber commented Apr 27, 2023

drewauman commented May 2, 2023

jazzolina commented May 2, 2023

EmLauber commented May 3, 2023

alexanderzeillinger commented May 5, 2023

webdevgaur commented May 13, 2023

GuillaumeBONHOMMEAU commented May 15, 2023

alrazihi commented May 21, 2023

JimbobTheSailor commented Jun 5, 2023 • edited Loading

FreeBLD commented Jun 20, 2023 • edited Loading

guilhermeadealmeida5 commented Jul 4, 2023 • edited Loading

Package Version

softgandhi commented Jul 12, 2023

Erik--Vink commented Jul 13, 2023

ssaso commented Jul 15, 2023 • edited Loading

guilhermeadealmeida5 commented Jul 15, 2023

dzhavat commented Jul 17, 2023 • edited Loading

ssaso commented Jul 21, 2023 • edited Loading

dzhavat commented Jul 22, 2023

swami-sanapathi commented Jul 24, 2023

ozkoidi commented Jul 24, 2023

swami-sanapathi commented Aug 6, 2023

tnorling commented Aug 16, 2023

SathishRavichandran commented Dec 15, 2023

sandrooco commented Dec 18, 2023 • edited Loading

JimbobTheSailor commented Dec 18, 2023 via email

sameerag commented Jan 5, 2022 •

edited

Loading

pflajszer commented Nov 7, 2022 •

edited

Loading

bpardo1 commented Dec 5, 2022 •

edited

Loading

JimbobTheSailor commented Jun 5, 2023 •

edited

Loading

FreeBLD commented Jun 20, 2023 •

edited

Loading

guilhermeadealmeida5 commented Jul 4, 2023 •

edited

Loading

ssaso commented Jul 15, 2023 •

edited

Loading

dzhavat commented Jul 17, 2023 •

edited

Loading

ssaso commented Jul 21, 2023 •

edited

Loading

sandrooco commented Dec 18, 2023 •

edited

Loading