search

AzureAD / microsoft-authentication-library-for-js

Microsoft Authentication Library (MSAL) for JS
http://aka.ms/aadv2
MIT License
3.66k stars 2.65k forks source link

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

Closed Crio1979 closed 1 year ago

Crio1979 commented 3 years ago

Library

Framework

Description

When using Ivy in Angular (> 9) and tsconfig.json targets ES5 the build fails with the following error. I can fix the error by switching to ES2015, but this is currently not an option because it breaks other functionality in the target app. Interestingly when I switch to ES2015, run a build and then switch back to ES5 it works despite building with --delete-output-path.

Warning: Invalid constructor parameter decorator in D:/Programs/Teamcity/buildAgent/work/25e12c73cdc1a14f/node_modules/@azure/msal-angular/fesm2015/azure-msal-angular.js:
 () => [
    { type: undefined, decorators: [{ type: Inject, args: [MSAL_INSTANCE,] }] },
    { type: Location }
]
Error: Error on worker #1: Error: getInternalNameOfClass() called on a non-ES5 class: expected MsalService to have an inner class declaration

Error Message

Warning: Invalid constructor parameter decorator in D:/Programs/Teamcity/buildAgent/work/25e12c73cdc1a14f/node_modules/@azure/msal-angular/fesm2015/azure-msal-angular.js:
 () => [
    { type: undefined, decorators: [{ type: Inject, args: [MSAL_INSTANCE,] }] },
    { type: Location }
]
Error: Error on worker #1: Error: getInternalNameOfClass() called on a non-ES5 class: expected MsalService to have an inner class declaration
    at Esm5ReflectionHost.getInternalNameOfClass (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\ngcc\src\host\esm5_host.js:88:23)
    at DelegatingReflectionHost.getInternalNameOfClass (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\ngcc\src\host\delegating_host.js:89:34)
    at extractInjectableMetadata (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\src\ngtsc\annotations\src\injectable.js:123:69)
    at InjectableDecoratorHandler.analyze (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\src\ngtsc\annotations\src\injectable.js:66:24)
    at NgccTraitCompiler.TraitCompiler.analyzeTrait (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\src\ngtsc\transform\src\compilation.js:341:40)
    at analyze (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\src\ngtsc\transform\src\compilation.js:293:58)
    at _loop_1 (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\src\ngtsc\transform\src\compilation.js:315:21)
    at NgccTraitCompiler.TraitCompiler.analyzeClass (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\src\ngtsc\transform\src\compilation.js:321:35)
    at NgccTraitCompiler.analyzeFile (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\ngcc\src\analysis\ngcc_trait_compiler.js:47:26)
    at DecorationAnalyzer.analyzeProgram (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\ngcc\src\analysis\decoration_analyzer.js:134:39)
    at ClusterMaster.onWorkerMessage (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:166:27)
    at D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:50:95
    at ClusterMaster.<anonymous> (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:246:57)
    at step (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\tslib\tslib.js:139:27)
    at Object.next (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\tslib\tslib.js:120:57)
    at D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\tslib\tslib.js:113:75
    at new Promise (<anonymous>)
    at Object.__awaiter (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\tslib\tslib.js:109:16)
    at EventEmitter.<anonymous> (D:\Programs\Teamcity\buildAgent\work\25e12c73cdc1a14f\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:240:32)
    at EventEmitter.emit (events.js:198:13)

MSAL Configuration

Build issue rather than configuration issue

Reproduction steps

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["./node_modules/@types"],
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "include": [
    "./src",
    "./node_modules/cypress"
  ],
  "exclude": [
    "./node_modules/cypress"
  ]
}
// Provide relevant code snippets here.
// For Azure B2C issues, please include your policies.

Expected behavior

MSAL v2.0 builds for ES5 as well as ES2015, Ivy is supported.

Identity Provider

Browsers/Environment

Regression

Security

Source

github-actions[bot] commented 3 years ago

Invalid Issue Template: Please update the original issue and make sure to fill out the entire issue template so we can better assist you.

github-actions[bot] commented 3 years ago

Invalid Issue Template: Please update the original issue and make sure to fill out the entire issue template so we can better assist you.

github-actions[bot] commented 3 years ago

This issue has not seen activity in 14 days. If your issue has not been resolved please leave a comment to keep this open. It will be closed in 7 days if it remains stale.

jasonnutter commented 3 years ago

@Crio1979 Apologies for the delayed response. I am unable to reproduce this behavior using our Angular 11 sample: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/971e30f44c76b6c29546e80e69b3f881624808d8/samples/msal-angular-v2-samples/angular11-sample-app/tsconfig.json#L18

Are you able to reproduce this error with that sample? And if so, can you share details? Thanks!

ghost commented 3 years ago

@Crio1979 This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.

maxx-420 commented 3 years ago

issue persists with Angular 9.1. with ngcc getting the following error: image

target is es5

anton-marchenko commented 3 years ago

@tnorling

The project for reproducing the issue is here: ng9.zip

Node: v14.15.0 OS: Windows 10 x64

Note: if you change tsconfig.json target from "es5" to "es2015" and revert it to "es5" the issue will stop to reproduce. In this case you should remove node_modules folder and make npm i. Then the issue will start to reproduce again.

Also I can give you more details if you need.

From Russia with love.

anton-marchenko commented 3 years ago

@jasonnutter

@Crio1979 Apologies for the delayed response. I am unable to reproduce this behavior using our Angular 11 sample:

https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/971e30f44c76b6c29546e80e69b3f881624808d8/samples/msal-angular-v2-samples/angular11-sample-app/tsconfig.json#L18

Are you able to reproduce this error with that sample? And if so, can you share details? Thanks!

I noticed that Angular 10 ignores "target": "es5" option. I suppose it is same for Angular 11. Instead of compiling esm5, Angular 10 compiles code to esm2015.

Angular 10 output with "target": "es5":

Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
...

Angular 9 output with "target": "es5":

Compiling @angular/core : module as esm5
Compiling @angular/animations : module as esm5
Compiling @angular/compiler/testing : module as esm5
Compiling @angular/animations/browser : module as esm5
...
sameerag commented 2 years ago

@jasonnutter Did we sort this?

jasonnutter commented 2 years ago

No, we have not addressed this.

Lonli-Lokli commented 1 year ago

IE is not supported anymore, why do you need es5 now? As well as angular 9 which is not supported too

tnorling commented 1 year ago

Closing as Ivy will be supported in msal-angular v3 (currently in beta) but will not be backported to v2. Please track issue #4298 for announcements on general availability of v3