Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular 8 Karma tests on PhantomJS and IE11 not working #14691

Closed
kjocevicius opened this issue Jun 6, 2019 · 8 comments
Closed

Angular 8 Karma tests on PhantomJS and IE11 not working #14691

kjocevicius opened this issue Jun 6, 2019 · 8 comments

Comments

@kjocevicius
Copy link

After upgrade to Angular 8 I can't get tests working on PhantomJS and IE11 due to missing polyfils.

As I understand, polyfills are managed by Angular CLI, so during upgrade these lines are removed:

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/es7/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

When running tests on IE/PhantomJS I get typical missing polyfils errors like:

PhantomJS 2.1.1 (Windows 8.0.0) ERROR
  ReferenceError: Can't find variable: Symbol
  at http://localhost:9877/_karma_webpack_/polyfills.js:4242:65

However, after returning now missing lines, I get errors about ZoneJS Promise being overwritten:

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

I'm not sure if this is cli bug, or if I am missing something, but I would really appreciate the help!

My ng --versions:

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.800.1
@angular-devkit/build-angular      0.800.1
@angular-devkit/build-ng-packagr   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/cdk                       7.3.7
@angular/cli                       8.0.1
@angular/material                  7.3.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   8.0.1
@schematics/angular                8.0.1
@schematics/update                 0.800.1
ng-packagr                         5.2.0
rxjs                               6.5.2
typescript                         3.4.5
webpack                            4.30.0
@alan-agius4
Copy link
Collaborator

Duplicate of #14455

@alan-agius4 alan-agius4 marked this as a duplicate of #14455 Jun 6, 2019
@kjocevicius
Copy link
Author

I think it's not a duplicate. I have changed target to 'es5', so serve works well for me.

@alan-agius4
Copy link
Collaborator

Sorry wrong issue.

Duplicate of #14618

@alan-agius4 alan-agius4 marked this as not a duplicate of #14455 Jun 6, 2019
@kjocevicius
Copy link
Author

Can confirm that this is fixed now in versions:

  • "@angular-devkit/build-angular": "^0.800.2",
  • "@angular/cli": "^8.0.2",

@krawinkelm
Copy link

But your polyfills are still present in polyfills.ts?

@jamesbarrett95
Copy link

Can confirm that this is fixed now in versions:

  • "@angular-devkit/build-angular": "^0.800.2",
  • "@angular/cli": "^8.0.2",

Upgraded to these versions and I still receive an error when using PhantomJS with no core js polyfills:
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
SyntaxError: Use of reserved word 'class'

8.0.3 was released recently too. I upgraded to that but still no luck.

@jamesbarrett95
Copy link

jamesbarrett95 commented Jun 19, 2019

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.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants