错误：无法绑定到“ ngModel”，因为它不是的已知属性

Question

I have a qustion at the beginning if testing with Jasmine is supposed to be so difficult? The app works perfectly in compiling but when I test it a million errors appear like this one here. I have read any possible resource about importing FormsModule in angular.

I have this component:

 import { Component, OnInit, OnDestroy, ViewChild, ElementRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { HttpResponse, HttpErrorResponse } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { JhiEventManager, JhiAlertService } from 'ng-jhipster'; import { Paciente } from './paciente.model'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @Component({ selector: 'jhi-paciente-dialog', template: require('./paciente-dialog.component.html'), styleUrls: [ 'paciente.css' ], }) export class PacienteDialogComponent implements OnInit { @ViewChild('hiddenLabel') hidden: ElementRef; //the element that I am gonna test 

 /* tslint:disable max-line-length */ import { ComponentFixture, TestBed, async, inject, fakeAsync, tick } from '@angular/core/testing'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { PacienteDialogComponent } from '../../../../../../main/webapp/app/entities/paciente/paciente-dialog.component'; import { HttpResponse } from '@angular/common/http'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { Observable } from 'rxjs/Observable'; import { JhiEventManager } from 'ng-jhipster'; import { OncosupTestModule } from '../../../test.module'; import { Paciente } from '../../../../../../main/webapp/app/entities/paciente/paciente.model'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; describe('Component Tests', () => { describe('Paciente Management Dialog Component', () => { let comp: PacienteDialogComponent; let fixture: ComponentFixture<PacienteDialogComponent>; //const service: PacienteService; //let //const mockEventManager: any; //let //const mockActiveModal: any; //let beforeEach(async(() => { TestBed.configureTestingModule({ imports: [OncosupTestModule], declarations: [PacienteDialogComponent], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(PacienteDialogComponent); comp = fixture.componentInstance; }); fit ('first test', async(() => { console.log('holaaa THIS IS SPARTA '); expect(comp.hidden.nativeElement.innerHTML).toContain('Visible!'); })); }); }); 

If I test another HTML template that has just a label on it Visible the tests works perfectly. When I try to test the html file that is below it gives me error of inputs. This is the html file:

 <form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm"> <div class="modal-header"> <h4 class="modal-title" id="myPacienteLabel" jhiTranslate="oncosupApp.paciente.home.createOrEditLabel">Create or edit a Paciente</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="clear()">&times;</button> </div> <div class="modal-body"> <jhi-alert-error></jhi-alert-error> <div class="half-block"> <div class="form-group half-item"> <label #hiddenLabel class="form-control-label" jhiTranslate="oncosupApp.paciente.nombre" for="field_nombre">Nombre</label> <input type="text" class="form-control" name="nombre" id="field_nombre" [(ngModel)]="paciente.nombre" required/> <div [hidden]="!(editForm.controls.nombre?.dirty && editForm.controls.nombre?.invalid)"> <small class="form-text text-danger" [hidden]="!editForm.controls.nombre?.errors?.required" jhiTranslate="entity.validation.required"> This field is required. </small> </div> </div> 

And here is my submodule.ts:

 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { RouterModule } from '@angular/router'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { OncosupSharedModule } from '../../shared'; import { CommonModule } from '@angular/common'; import { PacienteService, PacientePopupService, PacienteComponent, PacienteDetailComponent, PacienteDialogComponent, PacientePopupComponent, PacienteDeletePopupComponent, PacienteDeleteDialogComponent, pacienteRoute, pacientePopupRoute, PacienteResolvePagingParams, } from './'; const ENTITY_STATES = [ ...pacienteRoute, ...pacientePopupRoute, ]; @NgModule({ imports: [ OncosupSharedModule, FormsModule, BrowserModule, ReactiveFormsModule, RouterModule.forChild(ENTITY_STATES) ], declarations: [ PacienteComponent, PacienteDetailComponent, PacienteDialogComponent, PacienteDeleteDialogComponent, PacientePopupComponent, PacienteDeletePopupComponent, ], entryComponents: [ PacienteComponent, PacienteDialogComponent, PacientePopupComponent, PacienteDeleteDialogComponent, PacienteDeletePopupComponent, ], providers: [ PacienteService, PacientePopupService, PacienteResolvePagingParams, ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class OncosupPacienteModule {} 

And my app.module.ts

 import './vendor.ts'; import { NgModule, Injector, ElementRef } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { CommonModule } from '@angular/common'; import { Ng2Webstorage } from 'ngx-webstorage'; import { JhiEventManager } from 'ng-jhipster'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AuthExpiredInterceptor } from './blocks/interceptor/auth-expired.interceptor'; import { ErrorHandlerInterceptor } from './blocks/interceptor/errorhandler.interceptor'; import { NotificationInterceptor } from './blocks/interceptor/notification.interceptor'; import { OncosupSharedModule, UserRouteAccessService } from './shared'; import { OncosupAppRoutingModule} from './app-routing.module'; import { OncosupHomeModule } from './home/home.module'; import { OncosupAdminModule } from './admin/admin.module'; import { OncosupAccountModule } from './account/account.module'; import { OncosupEntityModule } from './entities/entity.module'; import { PaginationConfig } from './blocks/config/uib-pagination.config'; import { StateStorageService } from './shared/auth/state-storage.service'; // jhipster-needle-angular-add-module-import JHipster will add new module here import { JhiMainComponent, NavbarComponent, FooterComponent, ProfileService, PageRibbonComponent, ActiveMenuDirective, ErrorComponent } from './layouts'; @NgModule({ imports: [ BrowserModule, OncosupAppRoutingModule, Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-'}), OncosupSharedModule, OncosupHomeModule, OncosupAdminModule, OncosupAccountModule, OncosupEntityModule, FormsModule, ReactiveFormsModule, // jhipster-needle-angular-add-module JHipster will add new module here ], declarations: [ JhiMainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, ActiveMenuDirective, FooterComponent ], providers: [ ProfileService, PaginationConfig, UserRouteAccessService, { provide: HTTP_INTERCEPTORS, useClass: AuthExpiredInterceptor, multi: true, deps: [ StateStorageService, Injector ] }, { provide: HTTP_INTERCEPTORS, useClass: ErrorHandlerInterceptor, multi: true, deps: [ JhiEventManager ] }, { provide: HTTP_INTERCEPTORS, useClass: NotificationInterceptor, multi: true, deps: [ Injector ] } ], bootstrap: [ JhiMainComponent ] }) export class OncosupAppModule {} 

And here is the output error:

 webpack: Compiling... [at-loader] Checking started in a separate process... [at-loader] Ok, 1.7 sec. Hash: d6582b121edcc8bb2f2a Version: webpack 3.10.0 Time: 13069ms Asset Size Chunks Chunk Names spec/entry.ts 23.3 MB 0 [big] spec/entry.ts [111] ./node_modules/@angular/core/esm5/testing.js 49.6 kB {0} [278] ./node_modules/rxjs/Rx.js 9.79 kB {0} [563] ./src/test/javascript/spec/entry.ts 853 bytes {0} [564] ./node_modules/core-js/index.js 639 bytes {0} [752] ./node_modules/zone.js/dist/zone.js 129 kB {0} [753] ./node_modules/zone.js/dist/long-stack-trace-zone.js 6.16 kB {0} [754] ./node_modules/zone.js/dist/async-test.js 3.23 kB {0} [755] ./node_modules/zone.js/dist/fake-async-test.js 19.6 kB {0} [756] ./node_modules/zone.js/dist/sync-test.js 1.41 kB {0} [757] ./node_modules/zone.js/dist/proxy.js 5.6 kB {0} [758] ./node_modules/zone.js/dist/jasmine-patch.js 6.5 kB {0} [801] ./node_modules/rxjs/add/observable/onErrorResumeNext.js 263 bytes {0} [1023] ./node_modules/intl/locale-data/jsonp/en-US.js 24 kB {0} [1024] ./node_modules/@angular/platform-browser-dynamic/esm5/testing.js 17.9 kB {0} [1028] ./src/test/javascript/spec \\.spec 455 bytes {0} [built] + 1169 hidden modules WARNING in ./node_modules/@angular/core/esm5/core.js 6541:15-36 Critical dependency: the request of a dependency is an expression @ ./node_modules/@angular/core/esm5/core.js @ ./node_modules/@angular/platform-browser/esm5/platform-browser.js @ ./node_modules/@angular/platform-browser-dynamic/esm5/testing.js @ ./src/test/javascript/spec/entry.ts WARNING in ./node_modules/@angular/core/esm5/core.js 6561:15-102 Critical dependency: the request of a dependency is an expression @ ./node_modules/@angular/core/esm5/core.js @ ./node_modules/@angular/platform-browser/esm5/platform-browser.js @ ./node_modules/@angular/platform-browser-dynamic/esm5/testing.js @ ./src/test/javascript/spec/entry.ts webpack: Compiled with warnings. ...... There is no directive with "exportAs" set to "ngForm" ("<form name="editForm" role="form" novalidate (ngSubmit)="save()" [ERROR ->]#editForm="ngForm"> <div class="modal-header"> <h4 class="modal-title" id="myPacienteLa"): ng:///DynamicTestModule/PacienteDialogComponent.html@0:66 Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="text" class="form-control" name="nombre" id="field_nombre" [ERROR ->][(ngModel)]="paciente.nombre" required/> <div [hidden]="!(editForm.controls.nombre?.dir"): ng:///DynamicTestModule/PacienteDialogComponent.html@12:17 Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="text" class="form-control" name="apellidos" id="field_apellidos" [ERROR ->][(ngModel)]="paciente.apellidos" required/> <div [hidden]="!(editForm.controls.apellido"): ng:///DynamicTestModule/PacienteDialogComponent.html@24:17 There is no directive with "exportAs" set to "ngbDatepicker" ("t id="field_fechaNacimiento" type="text" class="form-control" name="fechaNacimiento" ngbDatepicker [ERROR ->]#fechaNacimientoDp="ngbDatepicker" [(ngModel)]="paciente.fechaNacimiento" required/"): ng:///DynamicTestModule/PacienteDialogComponent.html@38:122 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("text" class="form-control" name="fechaNacimiento" ngbDatepicker #fechaNacimientoDp="ngbDatepicker" [ERROR ->][(ngModel)]="paciente.fechaNacimiento" required/> <span class="in"): ng:///DynamicTestModule/PacienteDialogComponent.html@38:157 Can't bind to 'ngModel' since it isn't a known property of 'select'. ("paciente.sexo" for="field_sexo">Sexo</label> <select class="form-control" name="sexo" [ERROR ->][(ngModel)]="paciente.sexo" id="field_sexo" required> <option value="VARON">{{'onc"): ng:///DynamicTestModule/PacienteDialogComponent.html@53:54 The pipe 'translate' could not be found ("o" [(ngModel)]="paciente.sexo" id="field_sexo" required> <option value="VARON">{{[ERROR ->]'oncosupApp.Sexo.VARON' | translate}}</option> <option value="MUJER">{{'oncosupApp."): ng:///DynamicTestModule/PacienteDialogComponent.html@54:41 The pipe 'translate' could not be found ("="VARON">{{'oncosupApp.Sexo.VARON' | translate}}</option> <option value="MUJER">{{[ERROR ->]'oncosupApp.Sexo.MUJER' | translate}}</option> </select> <div [hidden]="!"): ng:///DynamicTestModule/PacienteDialogComponent.html@55:41 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("> <input type="text" class="form-control" name="nhc" id="field_nhc" [ERROR ->][(ngModel)]="paciente.nhc" maxlength="38" pattern="[0-9]+"/> <div [hidden]="!(editForm."): ng:///DynamicTestModule/PacienteDialogComponent.html@70:17 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("> <input type="text" class="form-control" name="nss" id="field_nss" [ERROR ->][(ngModel)]="paciente.nss" maxlength="20"/> <div [hidden]="!(editForm.controls.nss?.dir"): ng:///DynamicTestModule/PacienteDialogComponent.html@85:17 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("e="text" class="form-control" name="tarjetaSanitaria" id="field_tarjetaSanitaria" [ERROR ->][(ngModel)]="paciente.tarjetaSanitaria" maxlength="20"/> <div [hidden]="!(editForm.cont"): ng:///DynamicTestModule/PacienteDialogComponent.html@99:17 Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="text" class="form-control" name="cipa" id="field_cipa" [ERROR ->][(ngModel)]="paciente.cipa" maxlength="20"/> <div [hidden]="!(editForm.controls.cipa?.d"): ng:///DynamicTestModule/PacienteDialogComponent.html@110:17 Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="text" class="form-control" name="telefono" id="field_telefono" [ERROR ->][(ngModel)]="paciente.telefono" /> </div> <div class="form-group half-item"> "): ng:///DynamicTestModule/PacienteDialogComponent.html@125:17 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*" class="form-control" name="email" id="field_email" [ERROR ->][(ngModel)]="paciente.email" /> </div> </div> "): ng:///DynamicTestModule/PacienteDialogComponent.html@130:17 Can't bind to 'ngModel' since it isn't a known property of 'select'. ("d</label> <select class="form-control" id="field_nacionalidad" name="nacionalidad" [ERROR ->][(ngModel)]="paciente.nacionalidadId" > <option value="null"></option> "): ng:///DynamicTestModule/PacienteDialogComponent.html@137:89 Can't bind to 'ngModel' since it isn't a known property of 'select'. ("field_etnia">Etnia</label> <select class="form-control" id="field_etnia" name="etnia" [ERROR ->][(ngModel)]="paciente.etniaId" > <option value="null"></option> <"): ng:///DynamicTestModule/PacienteDialogComponent.html@144:72 Can't bind to 'ngModel' since it isn't a known property of 'select'. ("ld_comunidadActual" name="comunidadActual" (change)="onComunidadActual(paciente.comunidadActualId)" [ERROR ->][(ngModel)]="paciente.comunidadActualId" > <option value="null"></option> "): ng:///DynamicTestModule/PacienteDialogComponent.html@155:149 Can't bind to 'ngModel' since it isn't a known property of 'select'. ("label> <select class="form-control" id="field_provinciaActual" name="provinciaActual" [ERROR ->][(ngModel)]="paciente.provinciaActualId" > <option value="null"></option> "): ng:///DynamicTestModule/PacienteDialogComponent.html@162:92 Can't bind to 'ngModel' since it isn't a known property of 'select'. ("ico" name="comunidadDiagnostico" (change)="onComunidadDiagnostico(paciente.comunidadDiagnosticoId)" [ERROR ->][(ngModel)]="paciente.comunidadDiagnosticoId" > <option value="null"></option> "): ng:///DynamicTestModule/PacienteDialogComponent.html@171:172 Can't bind to 'ngModel' since it isn't a known property of 'select'. (" <select class="form-control" id="field_provinciaDiagnostico" name="provinciaDiagnostico" [ERROR ->][(ngModel)]="paciente.provinciaDiagnosticoId" > <option value="null"></option> "): ng:///DynamicTestModule/PacienteDialogComponent.html@178:105 Can't bind to 'ngModel' since it isn't a known property of 'select'. ("tal">Hospital</label> <select class="form-control" id="field_hospital" name="hospital" [ERROR ->][(ngModel)]="paciente.hospitalId" > <option value="null"></option> "): ng:///DynamicTestModule/PacienteDialogComponent.html@186:77 Error: Template parse errors: at syntaxError (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:485:21 <- spec/entry.ts:63150:34) at TemplateParser.parse (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:24661:0 <- spec/entry.ts:87326:19) at JitCompiler._parseTemplate (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34601:0 <- spec/entry.ts:97266:37) at JitCompiler._compileTemplate (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34576:0 <- spec/entry.ts:97241:23) at http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34477:47 <- spec/entry.ts:97142:62 at Set.forEach (<anonymous>) at JitCompiler._compileComponents (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34477:0 <- spec/entry.ts:97142:19) at http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34365:0 <- spec/entry.ts:97030:19 at Object.then (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:474:32 <- spec/entry.ts:63139:77) at JitCompiler._compileModuleAndAllComponents (http://localhost:9877webpack:///node_modules/@angular/compiler/esm5/compiler.js:34363:0 <- spec/entry.ts:97028:26) Error: Template parse errors: 

I know taht it is a big deal of reading this, but I have tried any other solution and I haven't been able to test nothing in one month for erors that gives angular. Thanks for reading this.

Answer 1

- There is no directive with "exportAs" set to "ngForm" ([ERROR ->]#editForm="ngForm">)
- Can't bind to 'ngModel' since it isn't a known property of XXX
- There is no directive with "exportAs" set to "ngbDatepicker" ([ERROR ->]#fechaNacimientoDp="ngbDatepicker")
- The pipe 'translate' could not be found ([ERROR ->]'oncosupApp.Sexo.VARON' | translate)

Those are all the same kind of error ; and seeing your tests, I know why you have those errors. You say

I have read any possible resource about importing FormsModule in angular

But it doesn't seem you acted on that ; here is your testbed configuration :

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [OncosupTestModule],
    declarations: [PacienteDialogComponent],
    schemas: [
      CUSTOM_ELEMENTS_SCHEMA
    ]
  }).compileComponents();
}));

Notice how you don't cope with your module at all :

@NgModule({
    imports: [
        OncosupSharedModule,
        FormsModule,
        BrowserModule,
        ReactiveFormsModule,
        RouterModule.forChild(ENTITY_STATES)
    ],
    declarations: [
        PacienteComponent,
        PacienteDetailComponent,
        PacienteDialogComponent,
        PacienteDeleteDialogComponent,
        PacientePopupComponent,
        PacienteDeletePopupComponent,
    ],
    entryComponents: [
        PacienteComponent,
        PacienteDialogComponent,
        PacientePopupComponent,
        PacienteDeleteDialogComponent,
        PacienteDeletePopupComponent,
    ],
    providers: [
        PacienteService,
        PacientePopupService,
        PacienteResolvePagingParams,
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class OncosupPacienteModule {}

The testbed bed is supposed to mirror your module configuration : when you want to use a library, you first have to import the corresponding module, right ?

Well for testing, it's the same. The difference is, the tests are isolated, meaning that you have to import all of the dependencies of a component instead of the module.

If you want to configure the testbed correctly, you will need to cope with the requirements.

Your testbed should look like this to prevent those errors :

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [OncosupTestModule, FormsModule, DatePickerModule],
    declarations: [PacienteDialogComponent, TranslatePipe],
    schemas: [
      CUSTOM_ELEMENTS_SCHEMA
    ]
  }).compileComponents();
}));

(I don't know the names of DatePickerModule or TranslatePipe , so put your own names in place of it).