Я столкнулся с проблемой при интеграции текстового редактора Jodit Rich в Jhipster. Код хорошо компилируется, но консоль браузера показывает ошибку. Тем не менее, та же конфигурация плагина работает нормально в приложении под углом 6/7.
Я установил плагин Jodit 3.2.27 и получил запись в моем компоненте обновления сущности. Страница компилируется нормально, но доступ к странице приложения с помощью текстового редактора Jodit приводит к ошибке консоли браузера. Я использую браузер Chrome.
Я создал сущность с именем Company и импортировал плагин jodit в compnay.module.ts для использования редактора на company-update.component. Пример кода приведен ниже.
compnay.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { JoditAngularModule } from 'jodit-angular';
import { JhipsterDemoAppSharedModule } from 'app/shared';
import {
CompanyComponent,
CompanyDetailComponent,
CompanyUpdateComponent,
CompanyDeletePopupComponent,
CompanyDeleteDialogComponent,
companyRoute,
companyPopupRoute
} from './';
const ENTITY_STATES = [...companyRoute, ...companyPopupRoute];
@NgModule({
imports: [JhipsterDemoAppSharedModule, JoditAngularModule, RouterModule.forChild(ENTITY_STATES)],
declarations: [
CompanyComponent,
CompanyDetailComponent,
CompanyUpdateComponent,
CompanyDeleteDialogComponent,
CompanyDeletePopupComponent
],
entryComponents: [CompanyComponent, CompanyUpdateComponent, CompanyDeleteDialogComponent, CompanyDeletePopupComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class JhipsterDemoAppCompanyModule {}
компания-update.component.html
<div class="row justify-content-center">
<div class="col-8">
<form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
<h2 id="jhi-company-heading" jhiTranslate="jhipsterDemoApp.company.home.createOrEditLabel">Create or edit a Company</h2>
<div>
<jhi-alert-error></jhi-alert-error>
<div class="form-group" [hidden]="!company.id">
<label for="id" jhiTranslate="global.field.id">ID</label>
<input type="text" class="form-control" id="id" name="id"
[(ngModel)]="company.id" readonly />
</div>
<div class="form-group">
<label class="form-control-label" jhiTranslate="jhipsterDemoApp.company.name" for="field_name">Name</label>
<jodit-editor class="editable" [config]="{
showCharsCounter: false,
showWordsCounter: false,
showXPathInStatusbar: false,
height: 500,
buttonsXS: 'bold,strikethrough,underline,italic,ul,ol',
buttons: 'source,bold,underline,italic,ul'
}">
</jodit-editor>
</div>
</div>
<div>
<button type="button" id="cancel-save" class="btn btn-secondary" (click)="previousState()">
<fa-icon [icon]="'ban'"></fa-icon> <span jhiTranslate="entity.action.cancel">Cancel</span>
</button>
<button type="submit" id="save-entity" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">
<fa-icon [icon]="'save'"></fa-icon> <span jhiTranslate="entity.action.save">Save</span>
</button>
</div>
</form>
</div>
</div>
Вместо редактора jodit на странице, ошибка ниже в консоли браузера Chrome.
ERROR Error: Uncaught (in promise): Error: StaticInjectorError(JhipsterDemoAppAppModule)[JoditAngularComponent -> ElementRef]:
StaticInjectorError(Platform: core)[JoditAngularComponent -> ElementRef]:
NullInjectorError: No provider for ElementRef!
Error: StaticInjectorError(JhipsterDemoAppAppModule)[JoditAngularComponent -> ElementRef]:
StaticInjectorError(Platform: core)[JoditAngularComponent -> ElementRef]:
NullInjectorError: No provider for ElementRef!