javascript - Chyba NG1006: Na triede sú dva nezlučiteľné dekorátory
Mám problém pri kompilovaní môjho projektu:
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>
Tu je môj súbor package.json
{
"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"
}
}
Tu je verzia môjho Angularu:
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)
Vyhľadal som chybu na Googli a vyskúšal niektoré z vecí, ktoré boli odporúčané iným ľuďom, ale nič nefungovalo.
Neviem prísť na to, čo je zle. Môže mi tu niekto pomôcť?
Každá odpoveď na vyriešenie tejto chyby je vďačne vítaná!
EDIT 1: Tu je môj súbor denníka C:\Users\hasna\AppData\Local\Temp\ng-I9dgUP\angular-errors.log
[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: Tu je súbor app.module.ts
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 { }
Odpoveď č. 1
Tu je to, čo som urobil:
Zdroj môjho problému:
V mojom súbore package.json som mal uvedené nesúladné verzie, takže som odstránil priečinok node_modules aj súbor package.json.
Obnovil som súbor package.json spustením tohto príkazu:
npm init
Potom som odpovedal na niektoré otázky týkajúce sa súboru v príkazovom riadku.
Do časti „engines“ som pridal verzie Node a npm. Balíčky potrebné pre môj projekt som inštaloval jeden po druhom pomocou nasledujúcich príkazov:
npm install <package_name> (závislosti)
npm install <package_name> --save-dev (vývojové závislosti)
A nakoniec môj projekt fungoval 🎊
P.S: Moja metóda sa zdá hlúpa a vyčerpávajúca. Určite existuje jednoduchšie riešenie, ale toto mi zachránilo život
Odpoveď č. 2
Toto je pravdepodobne spôsobené nezhodou vo vnútri node_modules.
- Odstráňte
node_modulesapackage-lock.json. - Spustite
npm install, aby ste znova nainštalovali node_modules.
Týmto sa mi problém vyriešil.