ZoneAwarePromise 已被覆盖

ZoneAwarePromise has been overridden

在将应用程序升级到 rc-7 和 运行 我的单元测试以确保没有任何问题后,我在大约一半的单元测试中收到了此错误消息。

“错误:Zone.js 检测到 ZoneAwarePromise '(window|global).Promise' 已被覆盖。 最可能的原因是在 Zone.js 之后加载了 Promise polyfill(加载 zone.js 时不需要 Polyfilling Promise api。如果必须加载一个,请在加载 zone.js) 在 node_modules/zone.js/dist/zone.js(第 21 行)"

我能想到的最接近的事情是我在单元测试中通过手动返回可观察对象来模拟来自 http 调用的响应。

这是一个使用 Jasmine 和 Karma 进行单元测试的 Angular2 应用程序。

更新 因此,根据错误消息,这似乎是一个加载顺序问题,但是我不会在我可以确定的任何地方加载 polyfill,除非我不小心抓住了它们。我已附上 karma.conf.js 和 systemjs.conf.js 以帮助查找错误。

Karma.conf.js

module.exports = function(config) {
  var gulpConfig = require('../gulp/config')();

  /**
   * List of npm packages that imported via `import` syntax
   */
  var dependencies = [
    '@angular',
    'lodash',
    'rxjs'
  ];

  var configuration = {
    basePath: '../../',

    browserNoActivityTimeout: 20000,
    frameworks: ['jasmine'],
    browsers: ['PhantomJS'],
    reporters: ['progress', 'coverage'],

    preprocessors: {},

    // Generate json used for remap-istanbul
    coverageReporter: {
      includeAllSources: true,
      dir: 'coverage/appCoverage/remap/',
      reporters: [
        { type: 'json', subdir: 'report-json' }
      ]
    },

    files: [
      'node_modules/reflect-metadata/Reflect.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',

      'node_modules/angular/angular.js',
      'node_modules/core-js/client/shim.min.js',
      'node_modules/systemjs/dist/system.src.js'
    ],

    // proxied base paths
    proxies: {
      // required for component assests fetched by Angular's compiler
      "/src/": "/base/src/",
      "/app/": "/base/src/app/",
      "/node_modules/": "/base/node_modules/"
    },

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    //browserNoActivityTimeout: 100000
  };

  configuration.preprocessors[gulpConfig.tmpApp + '**/!(*.spec)+(.js)'] = ['coverage'];
  configuration.preprocessors[gulpConfig.tmpApp + '**/*.js'] = ['sourcemap'];
  configuration.preprocessors[gulpConfig.tmpTest + '**/*.js'] = ['sourcemap'];

  var files = [
    gulpConfig.tmpTest + 'test-helpers/global/**/*.js',
    gulpConfig.src + 'systemjs.conf.js',
    'config/test/karma-test-shim.js',
    createFilePattern(gulpConfig.tmpApp + '**/*.js', { included: false }),
    createFilePattern(gulpConfig.tmpTest + 'test-helpers/*.js', { included: false }),
    createFilePattern(gulpConfig.app + '**/*.html', { included: false }),
    createFilePattern(gulpConfig.app + '**/*.css', { included: false }),
    createFilePattern(gulpConfig.app + '**/*.ts', { included: false, watched: false }),
    createFilePattern(gulpConfig.tmpApp + '**/*.js.map', { included: false, watched: false })
  ];

  configuration.files = configuration.files.concat(files);

  dependencies.forEach(function(key) {
    configuration.files.push({
        pattern: 'node_modules/' + key + '/**/*.js',
        included: false,
        watched: false
    });
  });

  if (process.env.APPVEYOR) {
    configuration.browsers = ['IE'];
    configuration.singleRun = true;
    configuration.browserNoActivityTimeout = 90000; // Note: default value (10000) is not enough
  }

  config.set(configuration);

  // Helpers
  function createFilePattern(path, config) {
    config.pattern = path;
    return config;
  }
}

更新 我的解决方案涉及确保我的所有 zone.js 文件在 karma.conf.js 中最后加载。我猜我包含的其他内容也包括 polyfill,但在 zone.js 之后加载,所以出现了错误。将 zone.js 移动到最后一切正常。

我遇到了同样的问题。 (Angular 2 RC.7 Jasmine Karma) 这是因为我在 karma.conf.js[=22 中加载测试文件的顺序=].我在 /systemjs/dist/system-polyfills 之前加载 /zone.js/dist/zone.js。 js。在 systemjs polyfill 解决了这个问题之后,更改文件的顺序以加载 zone.js。

这是我在 karma.conf.js 中的当前设置,它为我解决了错误。

files: [
  {pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false},
  {pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false},
  {pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false},
  {pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false},
  {pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false},
  {pattern: 'dist/vendor/zone.js/dist/proxy.js', included: true, watched: false},
  {pattern: 'dist/vendor/zone.js/dist/sync-test.js', included: true, watched: false},
  {pattern: 'dist/vendor/zone.js/dist/long-stack-trace-zone.js', included: true, watched: false},
  {pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false},
  {pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: false},
  {pattern: 'dist/vendor/zone.js/dist/jasmine-patch.js', included: true, watched: false},

  {pattern: 'config/karma-test-shim.js', included: true, watched: true},

  // Distribution folder.
  {pattern: 'dist/**/*', included: false, watched: true}
],

我还必须在 zone.js 之前包含 es6-promise。 HTH.

如果有人犯了和我一样的愚蠢错误,我想补充一下我的经验。使用 ng 我在 .angular-cli.jsonscripts 部分中有以下内容:

...
"scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/core-js/client/shim.min.js"
],
...

我什至不记得,为什么我把 shim.min.js 放在那里。但无论如何,在删除它之后,我的测试用例现在 运行 完美无缺:

...
"scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...