Angular、Karma（SystemJS）XHRエラー（404 Not Found） - [Separate Src/Build]

Question

私はAngular（2）、typescript、karma、SystemJsを使ってビルドシステムを使っています。

アプリケーションビルドは、apps/samples/**のsrcファイルをビルドするのに完全に機能します。/ **これはビルドディレクトリの構造です。私は私の一気タスクが私のアプリを私に提示し、ファイルやブラウザの同期を構築、実行:)

apps/ 
    samples/ 
    app/ 
     app.component.ts 
     app.module.ts 
     main.ts 
    assets/ 
     scss/ 
     js/ //@angular and other node libs get kept here 
    test/ 
     app.component.spec.ts 
    index.html 
    systemjs.config.js 
    systemjs.config.extras.js  
build/ 
    app/ 
    app.component.js 
    app.component.js.map 
    app.module.js 
    app.module.js.map 
    main.js 
    main.js.map 
    assets/ 
    css/ 
    js/ //@angular and other node libs get kept here 
    test/ 
    app.component.spec.js 
    app.component.spec.js.map 
    index.html 
    systemjs.config.js 
    systemjs.config.extras.js 
Gulpfile.babel.js 
karma.conf.js 
karma-test-shim.js 
package.json 

私はtypescriptですと何の問題や、ビルドの他の部分を持っていない前にカルマを実行しているときに今述べたような問題が来る私は次のようにエラーを取得しておいてください。私は角クイックスタートプロジェクトの組み合わせと、ここでチュートリアルここhttps://www.agvision.ro/angular-2-karma-jasmine-unit-testing/

から取り組んできた

今

Chrome 55.0.2883 (Windows 10 0.0.0) ERROR: 'Unhandled Promise rejection:', '(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js 
    Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js 
    Error loading http://localhost:9876/base/systemjs.config.js', '; Zone:', '<root>', '; Task:', 'Promise.then', '; Value:', Error{stack: '(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js 
    Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js 
    Error loading http://localhost:9876/base/systemjs.config.js', message: '(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js 
    Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js 
    Error loading http://localhost:9876/base/systemjs.config.js', originalStack: 'Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js 
    Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js 
    Error loading http://localhost:9876/base/systemjs.config.js', zoneAwareStack: 'Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js 
    Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js 
    Error loading http://localhost:9876/base/systemjs.config.js', name: 'Error', toString: function toString() { ... }, originalErr: Error{stack: 'Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js', message: 'XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js', originalStack: 'Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js', zoneAwareStack: 'Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js', name: 'Error', toString: function toString() { ... }}}, '(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js 
    Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js 
    Error loading http://localhost:9876/base/systemjs.config.js' 

は私karma.config.js

です

module.exports = function(config) { 

var appBase = 'build/app/';  // transpiled app JS and map files 
var appSrcBase = 'apps/samples/app//';  // app source TS files 
var appAssets = '/build/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', 

     // 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: 'build/systemjs.config.js', included: false, watched: false }, 
     { pattern: 'build/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: true 
}) 
} 

、ここでは私のカルマ・テストshim.js

ある

// /*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; 

// builtPaths: root paths for output ("built") files 
// get from karma.config.js, then prefix with '/base/' (default is 'app/') 
var builtPaths = (__karma__.config.builtPaths || ['app/']) 
.map(function (p) { 
    return '/base/build/' + p; 
}); 

__karma__.loaded = function() { 
}; 

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

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

// Is a "built" file if is JavaScript file in one of the "built" folders 
function isBuiltFile(path) { 
    return isJsFile(path) && 
     builtPaths.reduce(function (keep, bp) { 
      return keep || (path.substr(0, bp.length) === bp); 
    }, false); 
} 

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(function (m) { 
    console.log(m); 
}) 
//.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); 
} 

さて、いくつかのエラーを取得し、ポスト後のポストは、いくつかのカルマは内のファイルを置くベース/ディレクトリに言及した後、ポストを読んだことがあるイムパッケージやモジュールなどについて言及してきましたが、なぜカルマがシステムjsをロードしないのかについての決定的な答えが得られました。

私はanger2でneewbを使っていますが、実際には何かが欠けていても役立つでしょう。

Answer 1

は変更してみてください：

{ pattern: 'build/systemjs.config.js', included: false, watched: false }, 
{ pattern: 'build/systemjs.config.extras.js', included: false, watched: false } 

に：

{ pattern: '/systemjs.config.js', included: false, watched: false }, 
{ pattern: '/systemjs.config.extras.js', included: false, watched: false }