Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 testing: Error when trying to use: @angular/platform-browser/testing/browser_util (Karma configurations)

Tags:

I'm trying to use @angular/platform-browser/testing/browser_util when running an angular2 test. Angular2 core version is 2.3.0. I'm getting the following 404 error:

[1]   {
[1]     "__zone_symbol__error": {
[1]       "originalStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]       "zoneAwareStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js"
[1]     },
[1]     "stack": "(SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "name": "Error",
[1]     "message": "(SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "originalStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "zoneAwareStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "__zone_symbol__stack": "(SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "originalErr": {
[1]       "__zone_symbol__error": {
[1]         "originalStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]         "zoneAwareStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util"
[1]       },
[1]       "stack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "name": "Error",
[1]       "message": "XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "originalStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "zoneAwareStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "__zone_symbol__stack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "__zone_symbol__message": "XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "__zone_symbol__name": "Error",
[1]       "__zone_symbol__originalStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "__zone_symbol__zoneAwareStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util"
[1]     },
[1]     "__zone_symbol__name": "Error",
[1]     "__zone_symbol__message": "(SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "__zone_symbol__originalStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "__zone_symbol__zoneAwareStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js"
[1]   }
[1] 
[1] Chrome 55.0.2883 (Linux 0.0.0) ERROR
[1]   {
[1]     "__zone_symbol__error": {
[1]       "originalStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]       "zoneAwareStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js"
[1]     },
[1]     "stack": "(SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "name": "Error",
[1]     "message": "(SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "originalStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "zoneAwareStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "__zone_symbol__stack": "(SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "originalErr": {
[1]       "__zone_symbol__error": {
[1]         "originalStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]         "zoneAwareStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util"
[1]       },
[1]       "stack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "name": "Error",
[1]       "message": "XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "originalStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "zoneAwareStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "__zone_symbol__stack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "__zone_symbol__message": "XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "__zone_symbol__name": "Error",
[1]       "__zone_symbol__originalStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "__zone_symbol__zoneAwareStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util"
[1]     },
[1]     "__zone_symbol__name": "Error",
[1]     "__zone_symbol__message": "(SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "__zone_symbol__originalStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "__zone_symbol__zoneAwareStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js"
[1]   }
[1] 
[1] 27 01 2017 17:21:08.936:WARN [web-server]: 404: /base/node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util
[1] Chrome 55.0.2883 (Linux 0.0.0) ERROR
[1]   {
[1]     "__zone_symbol__error": {
[1]       "originalStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]       "zoneAwareStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js"
[1]     },
[1]     "stack": "(SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "name": "Error",
[1]     "message": "(SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "originalStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "zoneAwareStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "__zone_symbol__stack": "(SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "originalErr": {
[1]       "__zone_symbol__error": {
[1]         "originalStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]         "zoneAwareStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util"
[1]       },
[1]       "stack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "name": "Error",
[1]       "message": "XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "originalStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "zoneAwareStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "__zone_symbol__stack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "__zone_symbol__message": "XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "__zone_symbol__name": "Error",
[1]       "__zone_symbol__originalStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util",
[1]       "__zone_symbol__zoneAwareStack": "Error: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util"
[1]     },
[1]     "__zone_symbol__name": "Error",
[1]     "__zone_symbol__message": "(SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js",
[1]     "__zone_symbol__originalStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError: XHR error (404 Not Found) loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util\n\tError loading node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util as \"@angular/platform-browser/testing/browser_util\" from app/components/gamestart/gamestart.component.spec.js"

What am I missing here ?

UPDATE Here is Karma configurations:

module.exports = function(config) {

  var appBase    = 'app/';      // transpiled app JS and map files
  var appSrcBase = 'app/';      // app source TS files
  var appAssets  = 'base/app/'; // component assets fetched by Angular's compiler

  // 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-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',
      'node_modules/reflect-metadata/Reflect.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: 'systemjs.config.js', included: false, watched: false },
      { pattern: '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 },

      // Paths for debugging with source maps in dev tools
      { pattern: appSrcBase + '**/*.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 component assets fetched by Angular's compiler
      "/app/": appAssets
    },

    exclude: [],
    preprocessors: {},
    reporters: ['progress', 'kjhtml'],

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  })
}

Jasmine package.json:

{
  "name": "@types/jasmine",
  "version": "2.5.38",
  "description": "TypeScript definitions for Jasmine 2.5",
  "license": "MIT",
  "author": "Boris Yankov <https://github.com/borisyankov/>, Theodore Brown <https://github.com/theodorejb>, David Pärsson <https://github.com/davidparsson/>",
  "main": "",
  "repository": {
    "type": "git",
    "url": "https://www.github.com/DefinitelyTyped/DefinitelyTyped.git"
  },
  "scripts": {},
  "dependencies": {},
  "peerDependencies": {},
  "typings": "index.d.ts",
  "typesPublisherContentHash": "deae5b77cefabcb3a692eff958b0cfe55516a87b535b4247349dbe4fc5f835f6",
  "_id": "@types/[email protected]",
  "dist": {
    "shasum": "a4379124c4921d4e21de54ec74669c9e9b356717",
    "tarball": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.38.tgz"
  },
  "maintainers": [
    {
      "name": "types",
      "email": "[email protected]"
    }
  ],
  "_npmUser": {
    "name": "types",
    "email": "[email protected]"
  },
  "_npmOperationalInternal": {
    "host": "packages-18-east.internal.npmjs.com",
    "tmp": "tmp/jasmine-2.5.38.tgz_1479152172228_0.4748733174055815"
  },
  "directories": {},
  "_shasum": "a4379124c4921d4e21de54ec74669c9e9b356717",
  "_resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.38.tgz",
  "_from": "@types/jasmine@>=2.5.36 <3.0.0"
}

system.config.js:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);
like image 789
ohadinho Avatar asked Jan 27 '17 15:01

ohadinho


2 Answers

Your issue is how you have the testing bundle configured in your system.config.js

This:

@angular/platform-browser/bundles/platform-browser-testing.umd.js/browser_util

Means it's looking for the browser_util under the "platform-browser-testing.umd.js" which is a file, not a directory.

Your system.config.js should be configured for this bundle:

@angular/platform-browser/bundles/platform-browser-testing.

Update 1:

Here is your properly configured System.config.js. The difference is that when it doesn't need to be bundled, it uses the individual files. In particular these lines:

// Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = {main: 'index.js', defaultExtension: 'js'};
    }

    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName + '/bundles/'] = {main: pkgName + '.umd.js', defaultExtension: 'js'};
    };

    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

