Karma cannot load Angular 2 Component

My Karma cannont load angular 2 component. Drop this error:

[1] 06 10 2016 13:52:46.663:WARN [web-server] :404 : /base/src/client/app/container/container.component
[1] Chrome 53.0.2785 (Windows 10 0.0.0) ERROR
[1]   {
[1]     "originalErr": {}
[1]   }
[1]
[1] Chrome 53.0.2785 (Windows 10 0.0.0) ERROR
[1]   {
[1]     "originalErr": {}
[1]   }

``

i do everything with angular 2 testing tutorial (i only modified path in karma) So problem must be in path. but i don’t have any idea how to fix it.

My Path:

src
|    |client
|    |   |container
|    |   |   |container.component.ts
|    |   |   |container.component.spec.ts
|karma.conf.js
|karma-test-shim.js
|systemjs.config.js

container.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user/user.service';
import { User } from '../user/user';
//import { FacebookLogin } from '../facebook/fb-login';
//import { Facebook } from '../facebook/facebook';

@Component({
    selector: 'app-container',
    //templateUrl: '../../views/content.html',
    template: `Hello World`,
    providers: [UserService]
})
export class ContainerComponent implements OnInit{
     user: User;
    // constructor(private userService: UserService) {
    //     this.loadUser();
    //     if(typeof FB == 'undefined') {console.log("NULL");}
    // }


    // loadUser() {
    //     this.userService.getMockUser().then(userData => 
    //     {
    //         this.user = userData
    //         console.log("User data: " + userData.email);
    //     });
    // }

    ngOnInit(){

    }


}

container.component.spec.ts

import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { ContainerComponent } from './container.component';

let comp: ContainerComponent;
let fixture: ComponentFixture<ContainerComponent>;
let de: DebugElement;
let el: HTMLElement;

describe('Container Component', () => {
    // beforeEach( async(() => {
    //     TestBed.configureTestingModule({
    //         declarations: [ContainerComponent],
    //     }).compileComponents();

    //     fixture = TestBed.createComponent(ContainerComponent);
    //     comp = fixture.componentInstance;

    // }));

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ContainerComponent], // declare the test component
        });



    });

});

