Angular2 Karma Phantom -JS ZoneAwareError
I am a bit new to TypeScript / JavaScript and Angular2. I am trying to create a unified testing framework for an Angular2 app that can be run as part of a VSTS build pipeline. The idea is to run unit tests in phantomjs instead of Chrome.
I downloaded the Angular2 quickstart project here: https://github.com/angular/quickstart and Karma's test runner was penalized with Chrome browser. Then I followed the instruction to get quickstart tests with phantomjs: How to set up Angular2 Quickstart to run phantomjs? ...
I added the missing reference link "system-polyfills.js" however I still get ZoneAware error when executing Karma.
I am on Windows 10.
My karma.conf.js file looks like this:
module.exports = function(config) {
var appBase = 'src/'; // transpiled app JS and map files
var appSrcBase = appBase; // app source TS files
// Testing helpers (optional) are conventionally in a folder called `testing`
var testingBase = 'testing/'; // transpiled test JS and map files
var testingSrcBase = 'testing/'; // test source TS files
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-phantomjs-launcher'),
require('karma-jasmine-html-reporter')
],
client: {
builtPaths: [appBase, testingBase], // add more spec base paths as needed
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
customLaunchers: {
// From the CLI. Not used here but interesting
// chrome setup for travis CI using chromium
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
files: [
// System.js for module loading
'node_modules/systemjs/dist/system.src.js',
// Polyfills
'node_modules/core-js/client/shim.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/zone.js/dist/proxy.js',
'node_modules/zone.js/dist/sync-test.js',
'node_modules/zone.js/dist/jasmine-patch.js',
'node_modules/zone.js/dist/async-test.js',
'node_modules/zone.js/dist/fake-async-test.js',
// RxJs
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// Paths loaded via module imports:
// Angular itself
{ pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },
{ pattern: appBase + '/systemjs.config.js', included: false, watched: false },
{ pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false },
'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
// transpiled application & spec code paths loaded via module imports
{ pattern: appBase + '**/*.js', included: false, watched: true },
{ pattern: testingBase + '**/*.js', included: false, watched: true },
// Asset (HTML & CSS) paths loaded via Angular component compiler
// (these paths need to be rewritten, see proxies section)
{ pattern: appBase + '**/*.html', included: false, watched: true },
{ pattern: appBase + '**/*.css', included: false, watched: true },
{pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: false, watched: false},
// Paths for debugging with source maps in dev tools
{ pattern: appBase + '**/*.ts', included: false, watched: false },
{ pattern: appBase + '**/*.js.map', included: false, watched: false },
{ pattern: testingSrcBase + '**/*.ts', included: false, watched: false },
{ pattern: testingBase + '**/*.js.map', included: false, watched: false}
],
// Proxied base paths for loading assets
proxies: {
// required for modules fetched by SystemJS
'/base/src/node_modules/': '/base/node_modules/'
},
exclude: [],
preprocessors: {},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['PhantomJS'],
// you can define custom flags
customLaunchers: {
'PhantomJS_custom': {
base: 'PhantomJS',
options: {
windowName: 'my-window',
settings: {
webSecurityEnabled: false
},
},
flags: ['--load-images=true'],
debug: false
}
},
phantomjsLauncher: {
// Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
exitOnResourceError: true
},
singleRun: true
})
}
My package.json looks like this:
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"angular-in-memory-web-api": "~0.3.0",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@types/jasmine": "2.5.36",
"@types/node": "^6.0.46",
"canonical-path": "0.0.2",
"concurrently": "^3.2.0",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-phantomjs-launcher": "^1.0.4",
"lite-server": "^2.2.2",
"lodash": "^4.16.4",
"phantomjs-prebuilt": "^2.1.14",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"tslint": "^3.15.1",
"typescript": "~2.1.0"
},
"repository": {}
}
When I execute npm test
or .\node_modules\.bin\karma start
, I get the following output:
04 04 2017 13:17:59.648:INFO [karma]: Karma v1.5.0 server started at http://0.0.0.0:9876/
04 04 2017 13:17:59.649:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
04 04 2017 13:17:59.680:INFO [launcher]: Starting browser PhantomJS
04 04 2017 13:18:05.398:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket RP6_gUObf8qGXHOgAAAA with id 50128128
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
{
"line": 923,
"sourceURL": "node_modules/zone.js/dist/zone.js",
"stack": "ZoneAwareError@node_modules/zone.js/dist/zone.js:923:28\naddToError@node_modules/systemjs/dist/system.src.js:122:87\nlinkSetFailed@node_modules/systemjs/dist/system.src.js:687:25\nnode_modules/systemjs/dist/system.src.js:495:22\ninvoke@node_modules/zone.js/dist/zone.js:365:31\nrun@node_modules/zone.js/dist/zone.js:125:49\nnode_modules/zone.js/dist/zone.js:760:60\ninvokeTask@node_modules/zone.js/dist/zone.js:398:36\nrunTask@node_modules/zone.js/dist/zone.js:165:57\ndrainMicroTaskQueue@node_modules/zone.js/dist/zone.js:593:42\nrun@node_modules/core-js/client/shim.js:4005:30\nnode_modules/core-js/client/shim.js:4018:32\nflush@node_modules/core-js/client/shim.js:4373:12",
"originalStack": "ZoneAwareError@node_modules/zone.js/dist/zone.js:923:28\naddToError@node_modules/systemjs/dist/system.src.js:122:87\nlinkSetFailed@node_modules/systemjs/dist/system.src.js:687:25\nnode_modules/systemjs/dist/system.src.js:495:22\ninvoke@node_modules/zone.js/dist/zone.js:365:31\nrun@node_modules/zone.js/dist/zone.js:125:49\nnode_modules/zone.js/dist/zone.js:760:60\ninvokeTask@node_modules/zone.js/dist/zone.js:398:36\nrunTask@node_modules/zone.js/dist/zone.js:165:57\ndrainMicroTaskQueue@node_modules/zone.js/dist/zone.js:593:42\nrun@node_modules/core-js/client/shim.js:4005:30\nnode_modules/core-js/client/shim.js:4018:32\nflush@node_modules/core-js/client/shim.js:4373:12",
"zoneAwareStack": "addToError@node_modules/systemjs/dist/system.src.js:122:87 [<root>]\nlinkSetFailed@node_modules/systemjs/dist/system.src.js:687:25 [<root>]\nnode_modules/systemjs/dist/system.src.js:495:22 [<root>]\nrun@node_modules/zone.js/dist/zone.js:125:49 [<root> => <root>]\nnode_modules/zone.js/dist/zone.js:760:60 [<root>]\nrunTask@node_modules/zone.js/dist/zone.js:165:57 [<root> => <root>]\ndrainMicroTaskQueue@node_modules/zone.js/dist/zone.js:593:42 [<root>]\nrun@node_modules/core-js/client/shim.js:4005:30 [<root>]\nnode_modules/core-js/client/shim.js:4018:32 [<root>]\nflush@node_modules/core-js/client/shim.js:4373:12 [<root>]",
"originalErr": {
"stack": "eval@[native code]\n__exec@node_modules/systemjs/dist/system.src.js:1555:18\nexecute@node_modules/systemjs/dist/system.src.js:4035:22\nlinkDynamicModule@node_modules/systemjs/dist/system.src.js:3300:36\nlink@node_modules/systemjs/dist/system.src.js:3135:28\nexecute@node_modules/systemjs/dist/system.src.js:3510:17\ndoDynamicExecute@node_modules/systemjs/dist/system.src.js:766:32\nlink@node_modules/systemjs/dist/system.src.js:964:36\ndoLink@node_modules/systemjs/dist/system.src.js:623:11\nupdateLinkSetOnLoad@node_modules/systemjs/dist/system.src.js:669:24\nnode_modules/systemjs/dist/system.src.js:485:30\ninvoke@node_modules/zone.js/dist/zone.js:365:31\nrun@node_modules/zone.js/dist/zone.js:125:49\nnode_modules/zone.js/dist/zone.js:760:60\ninvokeTask@node_modules/zone.js/dist/zone.js:398:36\nrunTask@node_modules/zone.js/dist/zone.js:165:57\ndrainMicroTaskQueue@node_modules/zone.js/dist/zone.js:593:42\nrun@node_modules/core-js/client/shim.js:4005:30\nnode_modules/core-js/client/shim.js:4018:32\nflush@node_modules/core-js/client/shim.js:4373:12",
"line": 1555,
"sourceURL": "node_modules/systemjs/dist/system.src.js"
},
"__zone_symbol__currentTask": {
"type": "microTask",
"state": "notScheduled",
"source": "Promise.then",
"zone": "<root>",
"cancelFn": null,
"runCount": 0
}
}
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
{
"line": 923,
"sourceURL": "node_modules/zone.js/dist/zone.js",
"stack": "ZoneAwareError@node_modules/zone.js/dist/zone.js:923:28\naddToError@node_modules/systemjs/dist/system.src.js:122:87\nlinkSetFailed@node_modules/systemjs/dist/system.src.js:687:25\nnode_modules/systemjs/dist/system.src.js:495:22\ninvoke@node_modules/zone.js/dist/zone.js:365:31\nrun@node_modules/zone.js/dist/zone.js:125:49\nnode_modules/zone.js/dist/zone.js:760:60\ninvokeTask@node_modules/zone.js/dist/zone.js:398:36\nrunTask@node_modules/zone.js/dist/zone.js:165:57\ndrainMicroTaskQueue@node_modules/zone.js/dist/zone.js:593:42\nrun@node_modules/core-js/client/shim.js:4005:30\nnode_modules/core-js/client/shim.js:4018:32\nflush@node_modules/core-js/client/shim.js:4373:12",
"originalStack": "ZoneAwareError@node_modules/zone.js/dist/zone.js:923:28\naddToError@node_modules/systemjs/dist/system.src.js:122:87\nlinkSetFailed@node_modules/systemjs/dist/system.src.js:687:25\nnode_modules/systemjs/dist/system.src.js:495:22\ninvoke@node_modules/zone.js/dist/zone.js:365:31\nrun@node_modules/zone.js/dist/zone.js:125:49\nnode_modules/zone.js/dist/zone.js:760:60\ninvokeTask@node_modules/zone.js/dist/zone.js:398:36\nrunTask@node_modules/zone.js/dist/zone.js:165:57\ndrainMicroTaskQueue@node_modules/zone.js/dist/zone.js:593:42\nrun@node_modules/core-js/client/shim.js:4005:30\nnode_modules/core-js/client/shim.js:4018:32\nflush@node_modules/core-js/client/shim.js:4373:12",
"zoneAwareStack": "addToError@node_modules/systemjs/dist/system.src.js:122:87 [<root>]\nlinkSetFailed@node_modules/systemjs/dist/system.src.js:687:25 [<root>]\nnode_modules/systemjs/dist/system.src.js:495:22 [<root>]\nrun@node_modules/zone.js/dist/zone.js:125:49 [<root> => <root>]\nnode_modules/zone.js/dist/zone.js:760:60 [<root>]\nrunTask@node_modules/zone.js/dist/zone.js:165:57 [<root> => <root>]\ndrainMicroTaskQueue@node_modules/zone.js/dist/zone.js:593:42 [<root>]\nrun@node_modules/core-js/client/shim.js:4005:30 [<root>]\nnode_modules/core-js/client/shim.js:4018:32 [<root>]\nflush@node_modules/core-js/client/shim.js:4373:12 [<root>]",
"originalErr": {
"stack": "eval@[native code]\n__exec@node_modules/systemjs/dist/system.src.js:1555:18\nexecute@node_modules/systemjs/dist/system.src.js:4035:22\nlinkDynamicModule@node_modules/systemjs/dist/system.src.js:3300:36\nlink@node_modules/systemjs/dist/system.src.js:3135:28\nexecute@node_modules/systemjs/dist/system.src.js:3510:17\ndoDynamicExecute@node_modules/systemjs/dist/system.src.js:766:32\nlink@node_modules/systemjs/dist/system.src.js:964:36\ndoLink@node_modules/systemjs/dist/system.src.js:623:11\nupdateLinkSetOnLoad@node_modules/systemjs/dist/system.src.js:669:24\nnode_modules/systemjs/dist/system.src.js:485:30\ninvoke@node_modules/zone.js/dist/zone.js:365:31\nrun@node_modules/zone.js/dist/zone.js:125:49\nnode_modules/zone.js/dist/zone.js:760:60\ninvokeTask@node_modules/zone.js/dist/zone.js:398:36\nrunTask@node_modules/zone.js/dist/zone.js:165:57\ndrainMicroTaskQueue@node_modules/zone.js/dist/zone.js:593:42\nrun@node_modules/core-js/client/shim.js:4005:30\nnode_modules/core-js/client/shim.js:4018:32\nflush@node_modules/core-js/client/shim.js:4373:12",
"line": 1555,
"sourceURL": "node_modules/systemjs/dist/system.src.js"
},
"__zone_symbol__currentTask": {
"type": "microTask",
"state": "notScheduled",
"source": "Promise.then",
"zone": "<root>",
"cancelFn": null,
"runCount": 0
}
}
Any help would be appreciated!
+3
source to share
1 answer
It looks like yours in the case of this known issue:
https://github.com/angular/quickstart/issues/414
The solution is suggested by another github user, thanks a lot to him. I personally tested it, it solved the problem, but use it with caution.
For the record, here's the "hacked" systemjs-angular-loader.js to use:
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
module.exports.translate = function(load){
var basePathParts = load.address.replace(this.baseURL, "").split("/");
basePathParts.pop();
var basePath = basePathParts.join("/");
load.source = load.source
.replace(templateUrlRegex, function(match, quote, url){
var resolvedUrl = url;
if (url.startsWith(".")) {
resolvedUrl = basePath + url.substr(1);
}
return ("templateUrl: '" + resolvedUrl + "'");
})
.replace(stylesRegex, function(match, relativeUrls) {
var urls = [];
while ((match = stringRegex.exec(relativeUrls)) !== null) {
if (match[2].startsWith(".")) {
urls.push(("'" + basePath + match[2].substr(1) + "'"));
} else {
urls.push(("'" + match[2] + "'"));
}
}
return "styleUrls: [" + urls.join(", ") + "]";
});
return load;
};
+1
source to share