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

Most upvoted comments

A huge thanks goes to @mpalourdio for providing a reproduction that was crucial to pinpoint the issue.

I had 'regeneratorRuntime' is undefined with ie11 and

    "@angular-devkit/build-angular": "~0.803.0",
    "@angular/cli": "^8.3.0",

only working solution was to downgrade to

    "@angular-devkit/build-angular": "~0.802.2",
    "@angular/cli": "^8.2.2",

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 for loadChildren? 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 with optimization enabled but buildOptimizer disabled? What version of zone.js is being used in the application? What version of core.js (if any) is present? (8.0+ uses core.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. The browserslist 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 both es5 and es2015 holds the same SHA mapping when it the SHA for es2015 bundles should be different than es5 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:

  • set the 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)
  • try adding the NG_BUILD_DIFFERENTIAL_FULL environment variable with a value of 1 or TRUE. 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:

  • If I serve locally, with no optimizations, it works like a charm in IE11
  • When serving with optimizations I get the error: 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.