gpt4 book ai didi

javascript - 错误 : Can't bind to 'ngModel' since it isn't a known property of

转载 作者:行者123 更新时间:2023-11-30 09:23:20 27 4
gpt4 key购买 nike

如果使用 Jasmine 进行测试应该如此困难,我一开始就有一个问题?该应用程序在编译时完美运行,但当我对其进行测试时,出现了一百万个错误,如下所示。我已经阅读了有关以 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!');
}));
});
});
如果我测试另一个只有 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:

我知道阅读这篇文章很重要,但我已经尝试过任何其他解决方案,但我无法在一个月内测试任何导致 Angular 错误。感谢您阅读本文。

最佳答案

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

这些都是同一种错误;看到你的测试,我知道你为什么会出现这些错误。你说

I have read any possible resource about importing FormsModule in angular

但你似乎并没有采取行动;这是您的测试平台配置:

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

testbed bed 应该反射(reflect)你的模块配置:当你想使用一个库时,你首先必须导入相应的模块,对吧?

那么对于测试来说,它是一样的。不同之处在于,测试是隔离的,这意味着您必须导入组件而不是模块的所有依赖项。

如果您想正确配置测试平台,您将需要满足这些要求。

你的测试台应该看起来像这样以防止这些错误:

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

(我不知道 DatePickerModuleTranslatePipe 的名称,所以请用您自己的名称代替)。

关于javascript - 错误 : Can't bind to 'ngModel' since it isn't a known property of,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50344838/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com