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

Exploring the optimal approach for distinguishing between numbers and strings in a JavaScript/Typescript class

I recently encountered a situation with my Typescript/React solution where I defined a property as a number and set the input type to "number", but when the state value was placed in an input field, it would change to a string unless properly handled. In ...

javascripthtmlreactjstypescripthtml-input

Angularv9 - mat-error: Issue with rendering interpolated string value

I have been working on implementing date validation for matDatepicker and have run into an issue where the error messages do not show up when the start date is set to be greater than the end date. The error messages are supposed to be displayed using inter ...

htmlangulartypescriptangular-material

Mapping results into an array in Angular 2: A comprehensive guide

My current challenge involves converting an array with numerous columns into a more concise two-column array. Despite observing that the 'res' variable contains an array named 'result', I am encountering difficulty in successfully mappi ...

angular

Node.js interacting with a MySQL database to create a RESTful API

I am attempting to utilize query parameters with MySQL and NodeJS, but I am not receiving any response in the console. Instead, I am getting all students' details as output. app.get('/api/students', (req, res) => { const name = req.query ...

mysqlnode.jsangularexpress

Encountering notifications and issues pertaining to conflicting dependencies after integrating the angular-oauth2-oidc dependency into the package.json file

I am currently working on an Angular project and wanted to share my package.json file for reference: { "name": "angular.io-example", "version": "0.0.0", "description": "Example project from ...

angularnpm

What's the best way to alter an HTTP request response and conveniently retrieve it before sending it back from an Observable?

I am in the process of upgrading to Angular version 5. Previously, I was using @angular/http, but now I need to switch to @angular/common/http and utilize HttpClient. My current setup involves making HTTP requests in services, which makes them easy to reu ...

angularrxjs

How can I integrate React-Router Link as a component within Material-UI using Typescript?

Hey everyone, I've encountered an issue while trying to utilize Material UI's component prop to replace the base HTML element of a component. Error: The error message reads: Type 'Props' is not generic. This problem arises from the fo ...

reactjstypescriptreact-routermaterial-uistyled-components

"Implementation issue in Node.js route causing failure to parse valid JSON data

Recently started learning node.js and facing an issue while trying to pass a JS object from Angular2 to my node.js route. The error message I keep getting is "unexpected token blah blah at index 0" from the native object parser. The object reaches my node ...

node.jsangularroutes

The duration required to render DOM elements

Trying to determine the best method for measuring the rendering time of DOM elements in a web browser. Any tips? I'm currently developing an application that involves significant DOM manipulation as part of comparing the performance between Angular 1 ...

javascriptangularjsdomangular

Leveraging Angular 8 for Multi-Tenancy Implementation

Currently, I am involved in a project that caters to multiple clients. Utilizing angular themes allows me to customize the background color, font, and other elements for each client. Additionally, I need to repurpose components by adjusting the text in var ...

angularangular-materialthemesangular8

Issue encountered during the creation of a new Angular application (npm ERROR! 404 Not Found: @angular/animations@~7.1.0.)

I am currently using Windows 10, Node v11.0.0, and Angular CLI: 7.1.4. I encountered an error when trying to create a new Angular application. The error message is npm ERR! code E404 npm ERR! 404 Not Found: @angular/animations@~7.1.0. Error stack: 0 info ...

node.jsangularnpm

Can you surpass the type declarations of a module at the local level?

Is there a way to change the appearance of a specific typescript module for those importing it? I have webpack rules that modify the exports of this module during transpile time, which is why I want to override its appearance. In my custom.d.ts file, I h ...

typescriptwebpack

Utilizing multiple instances of mat-table with MatSort implemented in a single component

I am facing an issue with having 2 material tables in the same component, both with sorting enabled. I am unable to assign the MatSort directive to the second table as it only works for the first one. Is there a way to configure two tables with sorting in ...

angularangular-material2

Using Typescript in the browser with Babel and Webpack: Step-by-Step Guide

I've been exploring the use of Typescript in my browser with a specific architecture: Typescript in browser architecture However, I'm facing an issue with the import/export functionality when running this command: tsc && babel build-ts -d lib && ...

typescriptwebpackecmascript-6browserbabeljs

Issue with Typescript and React: Property not found on type 'IntrinsicAttributes'

While working on my app using Meteor, React, and Typescript, I encountered a transpiling error: The property 'gameId' is not recognized in the type 'IntrinsicAttributes & {} & { children?: ReactNode; } In my project, I have a com ...

reactjsmeteortypescript

When trying to run ionic serve, I encountered the following error: "[ERROR] ng has unexpectedly closed with an exit code of 127."

My attempt to launch an ionic app on my Mac has hit a roadblock. While running npm install for the dependencies, everything goes smoothly without any issues. However, when I try to run 'ionic serve' or 'ionic s', an error crops up: [ng] ...

javascriptangulartypescriptnpmionic-framework

Unlock the key to connecting the output of one observable to another in rxjs

I have a procedure for saving users in the database. These are the steps I take: 1) First, I validate the request. 2) Next, I hash the password. 3) Finally, I store the user details in the users collection along with the hashed password. Below is the ...

typescriptrxjs

The GIPHY API object returns no results

Utilizing Angular 2 to fetch data from the GIPHY API. export class ListaGifsComponent { gifs : Object[] = []; urlBase = "http://api.giphy.com/v1/gifs/search?q="; termoPesquisado = "ryan+gosling"; key = "O8RhkTXfiSPmSCHosPAnhO70pdnHUiWn"; ...

javascriptangularapitypescriptgiphy

Utilizing precise data types for return values in React hooks with Typescript based on argument types

I developed a react hook that resembles the following structure: export const useForm = <T>(values: T) => { const [formData, setFormData] = useState<FormFieldData<T>>({}); useEffect(() => { const fields = {}; for (const ...

javascripttypescriptreact-hookstypestypescript-generics

How to disable the onChange event in PrimeNG p-dropdown?

I'm currently utilizing PrimeNG's dropdown component. Each option in the list includes an icon that, when clicked, should trigger a specific method. Additionally, I need to execute another method when the onChange event of the dropdown is trigger ...

javascriptangulartypescriptprimeng