カルマは角度指令を認識できません

Question

私たちのプロジェクト構造は以下の通りです：Angular2-webpack-starter。

プロジェクトが正常にコンパイル、ビルドされ、ブラウザに表示されます。ここに問題はありません。

しかし、karma and jasmineを使用してテストケースを実行しようとすると、このエラーが発生します。

FAILED TESTS: 
XXXXXXComponent 
    :heavy_multiplication_x: Should Match Current Tab as 1 
    Chrome 55.0.2883 (Mac OS X 10.10.5) 
    Error: Template parse errors: 
    Can't bind to 'formgroup' since it isn't a known property of 'form'. ("    <div class="tab-pane active" role="tabpanel" id="step1"> 
              <form novalidate [ERROR ->][formgroup]="step1Form" class="height-full" > 
               <div class="row" id="tabHeader1"> 
      "): XXXXXXComponent@38:27 
    Can't bind to 'dividerColor' since it isn't a known property of 'md-input'. 
    1. If 'md-input' is an Angular component and it has 'dividerColor' input, then verify that it is part of this module. 
    2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
    ("ass = "col-md-8 col-lg-8 col-sm-8"> 
                  <div class="form-group"> 
                   <md-input [ERROR ->]dividerColor="{{getDividerColor(lexiconTitle)}}" placeholder="Lexicon Title" formControlName="lexicon"): XXXXXXComponent@52:25 
    Can't bind to 'ngModel' since it isn't a known property of 'md-input'. 
    1. If 'md-input' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 
    2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
    ("olor="{{getDividerColor(lexiconTitle)}}" placeholder="Lexicon Title" formControlName="lexiconTitle" [ERROR ->][(ngModel)]="blogModel.lexiconTitle" name="lexiconTitle" class="md-form-control" required> 
              "): 

私たちは、新しい角度慣習に従って、これらのモジュールをすべてapp.module.tsにインポートしました。

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
    ... 
    ], 
    imports: [ // import Angular's modules 
    ... 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    ReactiveFormsModule, 
    ... ], 
    providers: [ // expose our Services and Providers into Angular's dependency injection 
    ENV_PROVIDERS, 
    APP_PROVIDERS 
    ], 
    schemas: [ 
    CUSTOM_ELEMENTS_SCHEMA 
    ] 
}) 
export class AppModule { 
    constructor() {} 
} 

すべての最新バージョンのパッケージがインストールされています。

"karma": "^1.2.0", 
"karma-chrome-launcher": "^2.0.0", 
"karma-coverage": "^1.1.1", 
"karma-jasmine": "^1.0.2", 
"karma-remap-coverage": "^0.1.4", 
"karma-sourcemap-loader": "^0.3.7", 
"karma-webpack": "2.0.1", 
"webpack": "2.2.0", 
"webpack-dev-middleware": "^1.9.0", 
"webpack-dev-server": "2.2.0", 
"webpack-dll-bundles-plugin": "^1.0.0-beta.5", 
"webpack-md5-hash": "~0.0.5", 
"webpack-merge": "~2.4.0" 

テストベッドのセットアップ：この問題を解決するためのすべてのヘルプは高く評価され

TestBed.configureTestingModule({ 
    imports: [ReactiveFormsModule, FormsModule], 
    declarations: [ XXXXComponent ], // declare the test component 
}); 

。

Answer 1

md-inputではなくmd-input-containerタグ内にdividerColorディレクティブが必要なため、エラーが発生します。