Angular2 CLIカルマユニットテストに失敗する

Question

Angular2 CLIでテストしているコンポーネントでカルマテストを実行する際に問題が発生しました。私はモジュール内で要素の設定を使用するコンポーネントを持っているので、テストを構造化するには賢明な方法であると考えられます（下記参照）。 TestBedの設定では、インポートする配列にテスト対象のコンポーネントが含まれているモジュールを追加しています。

/* tslint:disable:no-unused-variable */ 

import { TestBed, async, ComponentFixture, ComponentFixtureAutoDetect } from '@angular/core/testing'; 
import { MyBtnComponent } from './'; 
import { MyModule } from '../../my-module.module'; 

let fixture : ComponentFixture<MyBtnComponent>; 
let btn : MyBtnComponent; 

describe('Component: MyBtn',() => { 
    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      imports: [ 
       MyModule 
      ] 
     }).compileComponents(); 

     fixture = TestBed.createComponent(MyBtnComponent); 
     btn = fixture.debugElement.componentInstance; 
    })); 

    it('should create the button component', async(() => { 
     expect(btn).toBeTruthy(); 
    })); 

}); 

テストを実行するときに次のエラーが発生します。

Chrome 55.0.2883 (Mac OS X 10.12.0) Component: MyBtn should create the button component FAILED 
    Failed: Unexpected value 'undefined' exported by the module 'MyModule' 
    Error: Unexpected value 'undefined' exported by the module 'MyModule' 
     at SyntaxError.BaseError [as constructor] (http://localhost:9876/_karma_webpack_/0.bundle.js:29009:27) [ProxyZone] 
     at new SyntaxError (http://localhost:9876/_karma_webpack_/0.bundle.js:4129:16) [ProxyZone] 
     at http://localhost:9876/_karma_webpack_/0.bundle.js:11793:40 [ProxyZone] 
     at Array.forEach (native) [ProxyZone] 
     at CompileMetadataResolver.getNgModuleMetadata (http://localhost:9876/_karma_webpack_/0.bundle.js:11791:49) [ProxyZone] 
     at CompileMetadataResolver.getNgModuleSummary (http://localhost:9876/_karma_webpack_/0.bundle.js:11706:52) [ProxyZone] 
     at http://localhost:9876/_karma_webpack_/0.bundle.js:11777:72 [ProxyZone] 
     at Array.forEach (native) [ProxyZone] 
     at CompileMetadataResolver.getNgModuleMetadata (http://localhost:9876/_karma_webpack_/0.bundle.js:11764:49) [ProxyZone] 
     at JitCompiler._loadModules (http://localhost:9876/_karma_webpack_/0.bundle.js:25082:64) [ProxyZone] 
     at JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/0.bundle.js:25061:52) [ProxyZone] 
     at JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/0.bundle.js:25022:21) [ProxyZone] 
     at TestingCompilerImpl.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/0.bundle.js:28673:35) [ProxyZone] 
     at TestBed.compileComponents (webpack:///~/@angular/core/bundles/core-testing.umd.js:748:0 <- src/test.ts:3215:35) [ProxyZone] 
    Expected undefined to be truthy. 
     at webpack:///src/app/my-module/_components/btn/btn.spec.ts:41:20 <- src/test.ts:56909:21 [ProxyZone] 
     at AsyncTestZoneSpec.onInvoke (webpack:///~/zone.js/dist/async-test.js:49:0 <- src/test.ts:44340:39) [ProxyZone] 
     at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:76:0 <- src/test.ts:45032:39) [ProxyZone] 
     at Zone.runGuarded (webpack:///~/zone.js/dist/zone.js:126:0 <- src/test.ts:65298:47) [ProxyZone => ProxyZone] 
     at runInTestZone (webpack:///~/@angular/core/bundles/core-testing.umd.js:105:0 <- src/test.ts:2572:29) [ProxyZone] 
     at Object.<anonymous> (webpack:///~/@angular/core/bundles/core-testing.umd.js:48:0 <- src/test.ts:2515:17) [ProxyZone] 

以下は、私のプロジェクトの設定とインポートされるモジュールです。

package.json

{ 
    "name": "my-project", 
    "version": "0.0.0", 
    "license": "MIT", 
    "angular-cli": {}, 
    "scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "lint": "tslint \"src/**/*.ts\"", 
    "test": "ng test", 
    "pree2e": "webdriver-manager update", 
    "e2e": "protractor" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/common": "^2.3.1", 
    "@angular/compiler": "^2.3.1", 
    "@angular/core": "^2.3.1", 
    "@angular/forms": "^2.3.1", 
    "@angular/http": "^2.3.1", 
    "@angular/platform-browser": "^2.3.1", 
    "@angular/platform-browser-dynamic": "^2.3.1", 
    "@angular/router": "^3.3.1", 
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.15", 
    "core-js": "^2.4.1", 
    "rxjs": "^5.0.1", 
    "ts-helpers": "^1.1.1", 
    "zone.js": "^0.7.2" 
    }, 
    "devDependencies": { 
    "@angular/compiler-cli": "^2.3.1", 
    "@types/jasmine": "2.5.38", 
    "@types/node": "^6.0.42", 
    "angular-cli": "1.0.0-beta.24", 
    "bootstrap": "^4.0.0-alpha.5", 
    "codelyzer": "~2.0.0-beta.1", 
    "jasmine-core": "2.5.2", 
    "jasmine-spec-reporter": "2.5.0", 
    "karma": "1.2.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-remap-istanbul": "^0.2.1", 
    "protractor": "~4.0.13", 
    "ts-node": "1.2.1", 
    "tslint": "^4.0.2", 
    "typescript": "~2.0.3" 
    } 
} 

私-module.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 
import { MyBtnComponent } from './_components/my-btn/my-btn.component'; 

@NgModule({ 
    imports: [ 
     NgbModule.forRoot(), 
     BrowserModule, 
     CommonModule, 
     FormsModule 
    ], 
    declarations: [ 
     MyBtnComponent 
    ], 
    exports: [ 
     MyBtnComponent 
    ] 
}) 
export class MyModule { 
} 

Answer 1

私は私のアプリを再構築することによって、この問題を解決するために管理。私が持っていた主な問題は、カルマランナーがコンパイラの設定とまったく同じではないということです。