Angular2 Karma Phantom-JS ZoneAwareError

我在TypeScript/JavaScript和Angular2上有点新手。我正在尝试为可以作为VSTS构建管道的一部分运行的Angular2应用程序设置单元测试框架。这个想法是用phantomjs而不是Chrome来运行单元测试。Angular2 Karma Phantom-JS ZoneAwareError

我在这里下载了Angular2快速入门项目：https://github.com/angular/quickstart和Karma测试跑步者使用Chrome浏览器进行了罚款。然后，我按照这里的说明来使用phantomjs运行快速入门测试：How to configure Angular2 Quickstart to run phantomjs?。

我添加了缺少的“system-polyfills.js”引用参考，但是我在执行Karma时仍然出现ZoneAware错误。

我在Windows 10

我karma.conf.js文件看起来像这样：

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's 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 
    }) 
}

我的package.json看起来是这样的：

{ 
    "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": {} 
}

当我执行npm test或.\node_modules\.bin\karma start我得到以下输出：

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": "[email protected]_modules/zone.js/dist/zone.js:923:28\[email protected]_modules/systemjs/dist/system.src.js:122:87\[email protected]_modules/systemjs/dist/system.src.js:687:25\nnode_modules/systemjs/dist/system.src.js:495:22\[email protected]_modules/zone.js/dist/zone.js:365:31\[email protected]_modules/zone.js/dist/zone.js:125:49\nnode_modules/zone.js/dist/zone.js:760:60\[email protected]_modules/zone.js/dist/zone.js:398:36\[email protected]_modules/zone.js/dist/zone.js:165:57\[email protected]_modules/zone.js/dist/zone.js:593:42\[email protected]_modules/core-js/client/shim.js:4005:30\nnode_modules/core-js/client/shim.js:4018:32\[email protected]_modules/core-js/client/shim.js:4373:12", 
    "originalStack": "[email protected]_modules/zone.js/dist/zone.js:923:28\[email protected]_modules/systemjs/dist/system.src.js:122:87\[email protected]_modules/systemjs/dist/system.src.js:687:25\nnode_modules/systemjs/dist/system.src.js:495:22\[email protected]_modules/zone.js/dist/zone.js:365:31\[email protected]_modules/zone.js/dist/zone.js:125:49\nnode_modules/zone.js/dist/zone.js:760:60\[email protected]_modules/zone.js/dist/zone.js:398:36\[email protected]_modules/zone.js/dist/zone.js:165:57\[email protected]_modules/zone.js/dist/zone.js:593:42\[email protected]_modules/core-js/client/shim.js:4005:30\nnode_modules/core-js/client/shim.js:4018:32\[email protected]_modules/core-js/client/shim.js:4373:12", 
    "zoneAwareStack": "[email protected]_modules/systemjs/dist/system.src.js:122:87 [<root>]\[email protected]_modules/systemjs/dist/system.src.js:687:25 [<root>]\nnode_modules/systemjs/dist/system.src.js:495:22 [<root>]\[email protected]_modules/zone.js/dist/zone.js:125:49 [<root> => <root>]\nnode_modules/zone.js/dist/zone.js:760:60 [<root>]\[email protected]_modules/zone.js/dist/zone.js:165:57 [<root> => <root>]\[email protected]_modules/zone.js/dist/zone.js:593:42 [<root>]\[email protected]_modules/core-js/client/shim.js:4005:30 [<root>]\nnode_modules/core-js/client/shim.js:4018:32 [<root>]\[email protected]_modules/core-js/client/shim.js:4373:12 [<root>]", 
    "originalErr": { 
     "stack": "[email protected][native code]\[email protected]_modules/systemjs/dist/system.src.js:1555:18\[email protected]_modules/systemjs/dist/system.src.js:4035:22\[email protected]_modules/systemjs/dist/system.src.js:3300:36\[email protected]_modules/systemjs/dist/system.src.js:3135:28\[email protected]_modules/systemjs/dist/system.src.js:3510:17\[email protected]_modules/systemjs/dist/system.src.js:766:32\[email protected]_modules/systemjs/dist/system.src.js:964:36\[email protected]_modules/systemjs/dist/system.src.js:623:11\[email protected]_modules/systemjs/dist/system.src.js:669:24\nnode_modules/systemjs/dist/system.src.js:485:30\[email protected]_modules/zone.js/dist/zone.js:365:31\[email protected]_modules/zone.js/dist/zone.js:125:49\nnode_modules/zone.js/dist/zone.js:760:60\[email protected]_modules/zone.js/dist/zone.js:398:36\[email protected]_modules/zone.js/dist/zone.js:165:57\[email protected]_modules/zone.js/dist/zone.js:593:42\[email protected]_modules/core-js/client/shim.js:4005:30\nnode_modules/core-js/client/shim.js:4018:32\[email protected]_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": "[email protected]_modules/zone.js/dist/zone.js:923:28\[email protected]_modules/systemjs/dist/system.src.js:122:87\[email protected]_modules/systemjs/dist/system.src.js:687:25\nnode_modules/systemjs/dist/system.src.js:495:22\[email protected]_modules/zone.js/dist/zone.js:365:31\[email protected]_modules/zone.js/dist/zone.js:125:49\nnode_modules/zone.js/dist/zone.js:760:60\[email protected]_modules/zone.js/dist/zone.js:398:36\[email protected]_modules/zone.js/dist/zone.js:165:57\[email protected]_modules/zone.js/dist/zone.js:593:42\[email protected]_modules/core-js/client/shim.js:4005:30\nnode_modules/core-js/client/shim.js:4018:32\[email protected]_modules/core-js/client/shim.js:4373:12", 
    "originalStack": "[email protected]_modules/zone.js/dist/zone.js:923:28\[email protected]_modules/systemjs/dist/system.src.js:122:87\[email protected]_modules/systemjs/dist/system.src.js:687:25\nnode_modules/systemjs/dist/system.src.js:495:22\[email protected]_modules/zone.js/dist/zone.js:365:31\[email protected]_modules/zone.js/dist/zone.js:125:49\nnode_modules/zone.js/dist/zone.js:760:60\[email protected]_modules/zone.js/dist/zone.js:398:36\[email protected]_modules/zone.js/dist/zone.js:165:57\[email protected]_modules/zone.js/dist/zone.js:593:42\[email protected]_modules/core-js/client/shim.js:4005:30\nnode_modules/core-js/client/shim.js:4018:32\[email protected]_modules/core-js/client/shim.js:4373:12", 
    "zoneAwareStack": "[email protected]_modules/systemjs/dist/system.src.js:122:87 [<root>]\[email protected]_modules/systemjs/dist/system.src.js:687:25 [<root>]\nnode_modules/systemjs/dist/system.src.js:495:22 [<root>]\[email protected]_modules/zone.js/dist/zone.js:125:49 [<root> => <root>]\nnode_modules/zone.js/dist/zone.js:760:60 [<root>]\[email protected]_modules/zone.js/dist/zone.js:165:57 [<root> => <root>]\[email protected]_modules/zone.js/dist/zone.js:593:42 [<root>]\[email protected]_modules/core-js/client/shim.js:4005:30 [<root>]\nnode_modules/core-js/client/shim.js:4018:32 [<root>]\[email protected]_modules/core-js/client/shim.js:4373:12 [<root>]", 
    "originalErr": { 
     "stack": "[email protected][native code]\[email protected]_modules/systemjs/dist/system.src.js:1555:18\[email protected]_modules/systemjs/dist/system.src.js:4035:22\[email protected]_modules/systemjs/dist/system.src.js:3300:36\[email protected]_modules/systemjs/dist/system.src.js:3135:28\[email protected]_modules/systemjs/dist/system.src.js:3510:17\[email protected]_modules/systemjs/dist/system.src.js:766:32\[email protected]_modules/systemjs/dist/system.src.js:964:36\[email protected]_modules/systemjs/dist/system.src.js:623:11\[email protected]_modules/systemjs/dist/system.src.js:669:24\nnode_modules/systemjs/dist/system.src.js:485:30\[email protected]_modules/zone.js/dist/zone.js:365:31\[email protected]_modules/zone.js/dist/zone.js:125:49\nnode_modules/zone.js/dist/zone.js:760:60\[email protected]_modules/zone.js/dist/zone.js:398:36\[email protected]_modules/zone.js/dist/zone.js:165:57\[email protected]_modules/zone.js/dist/zone.js:593:42\[email protected]_modules/core-js/client/shim.js:4005:30\nnode_modules/core-js/client/shim.js:4018:32\[email protected]_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 
    } 
    }

任何援助将不胜感激！

来源

2017-04-04 Larry Roth

有同样的问题。 – nottinhill

它看起来像你在这个已知问题的情况下：

https://github.com/angular/quickstart/issues/414

了一种解决方案github上的其他用户提出的，非常感谢他了。我已经personnaly测试过它，它解决了这个问题，但小心使用它。

为了记录在案，这里的 “黑客” systemjs-角loader.js使用方法：

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; 
    };

来源

2017-04-10 08:37:12 Sid

Angular2 Karma Phantom-JS ZoneAwareError

回答

相关问题