カルマはインポートされたファイルを読み込むことができません

Question

カルマで実際のテストを実行することはできません。私はエラーを取得する私は（基本的な妥当性検査など）の輸入を必要としないテストを実行することができますが、すぐに私は私のアプリから何かをインポートする必要があります：

system.src.js:1085 GET http://localhost:9876/base/dist/components/test.service 404 (Not Found)fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434 angular2-polyfills.js:469 Unhandled Promise rejection: karma.error is not a function ; Zone: ; Task: Promise.then ; Value: TypeError: karma.error is not a function(…)consoleError @ angular2-polyfills.js:469drainMicroTaskQueue @ angular2-polyfills.js:498ZoneTask.invoke @ angular2-polyfills.js:434 angular2-polyfills.js:471 Error: Uncaught (in promise): TypeError: karma.error is not a function(…)

私が言及する必要があります： 例のテスト：

を

import { provide } from 'angular2/core'; 
import {TestService} from './test.service'; 
import { 
// beforeEach, 
    beforeEachProviders, 
    describe, 
    expect, 
    it, 
    inject, 
// injectAsync 
} from 'angular2/testing'; 

describe('TestService',() => { 

    beforeEachProviders(() => [ 
    provide(TestService, {useClass: TestService}) 
    ]); 
    it('should say hello with name', inject([TestService], (testService: TestService) => { 
    expect(testService.name).toBe('Injected Service'); 
    })); 

    it('should say hello with name',() => { 
    expect(true).toBe(true); 
    }); 

}); 

マイプロジェクトの構造のようなベースのマルチモジュールです：

Karma.conf.js：

frameworks: ['jasmine'], 

files: [ 
    // paths loaded by Karma 
    { pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true }, 
    { pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true }, 
    { pattern: 'node_modules/rxjs/bundles/rx.js', included: true, watched: true }, 
    { pattern: 'node_modules/angular2/bundles/angular2.js', included: true, watched: true }, 
    { pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true }, 
    { pattern: 'karma-test-shim.js', included: true, watched: true }, 
    { pattern: 'dist/components/matchers.js', included: true, watched: true }, 

    // paths loaded via module imports 
    { pattern: 'dist/components/**/*.js', included: false, watched: true }, 

    // paths loaded via Angular's component compiler 
    // (these paths need to be rewritten, see proxies section) 
    { pattern: 'dist/*.html', included: false, watched: true }, 
    { pattern: 'dist/styles/*.css', included: false, watched: true }, 
    { pattern: 'dist/components/**/*.html', included: false, watched: true }, 
    { pattern: 'dist/components/**/*.css', included: false, watched: true }, 

    // paths to support debugging with source maps in dev tools 
    { pattern: 'src/components/**/*.ts', included: false, watched: false }, 
    { pattern: 'dist/components/**/*.js.map', included: false, watched: false } 
], 

// proxied base paths 
proxies: { 
    // required for component assests fetched by Angular's compiler 
    "/src/": "/base/src" 
}, 

カルマテスト-shim.js：

... 

System.config({ 
    packages: { 
     'base/src': { 
      defaultExtension: false, 
      format: 'register', 
      map: Object.keys(window.__karma__.files). 
       filter(onlyAppFiles). 
       reduce(function createPathRecords(pathsMapping, appPath) { 
        // creates local module name mapping to global path with karma's fingerprint in path, e.g.: 
        // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e' 
        var moduleName = appPath.replace(/^\/base\/src\//, './').replace(/\.js$/, ''); 
        pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath] 
        return pathsMapping; 
       }, {}) 

     } 
    } 
}); 


function filePath2moduleName(filePath) { 
    console.log('filePath2moduleName', filePath) 
    return filePath. 
     replace(/^\//, '').    // remove/prefix 
     replace(/\.\w+$/, '');   // remove suffix 
} 


function onlyAppFiles(filePath) { 
    console.log('filePath', filePath) 
    return /^\/base\/src\/.*\.js$/.test(filePath) 
} 


function onlySpecFiles(path) { 
    return /.spec\.js$/.test(path); 
} 

任意のアイデアは非常に歓迎！

Answer 1

TSファイルをdistフォルダにコンパイルすると、ギャップがあると思います。あなたはsrcからではなくdistからファイルを持つべきではありませんので、ごcreatePathRecords機能に次の行が奇妙に思える

System.config({ 
    packages: { 
    'base/dist': { 
     defaultExtension: false, 
     format: 'cjs', 
     map: Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {}) 
    } 
    } 
}); 

(...) 

function createPathRecords(pathsMapping, appPath) { 
    var pathParts = appPath.split('/'); 
    var moduleName = './' + pathParts.slice(Math.max(pathParts.length - 2, 1)).join('/'); 
    moduleName = moduleName.replace(/\.js$/, ''); 
    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]; 
    return pathsMapping; 
} 

：私はあなたのkarma-test-shim.jsファイル内で次のことをしようとするだろう。このコードでは

、私は次のようSystemJS構成が生成されている（mapブロック）：あなたのケースで

System.config({ 
    packages: { 
    'base/dist': { 
     defaultExtension: false, 
     format: 'register', 
     map: { 
     './comps/my-list': '/base/dist/comps/my-list.js?e9(...)', 
     './dist/my-app': '/base/dist/my-app.js?fe(...)', 
     './pipes/my-pipe': '/base/dist/pipes/my-pipe.js?78(...)', 
     './services/http-service': '/base/dist/services/http-service.js?c1(...)', 
     './services/my-service': '/base/dist/services/my-service.js?b1(...)' 
     } 
    } 
    } 
}); 

が/base/dist/components/test.serviceがSystemJSによって解決することができないので、私はどちらかあなたのmapブロックが正しくないことを推測しますまたはpackagesのエントリです。

mapブロックのエントリは、packagesのキーに関連していることに注意してください。あなたの場合、私はあなたが以下の構成を生成することを推測する：

System.config({ 
    packages: { 
    'base/src': { 
     defaultExtension: false, 
     format: 'register', 
     map: { 
     './components/test.service': '/base/dist/components/test.service.js', 
     (...) 
     } 
    } 
    } 
}); 

だからあなたの問題をデバッグするために、私は次の操作を行います：

• あなたcreatePathRecords関数内appPathログイン：

  を

  reduce(function createPathRecords(pathsMapping, appPath) { 
      console.log('appPath = '+appPath); 
      (...) 
  } 
  

• mapコンフィグレーション全体のログ：

  console.log(Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {})); 
  

これらのヒントをもとに、この設定を持っているあなたのコードを適応させる必要があります。

{ 
    './components/test.service': '/base/dist/components/test.service.js', 
    (...) 
}