Sunday, February 5, 2017

Angular2 testing: Error when trying to use: @angular/platform-browser/testing/browser_util

1 comment

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/jasmine@2.5.38",   "dist": {     "shasum": "a4379124c4921d4e21de54ec74669c9e9b356717",     "tarball": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.38.tgz"   },   "maintainers": [     {       "name": "types",       "email": "ryan.cavanaugh@microsoft.com"     }   ],   "_npmUser": {     "name": "types",     "email": "ts-npm-types@microsoft.com"   },   "_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); 

1 Answers

Answers 1

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.

If You Enjoyed This, Take 5 Seconds To Share It

1 comment:

  1. I have to voice my passion for your kindness giving support to those people that should have guidance on this important matter.
    Surya Informatics

    ReplyDelete