web-dev-qa-db-fra.com

Angular Le compilateur a été détecté mais c'était une instance de la mauvaise classe

Je sais que cette question est déjà posée, j’ai essayé toutes les choses possibles que j’y ai trouvées. Je ne suis toujours pas capable de le casser. Toute aide est appréciée.

Erreur : 

ERROR in ./src/main.ts
Module build failed: Error: Angular Compiler was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed. You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (C:\WORK\folder\folder\folder\node_modules\@ngtools\webpack\src\loader.js:33:15)
 @ multi ./src/main.ts
ERROR in ./src/polyfills.ts
Module build failed: Error: Angular Compiler was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed. You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (C:\WORK\folder\folder\folder\node_modules\@ngtools\webpack\src\loader.js:33:15)
 @ multi ./src/polyfills.ts
ERROR in Error: No NgModule metadata found for 'AppModule'.
    at NgModuleResolver.resolve (C:\WORK\folder\folder\folder\node_modules\@angular\compiler\bundles\compiler.umd.js:20291:23)
    at CompileMetadataResolver.getNgModuleMetadata (C:\WORK\folder\folder\folder\node_modules\@angular\compiler\bundles\compiler.umd.js:15244:60)
    at visitLazyRoute (C:\WORK\folder\folder\folder\node_modules\@angular\compiler\bundles\compiler.umd.js:31182:104)
    at AotCompiler.listLazyRoutes (C:\WORK\folder\folder\folder\node_modules\@angular\compiler\bundles\compiler.umd.js:31150:20)
    at AngularCompilerProgram.listLazyRoutes (C:\WORK\folder\folder\folder\node_modules\@angular\compiler-cli\src\transformers\program.js:228:34)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\WORK\folder\folder\folder\node_modules\@angular\compiler-cli\src\ngtools_api.js:47:40)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\WORK\folder\folder\folder\node_modules\@angular\cli\node_modules\@ngtools\webpack\src\ang

Configuration:

Angular CLI: 1.7.0-beta.2
Node: 8.9.4
OS: win32 x64
Angular: 5.2.11
... animations, common, compiler, core, forms, http
... platform-browser, platform-browser-dynamic, router

@angular/cli: 1.7.0-beta.2
@angular/compiler-cli: 6.1.3
@angular/language-service: 6.1.3
@angular-devkit/architect: 0.8.0-beta.3
@angular-devkit/build-angular: 0.8.0-beta.3
@angular-devkit/build-optimizer: 0.8.0-beta.3
@angular-devkit/build-webpack: 0.8.0-beta.3
@angular-devkit/core: 0.8.0-beta.3
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 6.2.0-beta.3
@schematics/angular: 0.1.17
@schematics/package-update: 0.0.7
TypeScript: 2.9.2
webpack: 4.16.5

Package.json

{
  "name": "app1",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.9",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@progress/kendo-angular-buttons": "^3.0.4",
    "@progress/kendo-angular-dateinputs": "^2.2.0",
    "@progress/kendo-angular-dropdowns": "^2.1.0",
    "@progress/kendo-angular-Excel-export": "^1.0.7",
    "@progress/kendo-angular-grid": "^2.1.2",
    "@progress/kendo-angular-inputs": "^2.2.0",
    "@progress/kendo-angular-intl": "^1.3.2",
    "@progress/kendo-angular-l10n": "^1.0.7",
    "@progress/kendo-data-query": "^1.2.0",
    "@progress/kendo-drawing": "^1.5.1",
    "@progress/kendo-ui": "^2018.2.620",
    "angular-font-awesome": "^3.1.2",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0-beta.0",
    "@angular/cli": "1.7.0-beta.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "TypeScript": "~2.9.2"
  }
}

npm list -global --depth 0

 +-- @angular/[email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    `-- [email protected]

J'ai essayé tous les possibles pense comme

  • Suppression du dossier node_module et de Package.lock.json
  • Réinstallation de npm - npm Install
  • Npm mis à jour 

toute aide ici sur ce qui manque sera très appréciée suis coincée ici. 

---------------------------------

Après de nombreuses recherches, j'ai pu résoudre ce problème en modifiant le package.json en dessous 

{
  "name": "app1",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@progress/kendo-angular-buttons": "^3.0.4",
    "@progress/kendo-angular-dateinputs": "^2.2.0",
    "@progress/kendo-angular-dropdowns": "^2.1.0",
    "@progress/kendo-angular-Excel-export": "^1.0.7",
    "@progress/kendo-angular-grid": "^2.1.2",
    "@progress/kendo-angular-inputs": "^2.2.0",
    "@progress/kendo-angular-intl": "^1.3.2",
    "@progress/kendo-angular-l10n": "^1.0.7",
    "@progress/kendo-data-query": "^1.2.0",
    "@progress/kendo-drawing": "^1.5.1",
    "@progress/kendo-ui": "^2018.2.620",
    "angular-font-awesome": "^3.1.2",
    "core-js": "^2.4.1",
    "ng2-tooltip": "0.0.7",
    "rxjs": "^5.5.6",
    "webpack": "^2.5.1",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.2",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "TypeScript": "~2.5.3"
  }
}

mais il y a encore un autre problème qui dit. 

ERROR in No NgModule metadata found for 'AppModule'.

Quelqu'un peut-il aider s'il vous plaît ici. toute aide est bien appréciée 

angulartypescriptnpmwebpacknode-modules
5
Aji

J'ai eu le même problème et résolu par:

1) mise à jour du paquet @ngtools/webpack vers la dernière version 2) suppression de node_modules, package-lock.json et exécution d’un npm install propre

3
Francesco Borzi

Celui-ci semble être la meilleure solution et a travaillé deux fois pour moi. Exécutez la commande suivante -

npm dedupe

Vous pourrez voir certains détails de l'audit. Pour réparer, lancez simplement -

correctif d'audit npm 

et si nécessaire (l'erreur persiste), exécutez les actions suivantes -

correctif d'audit npm --force

Cela dédupliquera tous les paquets en double et corrigera également leur numéro de version.

J'espère que cela t'aides!

0
Suvendu

J'ai supprimé le dossier @ngtools\webpack et package-lock.json, puis je lance yarn ( pas npm install ou npm update). Je ne suis pas sûr que ce soit une bonne solution, mais cela a fonctionné pour moi.

0
srijishks

celui-ci a fonctionné pour moi npm uninstall @ angular-devkit/build-angular

npm installer @ angular-devkit/build-angular -D

0
Mahdi Shahbazi

Les dépendances de votre projet peuvent être conflictuelles. La version E.g@angular/compiler-cli est 6.1.0 et la version @angular/core est toujours 5.20. Essayez de rétrograder @angular/compiler-cli vers 5.x ou de passer à angular 6 ( https://update.angular.io/ )

0
hgiasac