错误：无法绑定到＆＃39; ngModel＆＃39;因为它不是一个已知的属性

时间：2018-05-15 07:41:48

标签： javascript html css angular properties

如果用Jasmine进行测试应该如此困难，那么我在开始时会有一个问题吗？该应用程序在编译时非常有效，但是当我测试它时，这里出现了一百万个错误。我已经阅读了有关在angular中导入FormsModule的任何可能的资源。

我有这个组件：

＆＃13;
＆＃13; 
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
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
/* 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!');
            }));
        });
    });
＆＃13;
＆＃13;
＆＃13; 如果我测试另一个只有标签的HTML模板可见，测试工作完美。当我尝试测试下面的html文件时，它给出了输入错误。 这是html文件：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

这是我的submodule.ts：

＆＃13;
＆＃13; 
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 {}
＆＃13;
＆＃13;
＆＃13;

我的app.module.ts

＆＃13;
＆＃13; 
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 {}
＆＃13;
＆＃13;
＆＃13;

这是输出错误：

＆＃13;
＆＃13; 
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:
＆＃13;
＆＃13;
＆＃13;

我知道这是一个很大的阅读，但我已经尝试过任何其他解决方案，而且我还没有能够在一个月内测试任何有关角度的错误。 感谢您阅读本文。

1 个答案:

答案 0 :(得分：4)

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

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

  

我已阅读任何有关以角度

导入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的名字，所以请用自己的名字代替它。

相关问题
最新问题