ZoneAwarePromise canceled

Question

After upgrading the application to rc-7 and running my unit tests to make sure nothing broke, I received this error message in about half of my unit tests.

“Error: Zone.js detected that ZoneAwarePromise '(window | global) .Promise' has been overwritten. Most likely, the reason is that Promise polyfill was loaded after Zone.js (Polyfilling Promise api is not required when loading zone.js. If you must download it, do this before loading zone.js) in node_modules / zone.js / dist / zone.js (line 21) "

The closest I can think of is that I mock answers to http calls in my unit tests by manually returning observables.

This is an Angular2 application using Jasmine and Karma for unit testing.

UPDATE Thus, it looks like this is probably the problem with loading according to the error message, however I do not load the poly regiments anywhere I can determine if I accidentally capture them. I attached my karma.conf.js and systemjs.conf.js to help find the error.

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

UPDATE My solution implied that all of my zone.js files were loaded last in karma.conf.js. I assume that something else that I included also included polyfill, but it loaded after zone.js, so the error was raised. After moving zone.js to the end, everything worked fine.

Answer 1

. (Angular 2 RC.7 Jasmine Karma) - , karma.conf.js. /zone.js/dist/zone.js /systemjs/dist/system-polyfills.js. zone.js , systemjs polyfills .

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

Answer 2

es6-prom zone.js. .

Answer 3

, - , . ng, scripts .angular-cli.json :

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

I don’t even remember why the hell I put there shim.min.js. But in any case, after removal, my test cases now work flawlessly:

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