关键词：
【中文标题】PhantomJS 不适用于 Angular2 项目中的 Karma【英文标题】：PhantomJS does not work with Karma in Angular2 project 【发布时间】：2017-03-08 00:33:30 【问题描述】：我使用 angular cli (1.0.0-rc1.0.0) 创建了一个开箱即用的项目。然后我安装了 PhantomJS 插件（npm install karma-phantonjs-launcher）。 复制步骤：
-
使用 angular2 cli 创建项目（ng new TestPhantomJS）
运行 npm install karma-phantonjs-launcher
在karma.conf文件中添加PhantomJS，即改成
browsers:
['Chrome']这个browsers:['Chrome', 'PhantomJS']
Team City 集成的原因是我需要一个无头浏览器。 只要将 Chrome 指定为浏览器，使用 ng test 即可运行测试， 问题是当您尝试使用 PhantomJS 时。您将收到如下图所示的错误。我的研究表明，这与 PhantomJS 和 javascript 版本兼容性有关。但是，我还没有找到解决这个问题的方法。
有没有其他人遇到过这个问题并可能找到了解决方案？
我的 karma.conf
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config)
config.set(
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-phantomjs-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:
clearContext: false // leave Jasmine Spec Runner output visible in browser
,
files: [
pattern: './src/test.ts', watched: false
],
preprocessors:
'./src/test.ts': ['@angular/cli']
,
mime:
'text/x-typescript': ['ts','tsx']
,
coverageIstanbulReporter:
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
,
angularCli:
environment: 'dev'
,
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [ 'PhantomJS'],
singleRun: false
);
;
我的测试.ts
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import getTestBed from '@angular/core/testing';
import
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
from '@angular/platform-browser-dynamic/testing';
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () ;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start()
;
【问题讨论】：
您能向我们展示您的karma.conf.js 和test.ts 文件吗？我们正在使用 PhantomJS，尽管我们在它当前工作之前遇到了问题。
@shusson ，我已经添加了我的 karma.conf 和 test.ts 。除了上述编辑之外，这些都是由 Angular cli“按原样”创建的。
尝试在test.ts 和main.ts 中导入polyfills.ts 即import './polyfills.ts'; 并将其从.angular-cli.json 中删除
afaik，你说得对，这是因为 phantomjs 不支持 ecmascript 2015。所以，我猜在 phantomjs 2.5 发布之前一直使用 chrome？
【参考方案1】：
由于 Chrome 现在（从 59 版开始）支持无头运行，因此没有理由再使用过时的 PhantomJS。除非您无法在目标机器上更新/安装 chrome。
如果您在 karma.conf 中包含了karma-chrome-launcher，您现在只需指定：
browsers: ['ChromeHeadless']
也可以通过ChromeCanary 或ChromeCanaryHeadless 使用Canary edition。
【讨论】：
【参考方案2】：事实上，您不必等待 phantomjs 2.5 发布。
npm install --save-dev karma-phantomjs-launcher
在 karma.conf.js
在插件部分添加require('karma-phantomjs-launcher')
将 PhantomJS 添加到浏览器
npm install --save intl
import 'intl';（在底部取消注释）
将 import "core-js/client/shim"; 添加到 Evergreen 要求部分
在 src/tsconfig.spec.json 中将目标设置为 es5。
参考：https://***.com/a/42539894/7683428
【讨论】：
尝试按照您的步骤进行操作。您究竟需要在哪里添加行 import "core-js/client/shim"; ?不完全确定您所说的常青部分是什么意思？？ 在BROWSER POLYFILLS 部分，紧跟在// import 'core-js/es6/set';之后
感谢您，效果很好！ core-js/client/shim 是我所缺少的【参考方案3】：
我目前的解决方法是将 es5 仅用于测试。
tsconfig.spec.json
"compilerOptions":
...
"target": "es5",
...
.angular-cli.json
"project":
"name": "client"
,
"apps": [
...
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
...
【讨论】：
垂直滚动不适用于 HammerJS 和 Angular2
】垂直滚动不适用于HammerJS和Angular2【英文标题】：VerticalscrollisnotworkingwithHammerJSandAngular2【发布时间】：2017-04-2209:08:58【问题描述】：我在使用带有Angular2的HammerJS时遇到问题。我有一个轮播（基于带有Angular2事件处理程序的引导... 查看详情
模型绑定不适用于angular2中的选择[重复]
】模型绑定不适用于angular2中的选择[重复]【英文标题】：modelbindisnotworkingwithselectinangular2[duplicate]【发布时间】：2016-08-1410:18:06【问题描述】：我正在尝试设置下拉菜单的默认值，我为模型设置了默认值但它没有更新选择请看http... 查看详情
Rxjs 过滤器运算符不适用于 Angular2 Observable
】Rxjs过滤器运算符不适用于Angular2Observable【英文标题】：RxjsfilteroperatornotworkingwithAngular2Observable【发布时间】：2016-12-0200:24:25【问题描述】：在这个plunker我正在尝试在类member.service.ts中的angular2observable(Rxjs)上使用过滤器运算符。... 查看详情
Auth0/Angular2-Jwt 不适用于 Angular 5
】Auth0/Angular2-Jwt不适用于Angular5【英文标题】：Auth0/Angular2-JwtnotworkingwithAngular5【发布时间】：2018-07-0418:00:47【问题描述】：Angular2-JWT具有我需要使用的特定功能，以便根据存储在localStorage中的记录的用户令牌显示/隐藏链接。token... 查看详情
“ng2-CKEditor”节点模块不适用于打字稿[Angular2]
】“ng2-CKEditor”节点模块不适用于打字稿[Angular2]【英文标题】："ng2-CKEditor"nodemoduleisnotworkingwithtypescript[Angular2]【发布时间】：2017-01-2812:11:06【问题描述】：我正在尝试在我的angular2应用程序中配置CKEditor。我使用node作为... 查看详情
angular 2 [innerHTML] 在 html 内渲染（不适用于 angular 2）[重复]
】angular2[innerHTML]在html内渲染（不适用于angular2）[重复]【英文标题】：angular2[innerHTML]renderinsidehtml(notworkingonangular2)[duplicate]【发布时间】：2017-08-2519:02:51【问题描述】：我正在使用Angular2，我尝试将我在变量action.render中的文本呈... 查看详情
代理配置不适用于 Angular CLI
...7-07-0909:25:08【问题描述】：8080–托管后端的端口4200-我的Angular2前端在我的Angular2项目中，我的文件proxy.config.json包含这样的内容"/api":"target":"http://localhost:8080","secu 查看详情
Makefile 依赖项不适用于虚假目标
】Makefile依赖项不适用于虚假目标【英文标题】：Makefiledependenciesdon\'tworkforphonytarget【发布时间】：2012-11-3021:52:16【问题描述】：这是我的Makefile的简化版本：.PHONY:allall:src/server.coffeemkdir-pbin./node_modules/.bin/coffee-c-obinsrc/server.coffee... 查看详情
当水平为真时，百分比不适用于 FlatList 渲染项
】当水平为真时，百分比不适用于FlatList渲染项【英文标题】：PercentagedoesnotworkwithFlatListrenderitemwhenhorizontalistrue【发布时间】：2018-07-0617:52:31【问题描述】：我想在horizontalFlatList的渲染项上使用屏幕宽度。但是，它没有按预期工... 查看详情
Angular 2 http.post 不适用于 web api
】Angular2http.post不适用于webapi【英文标题】：Angular2http.postnotworkingwithwebapi【发布时间】：2017-11-1018:42:45【问题描述】：我的WebApi核心控制器方法是这样的publicvoidPost(Samplesample)_sampleService.CreateSample(sample);示例POCO看起来像这样publicc... 查看详情
谷歌表格中的条件格式不适用于重复项
】谷歌表格中的条件格式不适用于重复项【英文标题】：Conditionalformattingingooglesheetnotworkingforduplicates【发布时间】：2020-06-1217:21:20【问题描述】：我正在尝试添加条件格式以突出显示具有重复值的行。我遵循其他问题/论坛的指... 查看详情
Android onItemClick 方法不适用于 0 以外的 id 项
】AndroidonItemClick方法不适用于0以外的id项【英文标题】：AndroidonItemClickmethodnotworkingforitemofidsotherthan0【发布时间】：2021-05-2304:09:34【问题描述】：我在android中的onItemClick方法有问题。我知道其他人也遇到过这样的问题，在SO上找... 查看详情
应用程序图标上的快捷方式项不适用于 iOS 13
】应用程序图标上的快捷方式项不适用于iOS13【英文标题】：ShortcutitemonappiconnotworkingwithiOS13【发布时间】：2019-09-2712:36:26【问题描述】：为了支持应用图标上的快捷方式，我们在SceneDelegate中实现了以下方法：funcwindowScene(_windowSce... 查看详情
onClick 事件不适用于 android 中的嵌套列表视图项控件
】onClick事件不适用于android中的嵌套列表视图项控件【英文标题】：onClickeventdoesn\'tworkonnestedlistviewitemcontrolinandroid【发布时间】：2017-01-0203:23:08【问题描述】：我有2个弹出窗口。在第一个弹出窗口中，我有ListView和可选项目。当... 查看详情
数据库中的待办事项列表项更新不适用于 Django
】数据库中的待办事项列表项更新不适用于Django【英文标题】：ToDoListitemupdateindatabasenotworkingwithDjango【发布时间】：2021-05-2221:13:00【问题描述】：我想完成我的待办事项应用程序。但是，我仍然无法正确编辑项目。我的想法是通... 查看详情
Jquery显示/隐藏根本不适用于移动设备
】Jquery显示/隐藏根本不适用于移动设备【英文标题】：Jqueryshow/hidenotatallworkingonmobiledevices【发布时间】：2016-01-0916:20:14【问题描述】：这是我网站的链接。Website正如您在网站上看到的那样，我已将jquery应用于LOCATIONS菜单中的隐... 查看详情
当我尝试迭代 ngFor 循环时，Angular 2+ attr.disabled 不适用于 div
】当我尝试迭代ngFor循环时，Angular2+attr.disabled不适用于div【英文标题】：Angular2+attr.disabledisnotworkingfordivwhenItrytoiteratengForloop【发布时间】：2017-12-2814:13:15【问题描述】：我正在开发一个预约应用程序，我正在使用*ngFor循环显示预... 查看详情
Gradle 发布到 Maven 添加了一个似乎不适用于 Maven POM 依赖项的后缀
】Gradle发布到Maven添加了一个似乎不适用于MavenPOM依赖项的后缀【英文标题】：GradlepublishingtoMavenaddsasuffixthatdoesnotseemtoworkfromMavenPOMdependencies【发布时间】：2021-10-3103:29:15【问题描述】：当我从Gradle项目发布到本地maven存储库时，... 查看详情