Issue NG1006: Class has two conflicting decorators applied

I encountered an issue while compiling my project:

PS C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\src\app> ng serve

Compiling @angular/forms : es2015 as esm2015
An unhandled exception occurred: Failed to compile entry-point @angular/forms (`es2015` as esm2015) due to compilation errors:
../../node_modules/@angular/forms/fesm2015/forms.js:6219:1 - error NG1006: Two incompatible decorators on class

6219 class MaxValidator extends AbstractValidatorDirective {
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6220     constructor() {
     ~~~~~~~~~~~~~~~~~~~
 ... 
6237     }
     ~~~~~
6238 }
     ~
...

Below is the content of my package.json file:

{
  "name": "book-store",
  ...
}

Here is the version information for Angular CLI and Node.js:

C:\Users\hasna>ng --version

Angular CLI: 13.3.0
Node: 16.14.2
Package Manager: npm 6.14.17
OS: win32 x64
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1303.0 (cli-only)
@angular-devkit/core         13.3.0 (cli-only)
@schematics/angular          13.3.0 (cli-only)

I have tried various solutions suggested online but none seem to work. Could someone please assist me with resolving this error?

Your help in solving this error would be greatly appreciated!

EDIT 1: Attached below is the log from C:\Users\hasna\AppData\Local\Temp\ng-I9dgUP\angular-errors.log file

[error] Error: Failed to compile entry-point @angular/forms (`es2015` as esm2015) due to compilation errors:
...

EDIT 2: Here is the app.module.ts file containing the Angular module details.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
...

