1. Zuhause
  2. Frage und Antwort
  3. Angular2 Karma Phantom-JS ZoneAwareError

Angular2 Karma Phantom-JS ZoneAwareError

2017-04-04 2 views
3

Ich bin ein bisschen ein Anfänger auf TypScript/JavaScript und Angular2. Ich versuche, ein Einheitentestframework für eine Angular2-App einzurichten, die als Teil einer VSTS-Build-Pipeline ausgeführt werden kann. Die Idee besteht darin, die Komponententests in Phantomjs anstelle von Chrome auszuführen.Angular2 Karma Phantom-JS ZoneAwareError

Ich habe das Angular2 Quickstart-Projekt hier heruntergeladen: https://github.com/angular/quickstart und der Karma Test Runner arbeitete mit dem Chrome-Browser bestraft. Ich folgte dann der Anweisung hier, um die Schnellstart-Tests mit Phantomjs zu erhalten: How to configure Angular2 Quickstart to run phantomjs?.

Ich habe die fehlende Referenzreferenz "system-polyfills.js" hinzugefügt, bekomme aber immer noch einen ZoneAware-Fehler, wenn ich Karma ausführe.

Ich bin auf Windows 10.

Meine karma.conf.js Datei sieht wie folgt aus:

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

Meine package.json wie folgt aussieht:

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

Als ich Ausführen npm test oder .\node_modules\.bin\karma start Ich bekomme folgende Ausgabe:

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]ode_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 
    } 
    }

Jede Hilfe wäre willkommen!

Quelle

2017-04-04 Larry Roth

+0

gleiches Problem zu haben. – nottinhill

Antwort

1

Es sieht aus wie Ihr in dem Fall dieses bekannten Problems:

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

Eine Lösung von einem anderen Benutzer von Github, dank ihm viel zu vorgeschlagen. Ich habe es persönlich getestet, es löst das Problem, aber verwenden Sie es vorsichtig.

Für das Protokoll, hier der "gehackt" systemjs-Winkel loader.js zu verwenden:

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

Quelle

2017-04-10 08:37:12 Sid

Verwandte Themen

 Verwandte Themen