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

Question

一开始我有一个疑问，如果认为用茉莉花测试这么难吗？ 该应用程序可以完美地进行编译，但是当我对其进行测试时，这里出现了一百万个错误。 我已经阅读了有关在angular中导入FormsModule的所有可能资源。

我有这个组成部分：

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

如果我测试另一个仅带有标签的HTML模板，则可见测试可以完美地进行。 当我尝试测试下面的html文件时，输入错误。 这是html文件：

 <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> 

这是我的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 {} 

还有我的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 {} 

这是输出错误：

 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: 

我知道阅读这篇文章很重要，但是我尝试了任何其他解决方案，而且一个月内我无法进行任何测试，以检查出现角度差的错误。 感谢您阅读本文。

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)

这些都是同样的错误; 并查看您的测试，我知道您为什么会有这些错误。 你说

我已经阅读了有关在angular中导入FormsModule的任何可能的资源

但是看来你没有采取行动; 这是您的测试平台配置：

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

请注意，您根本无法处理模块：

@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 {}

测试床应该反映您的模块配置 ：要使用库时，首先必须导入相应的模块，对吗？

对于测试，它是相同的。 区别在于，测试是隔离的，这意味着您必须导入组件而不是模块的所有依赖项。

如果要正确配置测试平台，则需要满足要求。

您的测试台应该看起来像这样，以防止发生这些错误：

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

（我不知道DatePickerModule或TranslatePipe的名称，因此请使用您自己的名称代替它）。