Karma 无法识别角度指令

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>
                                           "):

我们已经按照新的 Angular 约定在 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 设置：

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

感谢您提供解决此问题的任何帮助。

Answer 1

您的错误是因为您需要在 md-input-container 标记中使用 dividerColor 指令而不是 md-input。