Angular2快速入门教程突破了业力测试-“由于它不是'input'的已知属性，因此无法绑定到'ngModel'." [英] Angular2 Quickstart Tutorial Breaking Karma Tests - "Can't bind to 'ngModel' since it isn't a known property of 'input'."

问题描述

在尝试TDD时，我正在遵循官方的Angular"Hero"快速入门教程.

I am following the official Angular "Hero" Quickstart Tutorial whilst trying to TDD it.

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

我要执行替换步骤:

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

使用

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

我的Karma测试运行程序抛出以下错误:

my Karma test runner throws the following error:

错误:模板解析错误: 无法绑定到"ngModel"，因为它不是"input"的已知属性. ( 姓名: ] [(ngModel)] ="hero.name"占位符="name"> "):AppComponent @ 6:23 预期未定义.

Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. (" name: ][(ngModel)]="hero.name" placeholder="name"> "): AppComponent@6:23 Expected undefined to be defined.

但是，该应用程序可以按预期运行，并且在控制台中看不到任何错误. (而且我非常有信心我正确地遵循了本教程，看不到任何错别字等)

However, the application works as expected and I see no errors in the console. (And I'm fairly confident I followed the tutorial correctly, can't see any typos etc)

我的app.components.ts看起来像:

My app.components.ts looks like:

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'
    };
}

我的app.module看起来像:

My app.module looks like:

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就可以正常工作.经过广泛的Google搜索后，我似乎找不到与我的问题有关的任何信息:(

Karma works fine as soon as I remove ngModel from the template, and as I said before the actual app is behaving as expected. I can't seem to find any information relating to my problem after extensive googling :(

我的karma.config是标准的快速入门之一:

My karma.config is the standard quickstart one:

// #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
  })
}

有人可以帮助我吗?

推荐答案

使用TestBed配置测试时，就像从头开始为测试环境配置@NgModule一样.因此，当在declarations中添加AppComponent且AppComponent需要表单指令时，您需要将FormsModule导入到测试平台配置中，就像在AppModule

When configuring the test using the TestBed, it's like configuring an @NgModule from scratch for the testing environment. So when adding AppComponent to the declarations, and the AppComponent needs forms directives, you need to import the FormsModule into to the testbed configuration, just you do in the AppModule

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

这篇关于Angular2快速入门教程突破了业力测试-“由于它不是'input'的已知属性，因此无法绑定到'ngModel'."的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！