这篇文章整理一下在Angular 8中使用PhantomJS测试碰到的问题与解决方法。

如何在Angular 8中使用PhantomJS

一般只需要4个步骤，具体如下所示：

• 步骤1: 安装操作系统对应版本的PhontomJS，并设定 PATH
• 步骤2: 在Angular的应用中安装karma-phantomjs-launcher
• 步骤3: 修改缺省的karma配置文件设定浏览器为PhantomJS，并将karma-phantomjs-launcher添加到plugins中
• 步骤4: 使用ng test执行测试

问题描述

现象就是ng test命令无法正常执行，会提示SyntaxError: Use of reserved word 'class'的错误信息，详细日志如下：

liumiaocn:demo liumiao$ ng test
30% building 16/16 modules 0 active01 11 2019 06:54:19.488:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
01 11 2019 06:54:19.491:INFO [launcher]: Launching browsers PhantomJS with concurrency unlimited
01 11 2019 06:54:19.496:INFO [launcher]: Starting browser PhantomJS
01 11 2019 06:54:22.600:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket kGGUXbL8vOM7-Gk9AAAA with id 62893849
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERRORSyntaxError: Use of reserved word 'class'at http://localhost:9876/_karma_webpack_/polyfills.js:3395:0PhantomJS 2.1.1 (Mac OS X 0.0.0) ERRORSyntaxError: Use of reserved word 'class'at http://localhost:9876/_karma_webpack_/polyfills.js:3395:0liumiaocn:demo liumiao$

环境说明

PhantomJS版本

liumiaocn:demo liumiao$ phantomjs --version
2.1.1
liumiaocn:demo liumiao$

Angular版本

liumiaocn:demo liumiao$ node -v
v10.15.3
liumiaocn:demo liumiao$ npm -v
6.4.1
liumiaocn:demo liumiao$ ng --version_                      _                 ____ _     ___/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|/ △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |/ ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___||___/Angular CLI: 8.3.15
Node: 10.15.3
OS: darwin x64
Angular: 8.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... routerPackage                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.15
@angular-devkit/build-angular     0.803.15
@angular-devkit/build-optimizer   0.803.15
@angular-devkit/build-webpack     0.803.15
@angular-devkit/core              8.3.15
@angular-devkit/schematics        8.3.15
@angular/cli                      8.3.15
@ngtools/webpack                  8.3.15
@schematics/angular               8.3.15
@schematics/update                0.803.15
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2liumiaocn:demo liumiao$

原因确认

查阅了一些资料，一直没能发现原因和对应方法，直到Angular官方的这个issue才发现了问题所在。

• https://github.com/angular/angular-cli/issues/14691

虽然这个issues最终也是跟其他类似的issue一样无对应关闭的，但是有人给出了解决的建议方法

在结合错误的提示信息，为什么会说class是保留字，是谁的保留字？是es6的保留字。看了一下tsconfig.spec.json的设定，并没有直接设定target

liumiaocn:demo liumiao$ cat tsconfig.spec.json 
{"extends": "./tsconfig.json","compilerOptions": {"outDir": "./out-tsc/spec","types": ["jasmine","node"]},"files": ["src/test.ts","src/polyfills.ts"],"include": ["src/**/*.spec.ts","src/**/*.d.ts"]
}
liumiaocn:demo liumiao$ 

而在tsconfig.json中，看到了es6的设定, 如下所示，target被设为了es2015（等同于es6）

liumiaocn:demo liumiao$ cat tsconfig.json
{"compileOnSave": false,"compilerOptions": {"baseUrl": "./","outDir": "./dist/out-tsc","sourceMap": true,"declaration": false,"downlevelIteration": true,"experimentalDecorators": true,"module": "esnext","moduleResolution": "node","importHelpers": true,"target": "es2015","typeRoots": ["node_modules/@types"],"lib": ["es2018","dom"]},"angularCompilerOptions": {"fullTemplateTypeCheck": true,"strictInjectionParameters": true}
}
liumiaocn:demo liumiao$ 

注：关于es6/es2015的来源在以前的文章中有所介绍，就不再赘述。

对应方法

做如下修改

liumiaocn:demo liumiao$ diff tsconfig.json tsconfig.json.org 
13c13
<     "target": "es5",
---
>     "target": "es2015",
liumiaocn:demo liumiao$ 

结果确认

liumiaocn:demo liumiao$ ng test
25% building 20/20 modules 0 active01 11 2019 07:06:14.203:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
01 11 2019 07:06:14.206:INFO [launcher]: Launching browsers PhantomJS with concurrency unlimited
01 11 2019 07:06:14.229:INFO [launcher]: Starting browser PhantomJS
01 11 2019 07:06:17.692:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket UjL9LOpxZ7BYhI78AAAA with id 87705440
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 3 of 3 SUCCESS (0.483 secs / 0.718 secs)
TOTAL: 3 SUCCESS
TOTAL: 3 SUCCESS
liumiaocn:demo liumiao$ 

注意事项

PhantomJS目前已经暂停更新，目前停止在2.1.1版本上

停更的详细的说明

对于一个超过27k点赞的项目停更，确实是一个可惜的事情，然而2019年即将过完，仍然没有中断暂停的迹象。

总结

问题得到解决的方式是将es2015改为es5，这就需要使用者做一个选择，使用es6的新特性还是使用PhantomJS，一般的情况下，使用了PhantomJS的存量系统往往选择后者，而新的系统可能会直接使用Chrome 59之后提供的Headless Mode来取代PhantomJS。