The Angular compilation process encounters issues with CKEditor - Inconsistency in accessibility between getter and setter accessors

After following the installation instructions for ckeditor5-angular and ckeditor5-build-classic from this link, I encountered an error while building:

Error: node_modules/@types/ckeditor__ckeditor5-ui/src/editableui/editableuiview.d.ts:7:9 - error TS2379: Getter and setter accessors do not agree in visibility.

7     get _hasExternalElement(): boolean;
          ~~~~~~~~~~~~~~~~~~~

Error: node_modules/@types/ckeditor__ckeditor5-ui/src/editableui/editableuiview.d.ts:8:19 - error TS2379: Getter and setter accessors do not agree in visibility.

8     protected set _hasExternalElement(newValue: boolean);
                    ~~~~~~~~~~~~~~~~~~~

The code snippet editableuiview.d.ts looks like this:

import { Locale } from "@ckeditor/ckeditor5-utils";
import View from "../view";

export default class EditableUIView extends View {
    isFocused: boolean;
    name: string;
    get _hasExternalElement(): boolean;
    protected set _hasExternalElement(newValue: boolean);

    constructor(locale: Locale, editingView: View, editableElement?: HTMLElement);
}

I found a temporary solution by removing "protected" from the setter function. However, since this file is auto-generated in node_modules, this change is not permanent.

To address this issue permanently, I have created a typings.d.ts file as suggested on StackOverflow.

If you have any suggestions on how to resolve this error permanently, please let me know!

Thank you for your help!

Answer №1

After some troubleshooting, I discovered a fix: By removing the types package for ckeditor, the issue resolved itself.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The synchronization between Typescript and the HTML view breaks down

I am currently working on an application that retrieves user event posts from MongoDB and displays them in HTML. In the Event-post.ts file, inside the ngOnInit() function, I have written code to retrieve the posts using the postsService.getPosts() method. ...

A custom function that changes the state of a nested object using a specified variable as the key argument

My goal is to update the state of an object using a function called updateDatas. This function takes the arguments key, possibly subKey, and value. interface Datas { code: number; item1: Item; } interface Item { id: number; name: string; } const ...

Guide to validating multiple form controls simultaneously in Angular 2

This is the primary form group: this.mainForm = this.formBuilder.group({ productType1: new FormArray([], CustomValidators.minSelectedCheckboxes()), productType2: new FormArray([],CustomValidators.minSelectedCheckboxes()), ...

Stop Mat-chip from automatically inserting a row upon selection

I am working on preventing the automatic addition of a row by the mat-chip module after a single chip has been selected. Even though the max chip count is set to 1, the input remains enabled and adds a new row beneath it as if the user can still type more ...

change in the value of a nested formArray within a parent formArray

I am working with a form that includes a formArray called FinYearArray, which in turn contains another formArray called RecipientArray. Both of these arrays have formControls for the amount, and whenever there is a change in these fields, the totals need t ...

I'm currently utilizing lint in my Angular 2+ project. Is there a way to arrange the constructor parameters in alphabetical order

I am struggling to organize the constructor parameters in TypeScript while using TSLINT with Angular9. I am looking for a rule similar to member-ordering that can help me sort them effectively. constructor( // Sort these private readonly router: R ...

Using SignalR to implement CRUD operations within a Hub or Controller

I have been working on an Angular app that is built on top of an ASP.NET MVC application. In this project, I have a Dashboard where I showcase Average and Total numbers that are altered during Create / Update / Delete events. Usually, these events are hand ...

Utilizing Typescript and Jest to prevent type errors in mocked functions

When looking to simulate external modules with Jest, the jest.mock() method can be utilized to automatically mock functions within a module. After this, we have the ability to modify and analyze the mocked functions on our simulated module as needed. As ...

How can you update ngModel in Angular and mark the form as dirty or invalid programmatically?

My form is connected to a model as shown below In the component file: myTextModel: string; updateMyTextModel(): void { this.myTextModel = "updated model value"; //todo- set form dirty (or invalid or touched) here } Html template: <form #test ...

Ways to limit file access and downloads on an IIS server

After deploying our Angular app (dist folder) on an IIS server, everything seems to be working well. However, there is a concerning issue where anyone can access and download the font files directly from the server without needing to log in. For example, o ...

Experiencing difficulty accessing the response header in Angular 16 due to CORS restrictions

When attempting to retrieve the response header from my post call, I am encountering difficulties as it appears there are "no headers" or I may be doing something incorrectly. On the backend, I am utilizing ASP.NET Core. Below is a basic outline of my API ...

Why is typescript-eslint flagging the error "Unsafe call of an any typed value" whenever I try to use the delete or update methods?

type TResultCategory<T> = { title: string; items: T[]; description?: string; delete(dispatch: Dispatch<{}>): void; update?(dispatch: Dispatch<{}>, products: TCartProduct[]): void; } type TResult = (TResultCategory<TResultPro ...

Unlock the power of Angular Router to execute unique actions with each click

Exclude the route from the button actions: <div *ngFor="let data of allData" routerLink="/view-detail"> <div> <p>{{data.content}}</p> </div> <button>SaveData</button> <button>ApplyData</button> < ...

What are the steps to expand the express object with TypeScript?

I am facing an issue where, after compiling a typescript project, the express import import {Request, Response} is not showing up. I am now attempting to use require, but I am unsure of how to extend the express object and utilize req and res. Any assistan ...

Having trouble with the image source in Angular?

I've encountered an issue with the img src in my Angular project. Upon some investigation, I relocated my images to the assets folder, which resolved the error 404 message. While uploading my background image, everything worked smoothly. However, when ...

Sending image from angular2 to asp.net core server

Currently, I have an asp.net core application with angular2 and I am facing an issue with uploading images. While I was able to upload images as byte[], I encountered a problem in checking if the uploaded file is actually an image on the backend. This led ...

Dealing with Overwhelmingly Large Angular 5 Components

I'm currently developing a project in Angular 5 and one of our component files is becoming quite large, reaching nearly a thousand lines and continuing to grow. This will eventually make it difficult to manage and understand. We are seeking advice on ...

What are the steps to modify my webpage's HTML using 3 separate blocks?

Hey there, I'm looking to customize my HTML layout in the following way: https://i.sstatic.net/mgE1G.png This is what I currently have: <app-list-employees></app-list-employees> <app-book-employee></app-book-employee> <app ...

Using TypeScript to filter and compare two arrays based on a specific condition

Can someone help me with filtering certain attributes using another array? If a condition is met, I would like to return other attributes. Here's an example: Array1 = [{offenceCode: 'JLN14', offenceDesc:'Speeding'}] Array2 = [{id ...

The ListBuckets command in AWS S3 provides a comprehensive list of all available

I'm currently working on a TypeScript application that interacts with an AWS S3 bucket. The issue I'm facing is that my current credentials only allow me to read and write data to specific buckets, not all of them. For example: ListBuckets retu ...