Karma can't recognize angular directives

Question

Our project structure follows this: Angular2-webpack-starter .

Our project successfully compiles, build and can be seen in the browser. No problems here.

But when we try to run the test cases using karma and jasmine we are getting this error.

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

We have imported all these modules in the app.module.ts as required by new angular convention.

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() {}
} 

We have all the latest versions of packages installed.

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

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

Any help in resolving this issue is appreciated.

Answer 1

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