Angular2 Karma Phantom-JS ZoneAwareError

Question

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

我在这里下载了 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": "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
    }
  }

如有任何帮助，我们将不胜感激!

Answer 1

在这个已知问题的情况下，您看起来像:

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

github的另一个用户提出了一个解决方案，也非常感谢他。我亲自对其进行了测试，它解决了问题，但请谨慎使用。

为了记录，这里要使用“被黑”的 systemjs-angular-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;
    };