Angular2クイックスタートチュートリアルカルマテストの中断 - 「ngModelにバインドできません。なぜなら、これは 'input'の既知のプロパティではないからです。

Question

TDDにしようとしている間に公式の「ヒーロー」クイックスタートチュートリアルに従っています。

エラー：

<input value="{{hero.name}}" placeholder="name"> 

私のカルマのテストランナーは、次のエラーがスローされます

<input [(ngModel)]="hero.name" placeholder="name"> 

で：できるだけ早く私は交換するステップへ行くよう

https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

：テンプレート解析エラー： 'ngModel'は 'input'の既知のプロパティではないため、バインドできません。 （ " 名： ] [（ngModel）] = "hero.name" プレースホルダ= "名前"> "）：AppComponent 6 @：23 を定義するために定義されていない期待。

ただし、アプリケーションは正常に動作し、コンソールにエラーは表示されません。 （そして、私は私が正しくチュートリアルに従っかなり確信して、任意のタイプミスなどを見ることができない）

私app.components.tsは、次のようになります。

：私app.moduleがどのように見える

import { Component } from '@angular/core'; 

export class Hero { 
    id: number; 
    name: string; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
      <h1>{{title}}</h1> 
      <h2>{{hero.name}} details!</h2> 
      <div><label>id: </label>{{hero.id}}</div> 
      <div> 
       <label>name: </label> 
       <input [(ngModel)]="hero.name" placeholder="name"> 
      </div> 
    ` 
}) 

export class AppComponent { 
    title = 'Tour of Heroes'; 
    hero: Hero = { 
     id: 1, 
     name: 'Windstorm' 
    }; 
} 

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { FormsModule } from '@angular/forms'; 

@NgModule({ 
    imports:  [ BrowserModule, FormsModule], 
    declarations: [ AppComponent], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

カルマは、テンプレートからngModelを削除するとすぐに正常に機能し、実際のアプリケーションは予想通りに動作する前に、私は広範囲のグーグルの後に私の問題に関連する情報を見つけることができないよう:(

私karma.configは標準のクイックスタートいずれかです？誰も私を助けることができる

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

    var appBase = 'app/';  // transpiled app JS and map files 
    var appSrcBase = '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 
    }) 
} 

Answer 1

を設定する場合TestBedを使用したテストの場合は、@NgModuleをテスト環境用に最初から設定するようなものです。AppComponentをdeclarationsに、AppComponentにフォームディレクティブが必要な場合は、FormsModuleをテストベッド設定jusにインポートする必要がありますあなたはでAppModule

TestBed.configureTestingModule({ 
    declarations: [ AppComponent ], 
    imports: [ FormsModule ] 
})