The whole file:

(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app',
        '@angular': 'node_modules/@angular',
        '@angular/common': 'node_modules/@angular/common',
        '@angular/compiler': 'node_modules/@angular/compiler',
        '@angular/platform-browser': 'node_modules/@angular/platform-browser',
        '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic',
        '@angular/http': 'node_modules/@angular/http',
        '@angular/router': 'node_modules/@angular/router',
        '@angular/forms': 'node_modules/@angular/forms',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs': 'node_modules/rxjs',
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': {main: 'main.js', defaultExtension: 'js'},
        'rxjs': {defaultExtension: 'js'},
        'angular2-in-memory-web-api': {main: 'index.js', defaultExtension: 'js'},
    };

    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade'
    ];

    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = {main: 'index.js', defaultExtension: 'js'};
    }

    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName + '/bundles/'] = {main: pkgName + '.umd.js', defaultExtension: 'js'};
    };

    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);

    var config = {
        map: map,
        packages: packages,
        meta: meta
    };

    System.config(config);
})
(this);

Update 2:

  1. "The difference is that when it doesn't need to be bundled, it uses the individual files" ... Can you further explain this ? What is a bundle?

A bundle is the JavaScript created from all combined JavaScript files in the package. If you look in the "node_modules\@angular\platform-browser\bundles" directory you sill see files ending with ".umd" as in "platform-browser.umd.js." Those files are generally used when you build your application for production. However (for a reason unknown to me), Karma cannot use the bundled files and needs the individual files as in "node_modules\@angular\platform-browser\testing\browser_util.js."

  1. How does System.packageWithIndex gets updated?

I have no idea. I see everyone using it, but when I output it on the console it's undefined. After looking for it, I can't find it even in the source of the SystemJS library. I'll have to post a question on here and see if everyone knows, or if it's something that just got copied/pasted and nobody bothered to ask why.

In the meantime I looked at the Karma config for the official Angular starter and saw that they configure SystemJS separately for Karma, and import the testing modules separately. I recommend you look at that and do the same thing. https://github.com/angular/quickstart/blob/master/karma-test-shim.js

  1. I see you are updating packages variable. Can you give an example to a path that has been set in this var?

The idea was that the variable "setPackageConfig" was set to either the "packIndex" or "packUmd" function and that is used as a callback to build the packages either from the bundle or the individual files.

I am leaving this here as reference but check out the karma config in https://github.com/angular/quickstart/blob/master/karma-test-shim.js and disregard the previous systemjs configuration.

like image 103
Ben Richards Avatar answered Sep 22 '22 10:09

Ben Richards


While the answer above will get your code working, it's worth noting that the reason you see the error for this file and no other is that the Angular team have not included browser_util as part of the public API, and thus it is not exported in the UMD bundles that you are loading via SystemJS.

Using the config provided in the other answer you can get around this by having SystemJS load the individual file itself if it does not resolve the import to a UMD bundle (although it will be loaded with ES6 import synax intact).

The fact that dispatchEvent is a private API even though it is referred to in many testing tutorials has been noted by the Angular team in this GitHub issue.

like image 24
Ben Elliott Avatar answered Sep 25 '22 10:09

Ben Elliott