Error NG1006: Two incompatible decorators on class

Issue

I am having an issue when 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 }
     ~
../../node_modules/@angular/forms/fesm2015/forms.js:6279:1 - error NG1006: Two incompatible decorators on class

6279 class MinValidator extends AbstractValidatorDirective {
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6280     constructor() {
     ~~~~~~~~~~~~~~~~~~~
 ...
6297     }
     ~~~~~
               ~~~~~~~~~~~~
    'MaxValidator' is declared here.
../../node_modules/@angular/forms/fesm2015/forms.js:6279:7 - error NG6003: Appears in the NgModule.exports of ɵInternalFormsSharedModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

Is it missing an Angular annotation?
               ~~~~~~~~~~~~
    'MaxValidator' is declared here.
../../node_modules/@angular/forms/fesm2015/forms.js:6279:7 - error NG6003: Appears in the NgModule.exports of ɵInternalFormsSharedModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

Is it missing an Angular annotation?

6279 class MinValidator extends AbstractValidatorDirective {
           ~~~~~~~~~~~~
../../node_modules/@angular/forms/fesm2015/forms.js:6219:7 - error NG6003: Appears in the NgModule.exports of ɵInternalFormsSharedModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.
                                                                                                  Is it missing an Angular annotation?

6219 class MaxValidator extends AbstractValidatorDirective {
           ~~~~~~~~~~~~                                                                           ../../node_modules/@angular/forms/fesm2015/forms.js:6754:7 - error NG6003: Appears in the NgModule.exports of FormsModule, but itself has errors
                                                                                                  6754 class ɵInternalFormsSharedModule {                   ~~~~~~~~~~~~~~~~~~~~~~~~~~                                                             ../../node_modules/@angular/forms/fesm2015/forms.js:6754:7 - error NG6003: Appears in the NgModule.exports of ReactiveFormsModule, but itself has errors

See "C:\Users\hasna\AppData\Local\Temp\ng-I9dgUP\angular-errors.log" for further details.PS C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\src\app>

Here is my package.json file

{
  "name": "book-store",
  "version": "1.0.0",
  "engines": {
    "node": "12.16.1",
    "npm": "6.14.5"
  },
  "scripts": {
    "ng": "ng",
    "heroku-postbuild": "ng build --prod",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.0.0-next.6",
    "@angular/cdk": "^11.2.6",
    "@angular/common": "^12.0.0-next.6",
    "@angular/compiler": "^12.0.0-next.6",
    "@angular/core": "^12.0.0-next.6",
    "@angular/flex-layout": "^9.0.0-beta.31",
    "@angular/forms": "^12.2.16",
    "@angular/material": "^11.2.6",
    "@angular/platform-browser": "^12.0.0-next.6",
    "@angular/platform-browser-dynamic": "^12.0.0-next.6",
    "@angular/router": "^12.0.0-next.6",
    "@ng-bootstrap/ng-bootstrap": "^12.0.2",
    "@ngtools/webpack": "^9.1.15",
    "bootstrap": "^5.1.3",
    "express": "^4.17.1",
    "path": "^0.12.7",
    "rxjs": "~6.6.7",
    "tslib": "^1.14.1",
    "typescript": "~4.2.3",
    "undo": "^0.1.4",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.6",
    "@angular/cli": "^11.2.6",
    "@angular/compiler-cli": "^12.0.0-next.6",
    "@angular/language-service": "^12.0.0-next.6",
    "@types/jasmine": "^3.6.9",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.20.7",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.2.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "^7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.3" 
  }
}

Here is the version of my angular:

C:\Users\hasna>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


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

Angular: undefined
...

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

I googled the error and tried some of the things which were suggested to other people, but nothing worked.

I can't figure out what's wrong. can anyone help me out here?

Any answer to solve this error is gratefully appreciated !

EDIT 1: Here is my C:\Users\hasna\AppData\Local\Temp\ng-I9dgUP\angular-errors.log log file

[error] Error: Failed to compile entry-point @angular/forms (`es2015` as esm2015) due to compilation errors:
[96m../../node_modules/@angular/forms/fesm2015/forms.js[0m:[93m6219[0m:[93m1[0m - [91merror[0m[90m NG1006: [0mTwo incompatible decorators on class

[7m6219[0m class MaxValidator extends AbstractValidatorDirective {
[7m    [0m [91m~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~[0m
[7m6220[0m     constructor() {
[7m    [0m [91m~~~~~~~~~~~~~~~~~~~[0m
[7m ...[0m 
[7m6237[0m     }
[7m    [0m [91m~~~~~[0m
[7m6238[0m }
[7m    [0m [91m~[0m
[96m../../node_modules/@angular/forms/fesm2015/forms.js[0m:[93m6279[0m:[93m1[0m - [91merror[0m[90m NG1006: [0mTwo incompatible decorators on class

[7m6279[0m class MinValidator extends AbstractValidatorDirective {
[7m    [0m [91m~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~[0m
[7m6280[0m     constructor() {
[7m    [0m [91m~~~~~~~~~~~~~~~~~~~[0m
[7m ...[0m 
[7m6297[0m     }
[7m    [0m [91m~~~~~[0m
[7m6298[0m }
[7m    [0m [91m~[0m
[96m../../node_modules/@angular/forms/fesm2015/forms.js[0m:[93m6758[0m:[93m31[0m - [91merror[0m[90m NG6001: [0mThe class 'MinValidator' is listed in the declarations of the NgModule 'ɵInternalFormsSharedModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

[7m6758[0m                 declarations: SHARED_FORM_DIRECTIVES,
[7m    [0m [91m                              ~~~~~~~~~~~~~~~~~~~~~~[0m

  [96m../../node_modules/@angular/forms/fesm2015/forms.js[0m:[93m6279[0m:[93m7[0m
    [7m6279[0m class MinValidator extends AbstractValidatorDirective {
    [7m    [0m [96m      ~~~~~~~~~~~~[0m
    'MinValidator' is declared here.
[96m../../node_modules/@angular/forms/fesm2015/forms.js[0m:[93m6758[0m:[93m31[0m - [91merror[0m[90m NG6001: [0mThe class 'MaxValidator' is listed in the declarations of the NgModule 'ɵInternalFormsSharedModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

[7m6758[0m                 declarations: SHARED_FORM_DIRECTIVES,
[7m    [0m [91m                              ~~~~~~~~~~~~~~~~~~~~~~[0m

  [96m../../node_modules/@angular/forms/fesm2015/forms.js[0m:[93m6219[0m:[93m7[0m
    [7m6219[0m class MaxValidator extends AbstractValidatorDirective {
    [7m    [0m [96m      ~~~~~~~~~~~~[0m
    'MaxValidator' is declared here.
[96m../../node_modules/@angular/forms/fesm2015/forms.js[0m:[93m6279[0m:[93m7[0m - [91merror[0m[90m NG6003: [0mAppears in the NgModule.exports of ɵInternalFormsSharedModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

Is it missing an Angular annotation?

[7m6279[0m class MinValidator extends AbstractValidatorDirective {
[7m    [0m [91m      ~~~~~~~~~~~~[0m
[96m../../node_modules/@angular/forms/fesm2015/forms.js[0m:[93m6219[0m:[93m7[0m - [91merror[0m[90m NG6003: [0mAppears in the NgModule.exports of ɵInternalFormsSharedModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

Is it missing an Angular annotation?

[7m6219[0m class MaxValidator extends AbstractValidatorDirective {
[7m    [0m [91m      ~~~~~~~~~~~~[0m
[96m../../node_modules/@angular/forms/fesm2015/forms.js[0m:[93m6754[0m:[93m7[0m - [91merror[0m[90m NG6003: [0mAppears in the NgModule.exports of FormsModule, but itself has errors

[7m6754[0m class ɵInternalFormsSharedModule {
[7m    [0m [91m      ~~~~~~~~~~~~~~~~~~~~~~~~~~[0m
[96m../../node_modules/@angular/forms/fesm2015/forms.js[0m:[93m6754[0m:[93m7[0m - [91merror[0m[90m NG6003: [0mAppears in the NgModule.exports of ReactiveFormsModule, but itself has errors

[7m6754[0m class ɵInternalFormsSharedModule {
[7m    [0m [91m      ~~~~~~~~~~~~~~~~~~~~~~~~~~[0m

    at C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular\compiler-cli\ngcc\src\execution\tasks\completion.js:57:19
    at C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular\compiler-cli\ngcc\src\execution\tasks\completion.js:31:13
    at C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular\compiler-cli\ngcc\src\execution\create_compile_function.js:69:21
    at SingleProcessExecutorSync.SingleProcessorExecutorBase.doExecute (C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:36:17)
    at C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:59
    at SyncLocker.lock (C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular\compiler-cli\ngcc\src\locking\sync_locker.js:34:24)
    at SingleProcessExecutorSync.execute (C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:27)
    at Object.mainNgcc (C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular\compiler-cli\ngcc\src\main.js:74:25)
    at Object.process (C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular\compiler-cli\ngcc\index.js:29:23)
    at NgccProcessor.processModule (C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular-devkit\build-angular\node_modules\@ngtools\webpack\src\ngcc_processor.js:163:16)
    at C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular-devkit\build-angular\node_modules\@ngtools\webpack\src\ivy\host.js:109:18
    at C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular-devkit\build-angular\node_modules\@ngtools\webpack\src\ivy\host.js:39:24
    at Array.map (<anonymous>)
    at Object.host.resolveModuleNames (C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\@angular-devkit\build-angular\node_modules\@ngtools\webpack\src\ivy\host.js:37:32)
    at actualResolveModuleNamesWorker (C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\typescript\lib\typescript.js:106558:133)
    at resolveModuleNamesWorker (C:\Users\hasna\Downloads\A La Marocaine git - Copie\ALaMarocaineFinal\frontend\node_modules\typescript\lib\typescript.js:106808:26)

EDIT 2: Here is the app.module.ts file

import { WishComponent } from './Component/wish/wish.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ToolbarComponent } from './Component/toolbar/toolbar.component';
import {MatInputModule} from '@angular/material/input';
import {MatCardModule} from '@angular/material/card';
import {MatSidenavModule} from '@angular/material/sidenav';
import { FormsModule } from '@angular/forms';
import { MatPaginatorModule} from '@angular/material/paginator';
import { HttpClient } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSnackBarModule } from '@angular/material/snack-bar';
import {MatBadgeModule} from '@angular/material/badge';
import {MatSelectModule} from '@angular/material/select';
import { PlatsearchpipePipe } from './Pipe/platsearchpipe.pipe';
import { CartComponent } from './Component/cart/cart.component';
import {MatStepperModule} from '@angular/material/stepper';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatRadioModule} from '@angular/material/radio';
import { OrdergreetingComponent } from './Component/ordergreeting/ordergreeting.component';
import { FlexLayoutModule } from '@angular/flex-layout';
import {MatMenuModule} from '@angular/material/menu';
import {MatIconModule} from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { PagenotfoundComponent } from './Component/pagenotfound/pagenotfound.component';
import { ForgetPasswordComponent } from './Component/auth/forget-password/forget-password.component';
import { ResetPasswordComponent } from './Component/auth/reset-password/reset-password.component';
import { AdminComponent } from './Component/admin/admin/admin.component';
import { SpineerComponent } from './Component/spineer/spineer.component';
import { LoginComponentComponent } from './Component/auth/login-component/login-component.component';
import { RegistrationComponent } from './Component/auth/registration/registration.component';
import { SellerComponent } from './Component/seller/seller/seller.component';
import { FooterComponent } from './Component/footer/footer.component';
import { DashboardComponent } from './Component/dashboard/dashboard.component';
import { SidenavbarComponent } from './Component/sidenavbar/sidenavbar.component';
import { MatDialogModule } from '@angular/material/dialog';

import { GiverateComponent } from './Component/giverate/giverate.component';
import {MatTooltipModule} from '@angular/material/tooltip';
import { RatereviewComponent } from './Component/ratereview/ratereview.component';


import { OrderstatusComponent } from './Component/orderstatus/orderstatus.component';

import { HomeComponent } from './Component/home/home.component';
import { CandidatureComponent } from './Component/home/candidature/candidature.component';
import { ConnectionComponent } from './Component/home/connection/connection.component';
import { PlatsComponent } from './Component/home/plats/plats.component';
import { HomeClientComponent } from './Component/home-client/home-client.component';
import { AccueilClientComponent } from './Component/home-client/accueil-client/accueil-client.component';
import { ChefsVisiteurComponent } from './Component/home/chefs-visiteur/chefs-visiteur.component';
import { ChefDeLaSemaineComponent } from './Component/home/chef-de-semaine/chef-de-semaine.component';
import { AddplatComponent } from './Component/addplat/addplat.component';
import { UploadPlatImageComponent } from './Component/addplat/upload-plat-image/upload-plat-image/upload-plat-image.component';
import { AdminunverifiedplatsComponent } from './Component/adminunverifiedplats/adminunverifiedplats/adminunverifiedplats.component';
import { PlatreviewsComponent } from './Component/platreviews/platreviews/platreviews.component';
import { DisplayplatComponent } from './Component/displayplat/displayplat/displayplat.component';
import { RatedplatsComponent } from './Component/ratedplats/ratedplats.component';
import { UpdatePlatComponent } from './Component/update-plat/update-plat/update-plat.component';




@NgModule({
  declarations: [
    AppComponent,
    ToolbarComponent,
    PlatsearchpipePipe,
    CartComponent,
    OrdergreetingComponent,
    PagenotfoundComponent,
    ForgetPasswordComponent,
    ResetPasswordComponent,
    AdminComponent,
    SpineerComponent,
    LoginComponentComponent,
    RegistrationComponent,
    SellerComponent,
    FooterComponent,
    DashboardComponent,
    SidenavbarComponent,
    GiverateComponent,
    AdminunverifiedplatsComponent ,
    RatereviewComponent,
    AddplatComponent,
    OrderstatusComponent,
    WishComponent,
    HomeComponent,
    CandidatureComponent,
    ConnectionComponent,
    PlatsComponent,
    HomeClientComponent,
    AccueilClientComponent,
    ChefsVisiteurComponent,
    ChefDeLaSemaineComponent,
    UploadPlatImageComponent ,
    PlatreviewsComponent,
    DisplayplatComponent,
    RatedplatsComponent,
    UpdatePlatComponent,
  
    

  ],
  imports: [
    MatBadgeModule,
    BrowserModule,
    MatToolbarModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatPaginatorModule,
    FormsModule,
    MatCardModule,

    HttpClientModule,
    MatSnackBarModule,
    MatStepperModule,
    MatCheckboxModule,
    MatRadioModule,
    MatIconModule,
    FlexLayoutModule,
    MatMenuModule,
    MatButtonModule,
    MatSidenavModule,
    MatSelectModule,
    MatTooltipModule,
    MatDialogModule,
   

    
 ],
  providers: [HttpClient],
  bootstrap: [AppComponent],

})
export class AppModule { }

Solution

Here is what I did:

The source of my problem:

I had misaligned versions listed in my package.json file, so I deleted the node_modules folder and the package.json file as well.

I recreated package.json file by running this command:

npm init

Then, I answered to some questions related to the file in the command line.

I added in "engines " the versions of node and npm . I installed the packages needed for my project one by one using the follwing commands:

npm install <package_name> (dependencies)

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

And finally, my project worked 🎊

P.S: My method seems stupid and exhausted.Surely,there is an easier solution but this one saved my life

Answered By - Hasnae Bouhmady