Running test using PhantomJS is failing with RC.0

[daBishMan]

Please provide us with the following information:

OS?

Windows 10.

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

@angular/cli: 1.0.0-rc.0
node: 7.5.0
os: win32 x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.8

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.
Running tests using PhantomJS fails, while running the same tests using Chrome passes.

$ ng test -browsers PhantomJS
27 02 2017 09:16:38.148:WARN [karma]: No captured browser, open http://localhost:9876/
27 02 2017 09:16:38.158:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
27 02 2017 09:16:38.158:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
27 02 2017 09:16:38.614:INFO [launcher]: Starting browser PhantomJS
27 02 2017 09:16:42.636:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket FxslPlobVmqXyCu-AAAA with id 90654741
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
SyntaxError: Use of reserved word 'class'
at webpack:///src/app/shared/models/search-params.model.ts:4:0 <- src/test.ts:6252
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
SyntaxError: Use of reserved word 'class'
at webpack:///src/app/shared/models/search-params.model.ts:4:0 <- src/test.ts:6252

PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 0 of 0 ERROR (0.862 secs / 0 secs)

Chrome 56.0.2924 (Windows 10 0.0.0): Executed 291 of 291 SUCCESS (10.092 secs / 9.985 secs)
TOTAL: 291 SUCCESS

The log given by the failure.

Normally this include a stack trace and some more information.
$ ng test -browsers PhantomJS
27 02 2017 09:16:38.148:WARN [karma]: No captured browser, open http://localhost:9876/
27 02 2017 09:16:38.158:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
27 02 2017 09:16:38.158:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
27 02 2017 09:16:38.614:INFO [launcher]: Starting browser PhantomJS
27 02 2017 09:16:42.636:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket FxslPlobVmqXyCu-AAAA with id 90654741
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
SyntaxError: Use of reserved word 'class'
at webpack:///src/app/shared/models/search-params.model.ts:4:0 <- src/test.ts:6252
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
SyntaxError: Use of reserved word 'class'
at webpack:///src/app/shared/models/search-params.model.ts:4:0 <- src/test.ts:6252

Mention any other details that might be useful.

This only happens if you are running using PhantomJS

---

Thanks! We'll be in touch soon.

[daBishMan]

The issue is the new tsconfig.spec.json, what gets generated for a brand new project is:

{
"compilerOptions": {
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es2016"
],
"outDir": "../out-tsc/spec",
"module": "commonjs",
"target": "es6",
"baseUrl": "",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts"
]
}
`

to get it to run with PhantomJS and Chrome I made the following changes:

{
"compilerOptions": {
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es2016",
"dom"
],
"outDir": "../out-tsc/spec",
"module": "commonjs",
"target": "es5",
"baseUrl": "",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts"
]
}

I had to add, "dom" to the lib.
and I change the target to "es5" instead of "es6"

hope this helps someone.

Is these changes by design? or is PhantomJS is not intended to work with the CLI?

[royling]

Beside the above change @daBishMan made, I also modified polyfills.ts to include all es6 polyfills (i.e. core-js/es6/*, by default those are not included.) to get it work.

[DjolePetrovic]

Weird, I did what you guys did, but I still get this error:
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR SyntaxError: Unexpected token 'const' at webpack:///~/@angular/core/@angular/core/testing.es5.js:10:0 <- src/test.ts:7712

Any ideas? There is another Thread here which is kind of similar.

[royling]

@DjolePetrovic I assume you are using angular v4.x (ng new --ng4). If so, there is the issue with the build process as you already linked - angular/angular#14730.

[DjolePetrovic]

@royling Yes, that's correct. Well at least I've moved my old project to CLI rc0 and angular 4 rc1.

[OClement]

Having the same issue here, using @angualr/cli@1.0.0-rc.0 and @angular/*@4.0.0-rc.1

Also have:

...
"karma-phantomjs-launcher": "^1.0.2",
"phantomjs-prebuilt": "^2.1.14",
...

Enabled all imports in polyfills.ts, tried adding this file to Karma's file array

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Use of reserved word 'class'
  at webpack:///~/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic/testing.es5.js:11:0 <- src/test.ts:24962

Not sure where to go from there?
Edit: Forgot to mention, I don't have a tsconfig.spec.json file anywhere after updating to Cli 1.0.0-rc.0

Creating it manually with the content posted above by @daBishMan didn't help

[gamesover]

If I have another monitor, I never mind using Chrome:) The sad story is I only have one monitor for my laptop, so I changed my test browser to phantomjs but meet the same issue as @DjolePetrovic . My system is Angular 2 + ts 2.0. Thank you, @daBishMan and @royling , after I applied both your methods now it could pass npm test without any issue.

[DjolePetrovic]

My problem got solved with angular 4 rc2. Update the version and try again.

[filipesilva]

Fixed by #5255

[justincrosbiehaventec]

Hi, I'm experiencing this issue, on latest angular-cli and angular 4, with latest PhantomJS. I have tried setting "target": "es5" etc in tsconfig.spec.json etc, nothing works.

Any advice, or is this a regression? Let me know if I should open a new issue.

UPDATE: Seems to be an issue with referencing dependent packages by their built JS. The fails are in custom npm packages I'm maintaining. If I specifically reference the .TS source rather than the built JS in the packages in my import statements, the problem goes away.

Thanks,
Justin

[badcodelab]

Hi,
getting this issue with @angular/cli 1.6.8 and @angular 5.2.3 and IE 11
tsconfig.spec.ts has es5 as a target

UPDATE:
I use ng cli for test only in my lib project so .angular-cli.json has the following structure:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": { "ejected": true },
  "apps": [{
      "root": "src",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "testTsconfig": "tsconfig.spec.json"
   }]
}

My src folder had only tsconfig.spec.json and that make ng cli generate es2015 bundles.
I've added tsconfig.app.json to src folder and bundles and issue has gone away.
Pretty strange behaviour.

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