karma.conf.js

    // #docregion
    module.exports = function(config) {

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

      var testBase    = 'testing/';       // transpiled test JS and map files
      var testSrcBase = 'testing/';       // test source TS files

      config.set({
        basePath: '',
        frameworks: ['jasmine'],
        plugins: [
          require('karma-jasmine'),
          require('karma-chrome-launcher'),
          require('karma-jasmine-html-reporter'), // click "Debug" in browser to see it
          require('karma-htmlfile-reporter') // crashing w/ strange socket error
        ],

        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',

          // transpiled application & spec code paths loaded via module imports
          {pattern: appBase + '**/*.js', included: false, watched: true},
          {pattern: testBase + '**/*.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: testSrcBase + '**/*.ts', included: false, watched: false},
          {pattern: testBase + '**/*.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: {},
        // disabled HtmlReporter; suddenly crashing w/ strange socket error
        reporters: ['progress', 'kjhtml'],//'html'],

        // HtmlReporter configuration
        htmlReporter: {
          // Open this file to see results in browser
          outputFile: '_test-output/tests.html',

          // Optional
          pageTitle: 'Unit Tests',
          subPageTitle: __dirname
        },

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

karma-test-shim.js

// #docregion
// /*global jasmine, __karma__, window*/
Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.

// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
// Error.stackTraceLimit = Infinity; //

jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

var builtPath = '/base/src/client/app/';

__karma__.loaded = function () { };

function isJsFile(path) {
  return path.slice(-3) == '.js';
}

function isSpecFile(path) {
  return /\.spec\.(.*\.)?js$/.test(path);
}

function isBuiltFile(path) {
  return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}

var allSpecFiles = Object.keys(window.__karma__.files)
  .filter(isSpecFile)
  .filter(isBuiltFile);

System.config({
  baseURL: '/base',
  // Extend usual application package list with test folder
  packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },

  // Assume npm: is set in `paths` in systemjs.config
  // Map the angular testing umd bundles
  map: {
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
  },
});

System.import('systemjs.config.js')
  .then(importSystemJsExtras)
  .then(initTestBed)
  .then(initTesting);

/** Optional SystemJS configuration extras. Keep going w/o it */
function importSystemJsExtras(){
  return System.import('systemjs.config.extras.js')
  .catch(function(reason) {
    console.log(
      'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.'
    );
    console.log(reason);
  });
}

function initTestBed(){
  return Promise.all([
    System.import('@angular/core/testing'),
    System.import('@angular/platform-browser-dynamic/testing')
  ])

  .then(function (providers) {
    var coreTesting    = providers[0];
    var browserTesting = providers[1];

    coreTesting.TestBed.initTestEnvironment(
      browserTesting.BrowserDynamicTestingModule,
      browserTesting.platformBrowserDynamicTesting());
  })
}

// Import all spec files and start karma
function initTesting () {
  return Promise.all(
    allSpecFiles.map(function (moduleName) {
      return System.import(moduleName);
    })
  )
  .then(__karma__.start, __karma__.error);
}

systemjs.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: './src/client/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',
    },
    // 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'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

[vascofernandes]

@andrii-litvinov, got it working.

MyProject/

• karma.conf.js
• karma-test-shim.js
• systemjs.config.js
• app/
  • /my-page (entry point, components, spec’s,…)
  • /shared
  • polyfills.ts

The key was in my system.config.js

Before (causes the error): ‘my-page’: ‘/app/my-page’, ‘shared’: ‘/app/shared’,

After (all good): ‘my-page’: ‘app/my-page’, ‘shared’: ‘app/shared’,

My current systemjs.config.js;

(function (global) {
    var config = {
        paths: {
            'npm:': 'node_modules/'
        },
        map: {
            'my-page': 'app/my-page',
            'shared': 'app/shared',

            // 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',
            '@angular/platform-webworker': 'npm:@angular/platform-webworker/bundles/platform-webworker.umd.js',
            '@angular/platform-webworker-dynamic': 'npm:@angular/platform-webworker-dynamic/bundles/platform-webworker-dynamic.umd.js',

            // angular testing umd bundles
            '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
            '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
            '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
            '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
            '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
            '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
            '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
            '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
            'rxjs': 'npm:rxjs',
            '@ngrx': 'npm:/@ngrx',
        },
        packages: {
            'my-page': { main: 'main.js', defaultExtension: 'js' },
            'shared': { defaultExtension: 'js' },
            rxjs: { defaultExtension: 'js' },
            '@ngrx/core': { main: 'bundles/core.umd.js', format: 'cjs' },
            '@ngrx/store': { main: 'bundles/store.umd.js', format: 'cjs' }
        }
    };
    System.config(config);
})(this);

relevant parts of karma.conf.js

module.exports = function (config) {
    var appBase = 'app/';
    config.set({
        basePath: '',
        files: [
          // System.js for module loading
          'node_modules/systemjs/dist/system.src.js',
          'node_modules/core-js/client/shim.js',
          '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',
          { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
          { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
          { 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 },
          'karma-test-shim.js',
          { pattern: appBase + '**/*.js', included: false, watched: true },
        ],
        proxies: {
            '/node_modules/': '/base/node_modules/',
        },
    })
}

relevant parts of karma-test-shim.js

var builtPaths = (__karma__.config.builtPaths || ['app/'])
    .map(function (p) { return '/base/' + p; });

System.config({
    baseURL: 'base'
});

System.import('systemjs.config.js')
    //.then(importSystemJsExtras)
    .then(initTestBed)
    .then(initTesting);

[andrii-litvinov]

@nikkwong, I am experiencing same issue. Browser makes request to /base/app/app.component instead of /base/app/app.component.js. Have you figured out how to solve it?