Angular Ivy distribution

[hartmair]

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]

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

[sandrooco]

@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]

@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]

Is this started?

[chamikasandamal]

Is this started?

[jasonnutter]

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

[grosch]

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]

@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]

Is there any news about this?

[Pablodotjs]

Still blocked with this, any news Microsoft? 😞

[urielzen]

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]

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

[johnvinosh]

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

[EmLauber]

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]

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

[pflajszer]

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]

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]

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

[walvekarnikhil]

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

[spock123]

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

[EmLauber]

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]

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

[jazzolina]

Also would love to see an update on the timeline.

[EmLauber]

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]

Works with Angular 16 👍

[webdevgaur]

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

[GuillaumeBONHOMMEAU]

@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]

@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]

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]

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]

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]

Thanks @guilhermeadealmeida5
Your steps worked for me too.

[Erik--Vink]

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]

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]

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]

@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]

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]

@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]

Hope stable version released soon.

[ozkoidi]

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]

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]

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]

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]

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]

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>