Cli 8.3.0 ES5 build browser errors (Unable to get property 'enumerable' of undefined or null)

[dottodot]

🐞 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?

[dottodot]

Not sure if it will help but these are the build files for es5 polyfills from both versions
8.2.2
https://gist.github.com/dottodot/cf94e5ad7aeb5fa9bb46a8784bc9778b
8.30
https://gist.github.com/dottodot/350cae78efc360cab09e2a2d65e5685d

[clydin]

This appears to be a bug but we will need to look at a reproduction to find and fix the problem. Can you setup a minimal reproduction please?

You can read here why this is needed. A good way to make a minimal reproduction is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[dottodot]

@clydin I am try to put together a reproduction, but it's not proving to be easy. I have found that if I turn off optimization on the build I don't get the errors, so look like something is getting messed up during that process.

[dottodot]

@clydin I've updated the gists of the polyfills generated by each so that they are not optimized and there are no similarities between the 2 so there seems to have been a major change to how the polyfills are created.

8.2.2
https://gist.github.com/dottodot/cf94e5ad7aeb5fa9bb46a8784bc9778b
8.30
https://gist.github.com/dottodot/350cae78efc360cab09e2a2d65e5685d

[mpalourdio]

I have the same problem from 8.3.0. I don't know if this is relevant, but with v8.2, ng build --prod had this output on one of my projects :

$ ng build --prod

chunk {0} runtime-es2015.763595a658e3d915739d.js (runtime) 2.22 kB [entry] [rendered]
chunk {1} main-es2015.e3c08efc69d7e6b64c3f.js (main) 342 kB [initial] [rendered]
chunk {2} polyfills-es2015.5cb1e996b2a376ba4548.js (polyfills) 36.4 kB [initial] [rendered]
chunk {3} styles.260db7471b6b212d15fd.css (styles) 170 kB [initial] [rendered]
chunk {4} 4-es2015.048f9a64090cab8e98f7.js () 65.6 kB  [rendered]
chunk {5} 5-es2015.f075b92034ea071d2587.js () 10.4 kB  [rendered]
chunk {scripts} scripts.8101eab34ab8ceec5c05.js (scripts) 2.38 kB [entry] [rendered]
Date: 2019-08-23T09:31:16.652Z - Hash: 33fb6c4dbc6be9e03248 - Time: 41757ms

chunk {0} runtime-es5.e9dbe24425ac2594dc02.js (runtime) 2.22 kB [entry] [rendered]
chunk {1} main-es5.185af62d087b4cf3e617.js (main) 385 kB [initial] [rendered]
chunk {2} polyfills-es5.082c2604bbe32d09561f.js (polyfills) 118 kB [initial] [rendered]
chunk {3} 3-es5.9a0287347fc12637f12f.js () 78.5 kB  [rendered]
chunk {4} 4-es5.50989bbe4d9b595a26d6.js () 10.5 kB  [rendered]
chunk {scripts} scripts.8101eab34ab8ceec5c05.js (scripts) 2.38 kB [entry] [rendered]
Date: 2019-08-23T09:31:53.474Z - Hash: bb637c1926545f66aff8 - Time: 36719ms

Now, it's just :

$ ng build --prod

chunk {0} runtime-es2015.5347e435a5d46e675e0c.js (runtime) 4.24 kB [entry] [rendered]
chunk {1} main-es2015.b5f190e2953aaddb7646.js (main) 548 kB [initial] [rendered]
chunk {2} polyfills-es2015.616846cf0280d444086b.js (polyfills) 64.3 kB [initial] [rendered]
chunk {3} polyfills-es5-es2015.1fbf71c2275b42103e11.js (polyfills-es5) 211 kB [initial] [rendered]
chunk {4} styles.260db7471b6b212d15fd.css (styles) 170 kB [initial] [rendered]
chunk {5} 5-es2015.c58944658cbd734e2e82.js () 87.5 kB  [rendered]
chunk {6} 6-es2015.3394c5ab5d2af60ed413.js () 11.4 kB  [rendered]
chunk {scripts} scripts.8101eab34ab8ceec5c05.js (scripts) 2.8 kB [entry] [rendered]
Date: 2019-08-23T04:29:11.236Z - Hash: 06bcc42a7e96f19e7357 - Time: 59384ms
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

[alexbjorlig]

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.

[mpalourdio]

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.

Exactly same error for me in IE11. Also affects an application with lazy loading, but I don't know if this is relevant.

[alan-agius4]

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

[clydin]

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.

[alexbjorlig]

@clydin I have started the process of trying to reproduce the issue 👨🏻‍🦳

[mpalourdio]

@clydin My failing projects are both private, I need time to make a reproducible public one. For the moment, here are few answers

1. see angular.json, tsconfig, package.json, browserlist here
2. Lazy routes with dynamic imports for me
3. Ivy not enabled
4. Yes, some js used as assets (see angular.json in my gist)
5. Does the application work with optimization enabled but buildOptimizer disabled? I did not test this point
6. zonejs ~0.9.1
7. no specific core.js in package.json

Hope this helps a bit for the moment ! Thanks for taking time to take a look at this !

[dottodot]

@clydin I'm using dynamic imports for my lazy modules, one thing I've noticed is I'm only getting the error when I click on a link in the app (via routerLink). If I access the route directly the modules loads without any errors.

I updated to the latest version of core-js but that has not made any difference.
buildOptimizer disabled makes no difference either.
ivy is not enabled
no js assets in angular.json

This is my browserlist

> 0.5%
iOS >=8
last 4 versions
Firefox ESR
not dead
IE 9-11

    "zone.js": "~0.9.1"

[clydin]

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.

[aaronte]

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.

[clydin]

@dottodot Does this occur with every lazy module accessed via a routerLink attribute or just some?

Is there any stack trace information that goes along with those errors?

[CRACKISH]

I have same error in IE11.

Angular CLI: 8.3.0
Node: 12.4.0
OS: win32 x64
Angular: 8.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.803.0
@angular-devkit/build-angular 0.803.0
@angular-devkit/build-ng-packagr 0.803.0
@angular-devkit/build-optimizer 0.803.0
@angular-devkit/build-webpack 0.803.0
@angular-devkit/core 8.3.0
@angular-devkit/schematics 8.3.0
@angular/cdk 8.1.4
@angular/cli 8.3.0
@angular/material 8.1.4
@ngtools/webpack 8.3.0
@schematics/angular 8.3.0
@schematics/update 0.803.0
ng-packagr 5.5.0
rxjs 6.5.2
typescript 3.5.3
webpack 4.39.2

I have only lazy modules.

[jponeill]

Just an FYI - Setting the NG_BUILD_DIFFERENTIAL_FULL environment variable to 1 got rid of the error for me.

[CRACKISH]

Just an FYI - Setting the NG_BUILD_DIFFERENTIAL_FULL environment variable to 1 got rid of the error for me.

Yes, it's helped.

[alan-agius4]

Hi all, I have tried to replicate the above reported issue but I was unable to do so.

Steps

ng new lazy-loading-dl --routing
cd lazy-loading-dl
ng g m foo --module app.module --route foo

Added the below in app.component.html

<a [routerLink]="['/foo']" >
  link to foo
</a>

ng build --prod
http-server dist/lazy-loading-dl

Opened the page in IE11 and clicked on link to foo.

Result
The lazy loaded module loaded without any error.

We really need a reproduction to track down and solve the issue.

[mpalourdio]

@alan-agius4 I have a hard time trying to reproduce this in a minimal project too. But the problem exists. Can you just try adding a guard that returns an observable<boolean> on your 'foo' route ?

One of my project has import 'core-js/es7/array'; in polyfill.ts So I can use myArray.includes('a-value'). Maybe give this a try somewhere ?

[mpalourdio]

Ok, so I have tried with both the guard and the polyfill, with no luck as this runs okish in IE11

[mpalourdio]

@alan-agius4 Do you need to make the code run ? As it's tightly coupled with a java backend and some node_modules published internally on a 'nexus', it can be very difficult.

Otherwise I have no problem with sharing the project privately

[alan-agius4]

Yeah, it would need to "run" to see the error in the browser. If you share the dist folder alone will I be able to see the mentioned error?

[mpalourdio]

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.

[osahner]

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

[mpalourdio]

@alan-agius4 Sorry for spamming here, please delete once notified, but gmail antivirus rejected my mail. I have invited you in a private repo : https://github.com/mpalourdio/ngcli830-dist

[alan-agius4]

@mpalourdio, can you also provide the unminified version of the code please? Thanks

[mpalourdio]

@alan-agius4 added in a zip on the repo

[edocbuhtig]

I updated using ng update and boom got this warning

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 82.5 kB.

Generating ES5 bundles for differential loading...

ES5 bundle generation complete.

bundle.js is now 1.5mb with 8.2.2 it wasn't that big in size.

[alan-agius4]

thanks @mpalourdio

[merobal]

We had 'regeneratorRuntime' is undefined first, then I added https://www.npmjs.com/package/regenerator-runtime and got a different error ("no platform exists!" error message coming from the polyfills file). Then I downgraded back to CLI 8.2. asap.

[a616101]

on CLI 8.3.1, When we use NGRX, Will have the 'regeneratorRuntime' is undefined issue in IE 11.....

[clabough]

Setting the NG_BUILD_DIFFERENTIAL_FULL environment variable to 1 also got rid of the error for me.

[merobal]

This is probably caused by #15246 as when I searched for what caused our issue, I found https://babeljs.io/docs/en/babel-polyfill where the regeneratorRuntime was mentioned.

I did an upgrade on our projects again to provide more info.
We use nrwl/nx and monorepo-style development, we have shared libs and 2 apps.

Our larger app

• It works well in Chrome and we got error in IE 11 only.
• The initial error is:

SCRIPT5009: 'regeneratorRuntime' is undefined
vendor-es5.[hash].js (1,2700948)

• After adding import "regenerator-runtime/runtime"; to our polyfills, we got this error:

No platform exists!

Our smaller app

• It works well in Chrome and we got error in IE 11 only.
• The error message is:

SCRIPT5007: Invalid operand to 'in': Object expected
main-es5.[hash].js (1,109)

The generated code is:

So 2 apps, same (nx) project, similar setup, different error messages in IE 11.

[merobal]

@alan-agius4 I updated the process-bundle.js file in our node_modules with your updates from the PR to test, and I got the same errors described in my previous comment. Do you want me to create a new issue for those as the PR will close this issue?

[alan-agius4]

@merobal, the first issue you are experiencing is not related to this one. With regards to the regenerator-runtime there is a PR for that #15470

For the second issue make sure that you delete the cache prior to rebuilding after changing the code in build-angular using:

rm -rf node_modules/.cache

Can you check if you still get the 2nd error after that?

[merobal]

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

Thanks @merobal for checking

[alan-agius4]

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

[mpalourdio]

Hey, happy to help and happy to see that this issue has been resolved ! You all do an AWESOME job here!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}