Angular Ivy distribution

hartmair commented 2 years ago

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 commented 2 years ago

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

sandrooco commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

Is this started?

chamikasandamal commented 2 years ago

Is this started?

jasonnutter commented 2 years ago

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

grosch commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

Is there any news about this?

Pablodotjs commented 2 years ago

Still blocked with this, any news Microsoft? 😞

urielzen commented 2 years ago

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 commented 2 years ago

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

johnvinosh commented 2 years ago

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

EmLauber commented 2 years ago

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 commented 2 years ago

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

pflajszer commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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

walvekarnikhil commented 1 year ago

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

spock123 commented 1 year ago

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

santhosh1248 commented 1 year ago

replacing tsconfig with the below code worked for me.

{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "module": "es2015", "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "importHelpers": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ], "skipLibCheck": true } }

ZeroGDrive commented 1 year ago

replacing tsconfig with the below code worked for me.

{

"compileOnSave": false,

"compilerOptions": {

"baseUrl": "./",

"outDir": "./dist/out-tsc",

"sourceMap": true,

"declaration": false,

"module": "es2015",

"moduleResolution": "node",

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"importHelpers": true,

"target": "es5",

"typeRoots": [

  "node_modules/@types"

],

"lib": [

  "es2018",

  "dom"

],

"skipLibCheck": true

}

You just silenced the compiler, that doesn't mean the problem was solved

fsegurai commented 1 year ago

Any update on this? I'm using Angular 14.2.10

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.

hartmair commented 1 year ago

@fsegurai See https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/5410#issuecomment-1405758706

oorobets commented 1 year ago

@EmLauber Are there any updates on this?

EmLauber commented 1 year ago

No updates. The Ivy distribution work is tied to our Angular 15 support (https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/5410) so they have the same timelines. An engineer is starting work on it in Q1 of 2023, but we don't have a specific release date yet.

Lonli-Lokli commented 1 year ago

@EmLauber that's actually just several lines of code, why it is so boring inside Microsoft?? https://github.com/auth0/auth0-angular/pull/345/files

krishna217 commented 1 year ago

@EmLauber FYI - https://github.com/angular/angular/pull/49101

Alexiafe commented 1 year ago

Any updates ? Any work around?

EmLauber commented 1 year ago

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 commented 1 year ago

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

jazzolina commented 1 year ago

Also would love to see an update on the timeline.

EmLauber commented 1 year ago

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 commented 1 year ago

Works with Angular 16 👍

webdevgaur commented 1 year ago

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

GuillaumeBONHOMMEAU commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/6091

FreeBLD commented 1 year ago

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 commented 1 year ago

after a lot of pain, worked.

step 1 - npm uninstall @azure/msal-browser @azure/msal-angular step 2 - npm install @azure/msal-angular@3.0.0-alpha.0 --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 commented 1 year ago

Thanks @guilhermeadealmeida5 Your steps worked for me too.

Erik--Vink commented 1 year ago

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 commented 1 year ago

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/msal-angular@3.0.0-alpha.0 npm ERR! Found: @azure/msal-browser@2.38.0 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/msal-angular@3.0.0-alpha.0 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/msal-browser@3.0.0-beta.1 npm ERR! node_modules/@azure/msal-browser npm ERR! peer @azure/msal-browser@"^3.0.0-alpha.0" from @azure/msal-angular@3.0.0-alpha.0 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 commented 1 year ago

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 commented 1 year ago

@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/msal-browser@2.38.0.

The @azure/msal-angular@3.0.0-alpha.0 depends on @azure/msal-browser@^3.0.0-alpha.0. So in order to fix the error properly, you should remove @azure/msal-browser@2.38.0 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/msal-angular@3.0.0-beta.1 (and @azure/msal-browser@^3.0.0-beta.1). Hope that helps :)

ssaso commented 1 year ago

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/msal-angular@3.0.0-beta.1 npm WARN Found: @azure/msal-browser@2.38.0 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/msal-angular@3.0.0-beta.1 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/msal-browser@3.0.0-beta.1 npm WARN node_modules/@azure/msal-browser npm WARN peer @azure/msal-browser@"^3.0.0-beta.1" from @azure/msal-angular@3.0.0-beta.1 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/msal-angular@3.0.0-beta.1 npm WARN Found: @azure/msal-browser@2.38.0 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/msal-angular@3.0.0-beta.1 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/msal-browser@3.0.0-beta.1 npm WARN node_modules/@azure/msal-browser npm WARN peer @azure/msal-browser@"^3.0.0-beta.1" from @azure/msal-angular@3.0.0-beta.1 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 commented 1 year ago

@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 commented 1 year ago

Hope stable version released soon.

ozkoidi commented 1 year ago

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 commented 1 year ago

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.

AzureAD / microsoft-authentication-library-for-js