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

[alan-agius4]

@Senneseph, we only add polyfills which are needed by Angular framework itself. Any other polyfills that other dependencies or the application code requires will need to be added by yourself.

[RickIsWright]

For an IE 11 Angular 8 app: after creating a new angular project using CLI 8.0.3, changed tsconfig.json from "target": "es2015", to "target": "es5" and ng test yielded no errors. However, the title did not render in test, but it does render in IE when I run with ng serve localhost:4200. Test results:
3 specs, 0 failures, randomized with seed 28991
AppComponent
• should render title in a h1 tag (Did not render Title which should be my-app2)
• should have as title 'my-app2'
• should create the app

after several refreshes my-app2 finally appeared in the h1 tag as Welcome to my-app2!. This happened in Chrome and IE

[jamesbarrett95]

@Senneseph I have the same issue you described on my local machine and in our Jenkins build script:

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
SyntaxError: Use of reserved word 'class'

Did you find a fix for this? I have tried:

• Removing core.js imports in the polyfills file
• Changed the browsers array to 'PhantomJS'

From reading through this issue trail and reading #14693 I can't find a definitive answer. @alan-agius4

Thanks!

[mmmichl]

To fix this issue, be sure you have "@angular-devkit/build-angular": <= 0.800.2 (issue: #14618). Better to update all angular dependent libraries.

Then you need to edit browserlist: remove not in line not IE 9-11 # For IE 9-11 support, remove 'not'.

This worked for me to have again a working IE11.

[jamesbarrett95]

For anyone who's struggling with running PhantomJS tests with Angular 8 locally and/or in a build pipeline, this worked for me:

• Upgrade @angular/cli to 8.0.3
• Upgrade @angular-devkit/build-angular to 0.800.2
• Add "target": "es5" attribute to tsconfig.spec.json
• Remove the '#' and/or 'not' next to IE 9-11 in browserlist file.

EDIT:

This workaround isn't the best solution either. By changing the target attribute to es5, code coverage will suffer as reserved words like async, await and class won't be recognised. There are cases where our code coverage percentages dropped from 90's to 60's.

[Senneseph]

I know this is closed and there's a merge that was supposed to fix it, but I am still unable to get past this error:

SyntaxError: Use of reserved word 'class' at http://127.0.0.1:8081/_karma_webpack_/polyfills.js:4763:0

Is there anyone who ran into this same issue and successfully resolved it?

[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.}