@NgModule({
  declarations: [
    AppComponent,
    ToolbarComponent,
    PlatsearchpipePipe,
    CartComponent,
    ...
  ],
  imports: [
    MatBadgeModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ...
  ],
  providers: [HttpClient],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer №1

Here's what I did to resolve the issue:

The root cause of my problem:

I discovered misaligned versions in my package.json file, so I decided to remove both the node_modules folder and the package.json file entirely.

To recreate the package.json file, I initiated it with the command:

npm init

Then, I interactively answered the prompts presented in the command line interface.

In the "engines" section of the file, I specified the required versions of node and npm. I proceeded by installing the necessary packages for my project individually using the following commands:

npm install <package_name> (for dependencies)

npm install <package_name> --save-dev 
(for development dependencies)

Ultimately, after executing these steps, my project was up and running successfully 🎊

P.S: While my approach may seem convoluted and arduous, it ultimately proved effective and saved me from a major setback.

Answer №2

The root of the problem may lie in inconsistencies within the node_modules directory.

  1. Start by deleting the node_modules folder and package-lock.json file.
  2. Then, reinstall the node_modules by running npm install.

Following these steps resolved the issue in my case.

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

Learning about a basic sorting algorithm that analyzes and compares different values

While on the hunt for a simple jQuery sorting script, I stumbled upon this gem online: $(function() { $('ol').each(function() { var matches = $('li', this).filter(function() { // Each item var text = $(this).te ...

The length of JSON data retrieved may vary between Internet Explorer and Firefox

After receiving JSON data from the server via AJAX, I proceeded to evaluate it as follows: request.responseText=[{name:xxx},{name:yyy},{name:zzz}]. I then used the following code snippet: var data=eval(request.responseText); alert(data.length); Surpri ...

Is it safe to utilize an AngularJS filter for parsing a URL?

When working on a web application, my client-side (angularjs based) receives JSON data from a web service. The JSON can contain a text field with some URLs, such as: blah blah ... http://www.example.com blah blah blah ... To render these links as HTML, I ...

several different objects within the rightIconButton of a ListItem component in MaterialUI

I am currently working on a project where I need to add multiple elements to the rightIconButton of a ListItem. The tools I am using are Material UI v0.20 and [email protected] <ListItem rightIconButton={ <span> ...

Achieving successful functionality with position:relative in IE9

Having difficulty with the position: relative property in IE9. Check out this demo for reference: <div style="overflow:scroll;height:120px;"> <table id="table" width="100%"> <tr style="position:relative;background-color:#1b72a4;"> ...

Combining union types with intersection operators in Typescript

Here's a concept for an event handling system: type EventMap = Record<string, any>; type EventKey<T extends EventMap> = string & keyof T; type EventReceiver<T> = (params: T) => void; interface Emitter<T extends EventMap&g ...

Retrieve the direction of panning when the panning stops with hammer.js and limit the possible

I have integrated the hammer.js library along with its jQuery plugin. I followed the documentation and used the following code to initialize it on .game-card-mobile divs: /* Creating a Hammer object for swipeable game cards */ var $gameCard = $('.gam ...

Modifying HTML line codes using Python: A step-by-step guide

If only I could modify this particular line: <button _ngcontent-c19="" class="blue-button-disabled" disabled="">CONTINUE </button> to be like this instead: <button _ngcontent-c19="" class="blue- ...

Exploring the benefits of refactoring jQuery promises in use cases

I've been thinking about how to optimize this pseudo-code: function foo() { if (condition) { return somethingReturningPromise().then(function (data) { doSomethingOnSuccess(data); return mainFunctionReturningPromise(); // he ...

transform JSON data into XML format with the help of JavaScript

I need help converting a JSON object to an XML String and I'm struggling to find the right method. I recently came across a jQuery plugin called json2xml on https://gist.github.com/c4milo/3738875 but unfortunately, it does not properly escape the data ...

Issue with Loosing Focus in React TextInput when typing the letter "S"

My TextInput is acting strangely - it loses focus only when I type the letter s. All other letters work fine. <FormControl key={"1"} sx={{ m: 1 }} variant="outlined" onChange={handleFilterValueChange}> <InputLabel htmlFor=& ...

Transformation of looks post a refresh

Initially, the CSS and appearance of the page look fine when I first open it (after clearing the cache). However, upon refreshing the page, a part of it changes (specifically, the padding direction of a div). This change occurs consistently with each refre ...

Excessive API requests can occur when Redux dispatches an action multiple times

Utilizing the Jikan API for anime, my objective is to showcase promo thumbnails of new anime shows. This involves two separate API calls: one to retrieve the latest anime shows: export const get_new_anime = () => `${base_url}search/anime?q&order_b ...

Combining Mongoose OR conditions with ObjectIDs

After querying my Team schema, I am receiving an array of ids which I have confirmed is correct. The issue seems to lie in the fact that both home_team and away_team are ObjectIDs for the Team Schema within my OR statement. Team.find({ 'conferenc ...

Error: Name 'AudioDecoder' could not be located

In my current project using React and TypeScript with Visual Studio Code 1.69.2 and Node 16.15.1, I encountered an issue. I am attempting to create a new AudioDecoder object, but I keep getting an error message stating "Cannot find name 'AudioDecoder ...

Updating parent component's scrollHeight of DOM element based on child component in Next.js

I recently encountered an issue with nested accordions. In my project, I have implemented accordions within other accordions, but ran into a problem when the inner accordion expanded and affected the size of the parent accordion. Here's what's ha ...

Do you know of any resources that provide tutorials on utilizing Epics within Redux Observables?

I've searched extensively for a comprehensive tutorial on epics, but haven't found one yet. const pingEpic = action$ => action$.filter(action => action.type === 'PING') .delay(1000) // Wait asynchronously for 1000ms before ...

Interpret the JSON reply

Could someone please explain why my function B() is not responding? <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/ja ...

Switching between Angular components with a button press

I'm looking to switch from one Angular component to another when a button is clicked. Specifically, I have two components: app and login. Upon clicking a button in `app.component.html`, I want to navigate to `login.component.html`. Here's what I& ...

Is your AngularJS code throwing an error?

$scope.logout = function () { //var auth_token = $cookieStore.get('auth_token'); Auth.delete({ 'auth_token': $cookieStore.get('auth_token') }, function(data){ $scope.isLoggedIn = false; $cookieSto ...