getting syntax error when running with PhantomJS

[mbakker96]

I get this error when running ng test with PhantomJS. Did found some related issues but all without any solution in my case. I did make a repo with the error to reproduce.

Versions

Angular CLI: 1.6.4
Node: 6.12.3
OS: darwin x64
Angular: 5.0.1
... common, compiler, compiler-cli, core, forms, http
... platform-browser, platform-browser-dynamic, router

@angular/cli: 1.6.4
@angular-devkit/build-optimizer: 0.0.37
@angular-devkit/core: 0.0.24
@angular-devkit/schematics: 0.0.45
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.12
typescript: 2.4.2
webpack: 3.10.0

Repro steps

$ git clone https://github.com/mbakker96/phantom-bug
$ cd phantom-bug
$ npm install
$ npm run test

Observed behavior

npm run test

> Clicker@2.23.0 test /Volumes/Projects/clicker
> ng test

 10% building modules 1/1 modules 0 active12 01 2018 12:02:44.441:WARN [karma]: No captured browser, open http://localhost:9876/
12 01 2018 12:02:44.451:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
12 01 2018 12:02:44.452:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
12 01 2018 12:02:44.455:INFO [launcher]: Starting browser PhantomJS                                                                                                                            [../../../../../src recursive \.spec\.ts$] ./src \.spec\.ts$ 534 bytes {main} [built]   
[../../../../../src/pipes/translate.pipe.mock.ts] ./src/pipes/translate.pipe.mock.ts 1.04 kB {main} [built]
[../../../../../src/polyfills.ts] ./src/polyfills.ts 2.75 kB {polyfills} [built]
[../../../../../src/services/clickers.mock.ts] ./src/services/clickers.mock.ts 513 bytes {main} [built]
[../../../../../src/services/index.ts] ./src/services/index.ts 239 bytes {main} [built]
[../../../../../src/services/translate.mock.ts] ./src/services/translate.mock.ts 836 bytes {main} [built]
[../../../../../src/test.ts] ./src/test.ts 3.61 kB {main} [built]
[../../../../zone.js/dist/fake-async-test.js] ./node_modules/zone.js/dist/fake-async-test.js 17 kB {vendor} [built]
   [0] multi ./src/polyfills.ts 28 bytes {polyfills} [built]
[../../../../zone.js/dist/jasmine-patch.js] ./node_modules/zone.js/dist/jasmine-patch.js 6.36 kB {vendor} [built]
[../../../../zone.js/dist/long-stack-trace-zone.js] ./node_modules/zone.js/dist/long-stack-trace-zone.js 6.22 kB {vendor} [built]
[../../../../zone.js/dist/proxy.js] ./node_modules/zone.js/dist/proxy.js 5.6 kB {vendor} [built]
[../../../core/esm2015/testing.js] ./node_modules/@angular/core/esm2015/testing.js 37.1 kB {vendor} [built]
[../../../forms/esm2015/forms.js] ./node_modules/@angular/forms/esm2015/forms.js 185 kB {vendor} [built]
[../../../platform-browser-dynamic/esm2015/testing.js] ./node_modules/@angular/platform-browser-dynamic/esm2015/testing.js 14.9 kB {vendor} [built]
    + 896 hidden modules

WARNING in ./node_modules/ionic-angular/es2015/util/ng-module-loader.js
25:11-36 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/ionic-angular/es2015/util/ng-module-loader.js
 @ ./node_modules/ionic-angular/es2015/util/module-loader.js
 @ ./node_modules/ionic-angular/es2015/components/modal/modal-component.js
 @ ./node_modules/ionic-angular/es2015/index.js
 @ ./src/test.ts

WARNING in ./node_modules/ionic-angular/es2015/util/ng-module-loader.js
35:11-36 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/ionic-angular/es2015/util/ng-module-loader.js
 @ ./node_modules/ionic-angular/es2015/util/module-loader.js
 @ ./node_modules/ionic-angular/es2015/components/modal/modal-component.js
 @ ./node_modules/ionic-angular/es2015/index.js
 @ ./src/test.ts
12 01 2018 12:02:52.115:WARN [karma]: No captured browser, open http://localhost:9876/
12 01 2018 12:02:52.337:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket XBqOoWSUIhicke_4AAAA with id 16161616
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Use of reserved word 'class'
  at http://localhost:9876/_karma_webpack_/vendor.bundle.js:1619
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Use of reserved word 'class'
  at http://localhost:9876/_karma_webpack_/vendor.bundle.js:1619

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Use of reserved word 'class'
  at http://localhost:9876/_karma_webpack_/vendor.bundle.js:1619

Desired behavior

When running ng test the user gets a syntax error.

Mention any other details that might be useful (optional)

[ollyjohn]

We are also getting this issue in an Ionic 3 application - has there been any movement on this?

[Sadlowski]

We are also getting this issue in an Ionic 3 application - has there been any movement on this? — You are receiving this because you are subscribed to this thread. Reply to this email directly, zasobygwp.pl view it on GitHub , or zasobygwp.pl mute the thread .

[pirumpi]

Any updates on this issue?

[kaitrin]

@pirumpi @Sadlowski @ollyjohn @mbakker96
I was also getting this error (SyntaxError: Use of reserved word 'class') and wanted to come back here to share the (somewhat baffling) solution that I found after much digging and plenty of trial and error. My experience with this error happened when I attempted to upgrade @angular/cli from 1.4.9 to 1.6.1 and then run my tests in PhantomJS. Due to the messages, I was certain it was a polyfills issue, and I was searching like a madwoman to figure out what was wrong with my polyfills.ts.

Turns out that, in my case anyhow, it had nothing to do (directly) with my polyfills. I was simply missing a tsconfig.app.json in my src directory. For the time being, I'm just relieved to have my tests running again, and haven't dug into exactly why this was causing these particular errors.

I already had my app's tsconfig property set to tsconfig.app.json in .angular-cli.json and simply added the tsconfig.app.json file to get it to work.

src/tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": ""
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

[filipesilva]

Thanks for reporting this issue. This issue was originally reported a long time ago and since there we've had many releases, one of which might have addressed this problem. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.