Karma unit tests fail with Angular 4 and older browsers

[Ionaru]

OS?

Linux, Ubuntu 16.10

Versions.

@angular/cli: 1.0.0-rc.0
node: 7.5.0
os: linux x64
@angular/common: 4.0.0-rc.2
@angular/compiler: 4.0.0-rc.2
@angular/core: 4.0.0-rc.2
@angular/forms: 4.0.0-rc.2
@angular/http: 4.0.0-rc.2
@angular/platform-browser: 4.0.0-rc.2
@angular/platform-browser-dynamic: 4.0.0-rc.2
@angular/router: 4.0.0-rc.2
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 4.0.0-rc.2

Repro steps.

ng new App -ng4
cd App
npm i karma-phantomjs-launcher --save-dev
edit karma.conf.js to require karma-phantomjs-launcher
edit karma.conf.js to set PhantomJS as browser
ng test --single-run

The log given by the failure.

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  SyntaxError: Unexpected token 'const'
  at webpack:///src/app/app.component.ts:1:0 <- src/test.ts:57831

I observed several other similar errors when testing on Saucelabs, but that one above appears the most often for me and I was able to reproduce it locally.

Firefox 45.0.0 (Linux 0.0.0) ERROR
  SyntaxError: invalid for/in left-hand side
  at webpack:///~/@angular/compiler/@angular/compiler/testing.es5.js:298:0 <- src/test.ts:66290

Firefox 48.0.0 (Mac OS X 10.8.0) ERROR
  SyntaxError: missing = in const declaration
  at webpack:///~/@angular/compiler/@angular/compiler/testing.es5.js:298:0 <- src/test.ts:66290

Chrome 48.0.2564 (Linux 0.0.0) ERROR
  Uncaught SyntaxError: Unexpected token =
  at webpack:///~/@angular/core/@angular/core/testing.es5.js:194:0 <- src/test.ts:18647

IE 11.0.0 (Windows 10 0.0.0) ERROR
  Syntax error
  at webpack:///~/@angular/core/@angular/core/testing.es5.js:42:0 <- src/test.ts:18495

Safari 6.2.8 (Mac OS X 10.8.5) ERROR
  SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.
  at webpack:///~/@angular/core/@angular/core/testing.es5.js:10:0 <- src/test.ts:18463

Mention any other details that might be useful.

I'm using PhantomJS to simulate an older browser, I get the same error from IE11, Safari 6, Chrome 48 and Firefox 48 on Saucelabs with my project

Tests do run correctly on latest Chrome, Firefox and Edge

I suspect this has something to do with Typescript not being properly compiled to ES5.

[Ionaru]

The full log of my project build can be found here: https://travis-ci.org/Ionaru/EVE-Track/jobs/206996897

[m0t0r]

@Ionaru see #5065

@hansl would that be possible to look into this issue, please ? it really blocks upgrade to RC as running tests with PhantomJS is not possible anymore.

[cexbrayat]

The (recently introduced) tsconfig.spec.json has a target "target": "es6".
You probably want to target es5 in your use case.

[Ionaru]

I tried that, but the error still existed, I also tried setting testTsconfig in .angular-cli.json to use the same tsconfig as my application, but without success.

On a side note, the new tsconfig.app.json and tsconfig.spec.json don't appear to play nice with IntelliJ or Webstorm, is that a known issue?

[cexbrayat]

Hmm, weird, it solved it for me...

Yeah the multiple tsconfig issue in IDEs is known (see comment and response here #5046 (comment) and issue #5175)

[m0t0r]

@Ionaru I got PhantomJS working with RC1 and Angular 2.4.x.

I set "target": "es5", in tsconfig.spec.json and also uncommented

import 'core-js/es6/object';
import 'core-js/es6/array';
import 'intl';

in polyfills.ts

Note, you need to install intl.

If you use Angular 4.x, then uncomment only these:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/string';
import 'core-js/es6/array';

[Brocco]

The changes in polyfills are in line with having the values in there commented out. If you need/want to support other browsers uncomment what is needed.

The change to output es5 instead of es6 should happen and I will push up a PR shortly.

[badcodelab]

having this issue with @angular/cli 1.6.8 and @angular 5.2.3
tsconfig.spec.ts has es5 as a target

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