Regression with ancient Chrome/Chromium after update to v8.0

[thecp]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [x] 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: 7.2.15. The issue occurred after update to v8.

Description

After update from v7.2 to v8 with Chrome (or more precisely Chromium) version 57 (yes, I know...) ng test fails for ALL tests and GUI stopped working. While latter I can only reproduce with a bigger app, ng test already fails for a fresh project with ng new.

🔬 Minimal Reproduction

1. create a new project with ng new
2. run ng test with Chromium v57 (on Debian 8)
   (I created a small repo as a showcase for this: https://github.com/thecp/angular-8-test)

🔥 Exception or Error

Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
        Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)
            at Function.assertZonePatched (node_modules/zone.js/dist/zone-evergreen.js:52:1)
            at new NgZone (node_modules/@angular/core/fesm2015/core.js:30703:1)
            at TestBedViewEngine._initIfNeeded (node_modules/@angular/core/fesm2015/testing.js:3128:1)
            at TestBedViewEngine.createComponent (node_modules/@angular/core/fesm2015/testing.js:3384:1)
            at Function.createComponent (node_modules/@angular/core/fesm2015/testing.js:2968:1)
            at UserContext.it (src/app/app.component.spec.ts:14:29)
            at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:359:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:308:1)
            at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:358:1)

🌍 Your Environment

Angular CLI: 8.0.1
Node: 10.16.0
OS: linux x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.1
@angular-devkit/build-angular     0.800.1
@angular-devkit/build-optimizer   0.800.1
@angular-devkit/build-webpack     0.800.1
@angular-devkit/core              8.0.1
@angular-devkit/schematics        8.0.1
@angular/cli                      8.0.1
@ngtools/webpack                  8.0.1
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Also most importantly:

chromium --version
Chromium 57.0.2987.98 Built on 8.7, running on Debian 8.11

Anything else relevant?

Again, only discovered this with Chromium v57 on Debian 8 Jessie

[sandeepdussa]

Facing same issue after upgrading by following steps from https://update.angular.io/#7.0:8.0

ng update @angular/cli @angular/core

PhantomJS 2.1.1 (Windows 7.0.0)
Failed: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do
so before loading zone.js.)

-- here is my current polyfills.ts --

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
// Evergreen browsers require these.
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';
// Zone JS is required by default for Angular itself.
import 'zone.js/dist/zone';

[aman7000]

Hi,
I am upgrading AngularJs application to Angular 8.

on using promise in angular-ui-router, I am getting the same error.

Google Chrome is up to date
Version 75.0.3770.80 (Official Build) (64-bit)

[Senneseph]

I've got something like this as well from my ng test, but my project is still using PhantomJS, not Chrome.

On a brand new project, (e.g. ng new testing-bug), ng test doesn't work until you install Chrome. But due to the development environment, Chrome won't work, so I do:

• npm install --save-dev karma-phantomjs-launcher
• Edit karma.conf.js to replace require('karma-chrome-launcher'), with require('karma-phantomjs-launcher'), and replace 'Chrome' with 'PhantomJS' in the browsers array.

Now, ng test will yield:

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
SyntaxError: Use of reserved word 'class'
at http://127.0.0.1:9876/_karma_webpack_/polyfills.js:3008:0

This looked to me like a problem with which version of JS being used, so in my tsconfig.json I changed the target from 'es2015' to 'es5'.

Now, ng test yields:

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
ReferenceError: Can't find variable: Symbol
at http://127.0.0.1:9876/_karma_webpack_/polyfills.js:3991:65

Ok, still having some problems with the Javascript. So let's try adding in all the core-js polyfills that got removed a while ago (but are somehow still necessary for anything to work right).

• npm install --save-dev core-js

And then in polyfills.ts, add these guys:

import 'core-js/es/symbol'
import 'core-js/es/object'
import 'core-js/es/function'
import 'core-js/es/parse-int'
import 'core-js/es/parse-float'
import 'core-js/es/number'
import 'core-js/es/math'
import 'core-js/es/string'
import 'core-js/es/date'
import 'core-js/es/array'
import 'core-js/es/regexp'
import 'core-js/es/map'
import 'core-js/es/weak-map'
import 'core-js/es/set'

Now, ng test yields:

Error: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.) in http://127.0.0.1:9876/_karma_webpack_/polyfills.js (line 12128)

And this message is similar, though not exactly the same message OP is dealing with. I'm wondering if, for whatever reason, both these headless browsers are somehow trying to load both the es5 and es2015 bundles - and so one bundle overwrites ZoneAwarePromise, but it's basically with the same thing. The tests continue to run, but they each emit this message.

[borian]

The same error @thecp described can be observed with PhantomJs

"karma-phantomjs-launcher": "^1.0.4",
"phantomjs-prebuilt": "^2.1.16",

[alan-agius4]

Hi, indeed this is an issue and we have a fix for this #14693

It’s paramount to mention that one should not add the above mentioned core-js polyfills in their polyfills.ts file as that would add the polyfills twice.

core-js polyfills are already added internally during the build https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/es5-jit-polyfills.js

[Senneseph]

Thanks for the help, @alan-agius4

It’s paramount to mention that one should not add the above mentioned core-js polyfills in their polyfills.ts file as that would add the polyfills twice.

Something must be going awry in the build process then because I need to add all of those polyfills otherwise, I get all kinds of error messages in IE11. I had to do this in 7.0 as well. I don't think most people these days are even thinking of IE11, but it has twice the marketshare of Edge and gets used by a good portion of our clients.

In my particular app, it complains first about Array.prototype.includes being undefined, but more errors are thrown once I've added import 'core-js/es/array' so I just added them all (I also have to add Promise and fetch shims).

Maybe my browserslist file is wrong, it looks like this:

# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11