The Angular project was functioning properly when tested locally, but encountered an error in the Quill Editor during the building process

I have encountered an issue when deploying my Angular 8 + Quill project. Everything works fine locally with 'ng serve', but upon deployment, I am facing the following error. Despite trying various solutions like updating Angular or deleting 'node_module,' none of them seem to work for me.

Here is the error message I'm receiving:

ERROR in ./node_modules/ngx-quill/fesm2015/ngx-quill.js Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js): TypeError: Cannot read property 'kind' of undefined at isAngularDecoratorMetadataExpression (/Users/liyanaarachchi/XXXXXX/iXXXXX/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:265:35) ...

packge.json

   {
  "name": "ibrainmart",
  "version": "0.0.0",
  ...

tsconfig.json

`{
"compileOnSave": false,
...

Can anyone provide insight into why I am encountering this error?

angular.json

`{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
...
angulartypescriptquillngx-quill

Answer №1

If you're facing a problem, there are two ways to tackle it

To delve deeper into this issue, feel free to visit the following link: https://github.com/ckeditor/ckeditor4-angular/issues/78

1. Modify the buildOptimizer setting in your package.json file

 "configurations": {
        "DEV": {
          ...
          "buildOptimizer": false,
        },
        "STAG": {
           ...
          "buildOptimizer": false,
        },
        "PROD": {
           ...
          "buildOptimizer": false,
        },
        "LIVE": {
          ...
          "buildOptimizer": false,
        }
      }
    },

2. Update the version of angular-devkit

"devDependencies": { 
"@angular-devkit/architect": "~0.803.20", 
"@angular-devkit/build-angular": "~0.803.20", 
"@angular-devkit/core": "~8.3.20", 
"@angular-devkit/schematics": "~8.3.20",
 },

Answer №2

If you encounter issues with building the node_module, one solution is to delete it and then run npm install in your terminal. If that doesn't work, consider updating your nvm version as it may resolve the problem.

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

What's the best way to set up multiple NestJS providers using information from a JSON file?

Recently diving into NestJS, I am in the process of building an application following the MVC architecture with multiple modules including: Project | +-- App.Controller +-- App.Service +-- App.Module | +-- SubModule1 | | | +-- SubModule1.C ...

javascriptnode.jstypescriptbackendnestjs

The expiration date is not considered in JWT authentication using passport-jwt

I have been working on implementing an authentication system using JWT token in Express, utilizing passport-jwt and jsonwebtoken. Everything is functioning correctly at the moment, however, I am facing an issue where the token remains valid even after its ...

node.jstypescriptexpressauthenticationjwt

I encountered the error message "The property you are trying to access does not exist on the type 'never'" while attempting to retrieve JSON data from the API response

Every time I attempt to access the fields in items such as id or title, an error pops up saying Property does not exist on type 'never'. Interestingly, when I log the data using console.log(response.data), everything seems to be working fine. I ...

reactjstypescriptaxios

The progress bar is only displayed during the initial consecutive file uploads in Angular 6

Within my Angular application, I have implemented a dedicated form for uploading profile pictures. The process involves triggering a confirmation modal upon uploading a new image, followed by the display of a progress bar on the page. This progress bar ind ...

javascriptangularfile-uploadangular6progress-bar

Utilizing Protractor, TypeScript, and Jasmine for Automated Testing

Just landed a new job at a company that uses protractor, jasmine, and Type Script for automation testing. While I have experience with selenium and Java, I'm unfamiliar with protractor. Can someone guide me on how to start protractor testing? Is there ...

typescriptjasmineprotractor

Bringing in TypeScript declarations for the compiled JavaScript librarybundle

I have a custom library written in TypeScript with multiple files and an index.ts file that handles all the exports. To consolidate the library, I used webpack to compile it into a single index.js file but now I'm facing challenges importing it with ...

node.jstypescriptwebpacktypescript-typings

Error429 was received from a GET request made to the Imgur API

Encountering a Request failed with status code 429 error from the Imgur API despite using a new Client_ID that hasn't been used before, Here is my Api.ts: const imgurClientId = process.env.NEXT_PUBLIC_Client_ID const BASE = "https://api.imgur. ...

typescriptnext.jsaxiosimgurhttp-status-code-429

How to send configuration data to an external library in Angular 6 in the app.module.ts file

My goal is to provide basic configuration settings to an external or third-party module. These settings are stored in a JSON file for easy modification across different environments without the need to rebuild the code. import { BrowserModule } from &apos ...

javascriptangularangular6

Customizable column layout in react-grid-layout

I am looking to implement a drag and drop feature in which users can place items into a grid without fixed columns. The goal is that if an item is dragged from outside the grid boundaries and dropped to the right (an empty area), the grid will automaticall ...

reactjstypescriptreact-grid-layout

Tips for optimizing vendor.js and main.js files in Angular 15 using NX workspace

https://i.sstatic.net/8F9pX.pnghttps://i.sstatic.net/fD9TB.png Looking to enhance the performance of my login page and overall application by reducing the size of vendro.js and main.js files. Tried setting optimization : true in project.json for my NX wo ...

angularnx-workspace

You won't find the property 'includes' on a type of 'string[]' even if you're using ES7 features

I encountered a similar issue on another page where it was suggested to modify the lib in tsconfig.josn. However, even after changing compile to es7, the same error kept appearing and the project couldn't be compiled or built. { "compileOnSave": ...

javascriptangulartypescriptpackageecmascript-2016

Error Alert: Redux unable to retrieve data from Django API due to CORS issue

Currently, I am working on a project with a frontend application running on http://localhost:3000 and a backend API on http://localhost:8000. However, I am facing a CORS issue when trying to make requests from the frontend to the backend API. The error me ...

reactjstypescriptdjango-rest-frameworkaxioscors

Utilize the class or interface method's data type

In the context of a child component calling a callback provided by its parent, this situation is commonly seen in AngularJS. As I am utilizing TypeScript, I aim to implement strong typing for the callback in the child component. Here is the initial stat ...

angularjstypescript

What are some ways to leverage the window object within Angular 2?

I attempted to include the following code in order to access a window object in angular 2: @Component({ selector: 'app-slider', templateUrl: './slider.component.html', styleUrls: ['./slider.compo ...

angularangular2-cliwindow-object

Instructions for utilizing ObjectId with a string _id on the client side

Is there a way to retrieve a document using the _id in string format? Here is an example of the code on the client side: 'use client' ... const Page(){ ... fetch("api/get_data", { method: 'POST', ...

typescriptmongodbnext.jsnext.js13

Is there a way to include values in the body of an HTTP GET request using Angular?

I've created a function in my service that looks like this: /** * Retrieve all data * @param sendSelectedValues string */ getAllActPlanBalanceYearData(sendSelectedValues: any): Observable<any> { const url = `/yearlyvalues/act-and ...

javascriptangulartypescripthttpget

Is there a way to establish a pre-defined key in a mat-table?

I am fetching data from an API and I need to display it in a key-value format on a mat table. The keys are predefined and not provided by the API. The data retrieved from the API is shown here: image1 I want to display it on a mat table like this: mat ta ...

angulartypescriptangular8

Can Primeng and Angular2 be integrated into JSF without the use of npm?

I'm looking to implement the Angular2 framework for my frontend development, and I've decided to use PrimeNG for the UI components. However, I am not familiar with how npm functions. Here are some tech details: I will be using Eclipse or NetBe ...

angularjsfprimeng

Looking for a solution to resolve the issue "ERROR TypeError: Cannot set property 'id' of undefined"?

Whenever I attempt to call getHistoryData() from the HTML, an error message "ERROR TypeError: Cannot set property 'id' of undefined" appears. export class Data { id : string ; fromTime : any ; toTime : any ; deviceType : string ...

htmlangulartypescript

Exploring the attributes and functions of JavaScript Objects in an Angular environment

Can Angular's $http.post method recognize JavaScript object properties when sending data? To understand more about JavaScript objects and their properties, visit https://www.w3schools.com/js/js_objects.asp. Here is an example to illustrate my questio ...

javascriptangularservicecontrollerfactory