angular-cli: Cli 8.3.0 ES5 build browser errors (Unable to get property 'enumerable' of undefined or null)
🐞 Bug report
Command (mark with an x
)
- [ ] new
- [X] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc
Is this a regression?
Yes, the previous version in which this bug was not present was: ....In version 8.2.2 I have no issues
Description
After updating to cli 8.3.0 I suddenly noticed a load of different errors for browsers using the es5 versions such as
Uncaught (in promise): TypeError: Object prototype may only be an Object or null.
Object prototype may only be an Object or null.
Uncaught (in promise): TypeError: Unable to get property 'enumerable' of undefined or null reference
These errors seem to be occuring when loading lazy modules via the router, and the module will not load, but not all modules have an issue.
🔬 Minimal Reproduction
So far I’ve not been able to find the cause, the project it’s happening on is pretty big so could take an age to narrow it down, all I know so far is everything works without issue when using 8.2.2.
🌍 Your Environment
Angular CLI: 8.3.0
Node: 10.16.0
OS: darwin x64
Angular: 8.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Package Version
--------------------------------------------------------------------
@angular-devkit/architect 0.802.2
@angular-devkit/build-angular 0.802.2
@angular-devkit/build-optimizer 0.802.2
@angular-devkit/build-webpack 0.802.2
@angular-devkit/core 8.3.0
@angular-devkit/schematics 8.3.0
@angular/cdk 8.1.3
@angular/cli 8.3.0
@angular/flex-layout 8.0.0-beta.26
@angular/material 8.1.3
@angular/material-moment-adapter 8.1.3
@angular/pwa 0.801.3
@ngtools/webpack 8.2.2
@nguniversal/common 8.1.1
@nguniversal/express-engine 8.1.1
@nguniversal/module-map-ngfactory-loader 8.1.1
@schematics/angular 8.1.3
@schematics/update 0.803.0
rxjs 6.5.2
typescript 3.5.3
webpack 4.38.0
Anything else relevant?
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 3
- Comments: 45 (4 by maintainers)
Commits related to this issue
- fix(@angular-devkit/build-angular): disable top level variable and function name mangling Disables toplevel mangling and enables compression for es5 bundles. With compress enabled we reduce a further... — committed to angular/angular-cli by alan-agius4 5 years ago
- fix(@angular-devkit/build-angular): disable top level variable and function name mangling Disables toplevel mangling and enables compression for es5 bundles. With compress enabled we reduce a further... — committed to angular/angular-cli by alan-agius4 5 years ago
A huge thanks goes to @mpalourdio for providing a reproduction that was crucial to pinpoint the issue.
I had
'regeneratorRuntime' is undefined
with ie11 andonly working solution was to downgrade to
browserlist did not help nor adding all polyfills by hand to polyfill.ts
edit: NG_BUILD_DIFFERENTIAL_FULL=1 works too
Hey, happy to help and happy to see that this issue has been resolved ! You all do an AWESOME job here!
Thanks @merobal for checking
@alan-agius4 Thanks for pointing out that PR.
About the second issue: thanks for suggesting to remove the cache, I can confirm that our smaller app works good now.
I re-tested our larger app with adding the missing polyfill manually (and having the build fix), and that works now too.
@alan-agius4 added in a zip on the repo
Just an FYI - Setting the NG_BUILD_DIFFERENTIAL_FULL environment variable to 1 got rid of the error for me.
Are any of these projects public? Without a way to reproduce the problem, it is quite difficult to troubleshoot or provide a solution.
The configuration options for the project from both
angular.json
and the tsconfig may be helpful if generating a reproduction is proving difficult. Also, any information about the failing lazy routes and answers to the following questions would be helpful as well. Are the applications using the string form or the dynamic import form forloadChildren
? Is Ivy enabled for the application (ivyEnabled
in a tsconfig)? Is there any JavaScript being used as an asset (angular.json
assets
option)? Does the application work withoptimization
enabled butbuildOptimizer
disabled? What version ofzone.js
is being used in the application? What version ofcore.js
(if any) is present? (8.0+ usescore.js
3 internally. It’s highly recommended to use 3 as well if adding any custom polyfills)Also, please ensure that the
browserslist
file for the application includes IE11. Thebrowserslist
file represents the browser requirements for the application and should include all browsers that the application is required to support.Setting the NG_BUILD_DIFFERENTIAL_FULL environment variable to 1 also got rid of the error for me.
Let me give this a try with the dist folder.
@alan-agius4 mail sent from my corporate email@ (Sent at 15:02 GMT+2). EDIT2 : This message was blocked because its content presents a potential security issue.
It also seems like the
runtime.js
for bothes5
andes2015
holds the same SHA mapping when it the SHA fores2015
bundles should be different thanes5
bundles. This causes apps with subresource integrity enabled to break.Thank you for the information. Two additional items that can be tried are the following:
target
in the application’s tsconfig to ES5 (not ideal as there will be no differential loading; This was the default prior to 7.0)NG_BUILD_DIFFERENTIAL_FULL
environment variable with a value of1
orTRUE
. This will cause the CLI to use the old double build method of differential loading.These should both be considered workarounds but they also have value in aiding to narrow down the root cause of the issue. Please let me know if either or both of these options prevent the issue from occuring.
@clydin I have started the process of trying to reproduce the issue 👨🏻🦳
@dottodot and @mpalourdio the changes that you are seeing in the polyfills and console respectively are expected, this is because in 8.3 we no longer generate the ES5 bundles using a separate Webpack build. But rather we use babel to downlevel the ES2015 code to ES5.
As @clydin mentioned, it would be useful and helpful for us to track down the problem if someone puts together a minimal reproduction.
Our team is unfortunately also experiencing this problem with the CLI in version
8.3.0
. Forced to downgrade today 😢 Our app is also using lazy loading extensively. I did the following findings:Uncaught (in promise): TypeError: Unable to get property 'enumerable' of undefined or null reference. TypeError: Unable to get property 'enumerable' of undefined or null reference
. I also get the reference to the bundle where the error is thrown, but I don’t know how to continue with that information 🤷🏽♂️If I somehow can help fix this issue, let me know.