Erreurs: le chemin d'accès aux données «.builders ['app-shell']» doit avoir la propriété requise 'class'

160

J'obtiens cette erreur lors de l'exécution de mon application. Voici les détails de ma candidature.

Angular CLI: 7.3.3 
Node: 10.15.1 
Angular: 7.2.7 
@angular-devkit/architect -0.13.3 
@angular-devkit/build-angular- 0.800.1 
@angular-devkit/build-optimizer - 0.800.1 
@angular-devkit/build-webpack - 0.800.1 
@angular-devkit/core -7.3.3 
@angular-devkit/schematics -7.3.3 
@angular/cli -7.3.3 
@ngtools/webpack -8.0.1 
@schematics/angular -7.3.3 
@schematics/update 0.13.3 
rxjs 6.3.3 
typescript 3.2.4 
webpack 4.30.0

J'ai déjà essayé de nettoyer le cache.

angular6 angular7

— Ekta Gandhi
source

Voici le détail de ma candidature. CLI angulaire: 7.3.3 Nœud: 10.15.1 Angulaire: 7.2.7 @ angular-devkit / architect -0.13.3 @ angular-devkit / build-angular- 0.800.1 @ angular-devkit / build-optimizer - 0.800.1 @ angular-devkit / build-webpack - 0.800.1 @ angular-devkit / core -7.3.3 @ angular-devkit / schematics -7.3.3 @ angular / cli -7.3.3 @ ngtools / webpack -8.0.1 @schematics / angular -7.3.3 @ schematics / update 0.13.3 rxjs 6.3.3 typescript 3.2.4 webpack 4.30.0

— Ekta Gandhi

1

Ce problème est généralement dû à des packages incompatibles. Avez-vous récemment mis à jour package.json?

— Deepika

7

Enfin j'ai trouvé la solution. 1) Tout d'abord, éliminez tous les changements dans le fichier package.json en donnant une simple commande git checkout package.json. 2) Ensuite, après avoir modifié package.json dans @ angular-devkit / build-angular- ~ 0.800.1 (Ajouter tail au lieu de cap) 3) Puis exécutez la commande rm -rf node_modules / 4) Puis nettoyez catch en donnant la commande npm nettoyer le cache -f 5) Et enfin exécuter la commande npm install. Cela fonctionne pour moi.

— Ekta Gandhi le

1

Ci-dessus, npm clean cache -fest faux, devrait être npm cache clean --force.

— Fabien Haddadi

2

Ce que j'ai trouvé, c'est que j'avais configuré nvm pour utiliser la mauvaise version du nœud, nécessaire pour le définir correctement en utilisant nvm use 12.14.01(dans mon cas)

— QuietSeditionist

173

Dans votre package.json, changez le générateur de devkit.

"@angular-devkit/build-angular": "^0.800.1",

à

"@angular-devkit/build-angular": "^0.10.0",

ça marche pour moi.
bonne chance.

— idirene youcef
source

31

Je l'ai fait @angular-devkit/build-angular": "0.13.4"et cela a fonctionné.

— Dimuthu

3

Parfait. Travailler avec "0.13.4" et exécuter npm build par la suite

— SouravOrii

1

J'ai atterri ici parce que j'ai reçu une notification concernant une vulnérabilité de sécurité détectée dans js-yaml <3.13.1. Après la mise à jour, j'ai reçu ce message d'erreur. Quoi qu'il en soit, "^0.10.0"corrigé.

— Alesh Houdek

11

le 0.13.4 a fonctionné pour moi, cependant assurez-vous de supprimer d'abord le dossier node_modules, supprimez le package-lock.json, puis exécutez npm install. semble tout réparer.

— Indy-Jones

5

Cette solution fonctionne mais c'est faux, vous devriez plutôt mettre à niveau la version angulaire et angulaire cli. Vérifiez la réponse @ovangle ci

— Francesco Borzi

101

La suite a fonctionné pour moi

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular@0.13.0

— abasar
source

3

Bien que cette réponse soit directe, elle manque également de ressources ou de références. Les personnes qui installent aveuglément une version de package particulière peuvent perturber tout leur projet. Veuillez être clair et fournir des références.

— Zakky

70

Tout le monde ici se concentre sur la rétrogradation de @ angular-devkit / build-angular vers les versions @angular 7.x pour des raisons de compatibilité, mais ce qu'ils devraient faire est de passer @angular/cliaux versions angular 8.

Le problème est que le système cli est toujours bloqué sur une ancienne version et n'est pas automatiquement mis à jour par ng update(car il est en dehors du projet à contrôle angulaire), il est donc laissé dans une version incompatible lors de la tentative d'accès aux bibliothèques angulaires.

La rétrogradation @angular-devkit/build-angularentraîne simplement plus d'incompatibilités.

npm i --global @angular/cli@latest

résoudra le problème sans casser les choses ailleurs.

— ovangle
source

6

Cela devrait être la réponse. Cette erreur m'est venue parce que j'ai tiré d'une branche qui a été mise à jour vers Angular 8 mais que l'angular de mon ordinateur est toujours Angular 7.

— terahertz

19

ce problème peut se produire lorsque vous faites npm audit fixsur des projets qui sont toujours en cours, angular@7alors la rétrogradation @angular-devkit/build-angularest parfois la bonne réponse

— Xesenix

4

courir npm audit fixintroduit parfois des changements de freinage. nous devrions plutôt courir npm auditpour comprendre les résultats et mettre à jour le paquet 1 par 1 en utilisant quelque chose commenpm i --save-dev <package@version>

— Naren

1

@zhuhang C'est tout simplement faux. Vous pouvez vous attendre à ce que la mise à niveau de la CLI globale soit rétrocompatible avec les dernières versions, vous ne pouvez pas nécessairement vous attendre à ce qu'elle soit rétrocompatible.

— ovangle du

1

@ovangle je n'ai pas mentionné la compatibilité ascendante. Je dis que les gens ne devraient pas mettre à niveau ou rétrograder aveuglément, en particulier la angular-cliversion. Il faut identifier leur version CLI actuelle et utiliser le devkit qui correspond à cette CLI. Si vous souhaitez mettre à niveau les packages de devkit, la mise à niveau de la CLI est correcte.

— zhuhang.jasper

62

Tout le monde se concentre sur la rétrogradation de la @angular-devkit/build-angularversion vers X ou la mise à niveau@angular/cli à version vers Y ou la dernière.

Cependant, veuillez ne pas suggérer aveuglément une X or Y or latestréponse. (Bien que généralement, la mise à niveau du devkit devrait être meilleure car la mise à niveau de la CLI est un changement radical)

La bonne version à choisir dépend toujours de votre version Angular (angular-cli).

Angular CLI v8.3.19 -> 0.803.19
Angular CLI v8.3.17 -> 0.803.17
Angular CLI v7.3.8 -> 0.13.8
Angular CLI v6-lts -> 0.8.9

Pour d'autres versions spécifiques, visitez: https://github.com/angular/angular-cli/tags . Trouvez votre version CLI, et dans certaines balises, ils mentionnent les versions correspondantes pour les @angular-devkit/**packages.

Remarque: Si vous souhaitez mettre à niveau votre version CLI, vous devez d'abord envisager de mettre à niveau vers la dernière version de votre version majeure, ne passez pas simplement à la prochaine version majeure.

— zhuhang.jasper
source

3

Je ne sais pas pourquoi cette réponse a été votée à la baisse; c'est un bon conseil. En fait, cela a résolu mon problème (car j'avais mis à jour mon devkit/build-angularpaquet 0.803.xmais laissé ma CLI angulaire à 7.3.x. Comme je n'avais pas l'intention de mettre à niveau ma CLI angulaire, je suis retourné à l'utilisation de ver 0.13.xof devkit

— Gregg L

2

@GreggL En fait, ma réponse est meilleure que celle avec le plus de votes positifs. D'autres réponses suggèrent simplement de mettre à niveau / rétrograder BLINDLY. Comme ma réponse le suggère, la bonne version CLI / devkit est corrélée, mais personne ne donne un F, car c'est ainsi que fonctionne la communauté des développeurs.

— zhuhang.jasper

Vous êtes une bouée de sauvetage, tx! Mais avez-vous une idée pour cli 7.0.6? Il n'y a pas d'écrit

— Erhan Yaşar le

2

Pour ajouter à cette excellente réponse: dans mon propre projet, j'inclus @angular/clidans les dépendances de développement et je m'assure qu'il correspond au @angular-devkit/build-angular. De cette façon, je peux gérer plusieurs projets avec plusieurs versions de CLI. Si vous le faites, vous ng sutiliserez la CLI de votre ordinateur, si vous le faites npm start(ce qui est un script package.jsonpour le faire, ng servevous utiliserez en fait la CLI locale, il lancera cette application avec la bonne CLI. J'espère que cela vous aidera

— ma.D

Mis à jour pour Angular 9, à partir d'aujourd'hui (source NPM ): 0.901.1 -> dernier, 0.1000.0-suivant.0 -> suivant, 0.8.9 -> v6-lts, 0.803.26 -> v8-lts, 0.13 .10 -> v7-

— lts

30

Votre @ angular-devkit est incompatible avec la version @ angular / cli, donc installez simplement une version plus ancienne comme celle-ci par exemple:

npm install @angular-devkit/build-angular@0.13.8 @angular-devkit/build-ng-packagr@0.13.8

— justForThisQuestion
source

Je voulais publier le même. Vu 0.12.4flottant, mais cela ne fonctionne pas pour moi.

— M. Doe

@ M.Doe La version correcte dépend de votre version 1angular-cli`. Voir ceci: stackoverflow.com/a/59043569/6122411

— zhuhang.jasper

22

Même problème après avoir essayé de mettre à niveau vers Ng8 qui a échoué en raison de problèmes de dépendance.

npm uninstall @angular-devkit/build-angular

puis j'ai utilisé,

npm install @angular-devkit/build-angular@0.12.4

réparé ...

— Alfa Bravo
source

Parfois, cette solution n'est pas réalisable car sa version n'est peut-être pas l'exigence de quelqu'un. Supprimer le verrouillage du paquet jsonnpm i @angular-devkit/build-angular

— Tejashree

14

J'ai eu le même problème, mais je l'ai résolu grâce au commentaire d'Ekta Gandhi:

Enfin j'ai trouvé la solution.

1) Tout d'abord, éliminez tous les changements dans le fichier package.json en donnant une simple commande git checkout package.json.

2) Ensuite, après avoir modifié package.json dans @ angular-devkit / build-angular- ~ 0.800.1 (Ajouter tail au lieu de cap)

3) Exécutez ensuite la commande rm -rf node_modules /

4) Nettoyez ensuite catch en donnant la commande npm clean cache -f

5) Et enfin, exécutez la commande npm install. Cela fonctionne pour moi.

.... Avec la modification proposée par Dimuthu

Faites-le à @ angular-devkit / build-angular ":" 0.13.4 "et cela a fonctionné.

— Alejandro Araujo
source

Il convient de noter que la version "0.13.4" de @ angular-devkit / build-angular a un problème lors de l'utilisation de composants à chargement différé. Pour éviter ce problème, les utilisateurs doivent mettre à jour leur package @ angular-devkit / build-angular ... Donc, sorte de compromis ici ...

— Adan

7

Cela m'est arrivé lorsque j'ai installé Angular 8, il y a des incompatibilités que je n'ai pas pu résoudre. J'ai dû déclasser parce que je suis descendu dans le terrier du lapin en jonglant avec chaque version jusqu'à ce que j'en trouve une qui fonctionnait.

Tout d'abord, TypeScript était obsolète, l'installation par défaut a ajouté une référence à TypeScript 3.1.6 et elle nécessite 3.4 ou plus.

npm install typescript@">=3.4 <3.5"

Deuxièmement, l'utilisation du devkit 0.800.1 ou 0.800.1 aboutissait toujours à des incompatibilités. J'ai essayé de nombreuses combinaisons mais je ne suis pas encore sûr qu'elle soit entièrement compatible, surtout parce que j'utilise un bootstrap un peu plus ancien et que je ne peux pas encore mettre à niveau.

Enfin, j'ai essayé de rétrograder (allez sur package.json et trouvez les devDependencies) jusqu'à ce que l'un d'eux fonctionne.

@angular-devkit/build-angular": "0.13.4"

Je suis sûr que votre problème concerne les versions de dépendances, mais je ne peux pas vous dire laquelle. Essayez le déclassement.

— Maximiliano Rios
source

Bien que cela fonctionne, je suggérerais @angular-devkit/build-angular": "0.13.8"que cela semble être la dernière version qui fonctionne

— M. Doe

Merci beaucoup. Il semble que la version bootstrap ou les dépendances ne me permettent pas d'aller plus haut que la 0.13.4 mais cela fonctionnerait pour beaucoup de gens

— Maximiliano Rios

Avec 0.13.8 (essentiellement tout ce qui est inférieur à 0.800. *) J'obtiens:

An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-angular:browser See "/tmp/ng-5iKcHN/angular-errors.log" for further details.

Avec la dernière version, j'obtiens une erreur du titre. Que faire maintenant?

— Dominik Szymański

7

Essayez de mettre à jour le fichier package.json à partir de

  "@angular-devkit/build-angular": "^0.800.1"

à

  "@angular-devkit/build-angular": "^0.12.4"

Ensuite, exécutez npm install dans la ligne de commande.

— Nadeem Qasmi
source

6

Je rencontrais également ce problème et pour moi, lorsque je faisais plus de mises à jour, plus de problèmes se produisaient.

Ce qui a fonctionné pour moi à la fin était plus ou moins de supprimer le cli angulaire et de le réinstaller avec ces étapes:

npm uninstall -g @angular/cli
npm cache clean --force
npm install -g @angular/cli

cela m'a aidé à trouver la source: comment désinstaller angular / cli

— tony2tones
source

3

J'ai fait ce changement dans le fichier package.json, puis cela fonctionne.

"@angular-devkit/build-angular": "^0.803.23"

à

"@angular-devkit/build-angular": "^0.13.9"

— Aditya patil
source

2

J'ai changé @angular-devkit/build-angular": "0.9.0.1"pour @angular-devkit/build-angular": "0.13.4"et cela a fonctionné.

— Bénédiction Tatenda Kabungaidze
source

A travaillé pour moi, j'ai également dû exécuter npm install pour s'assurer que la bonne version était téléchargée.

— David Brunning le

2

J'ai également rencontré ce problème et j'ai eu du mal à le résoudre pendant des heures, j'ai essayé toutes les options ci-dessus mais rien n'a résolu mon problème. Ce problème se produit en raison d'une incompatibilité de version de angular / cli et angular-devkit, j'ai donc fait ce qui suit:

Version modifiée manuellement des fichiers:

@ angular-devkit / build-angular ":" ^ 0.13.9 ",

@angular/cli": "~7.0.3", // Ceci est pour Angular7, pour Angular8: 0.803.23
Package-lock.json supprimé
Exécuté: npm install

Cela a résolu mon problème.

— SanjaySahu44
source

1

De mon côté c'était paquet

@ angular-devkit / build-angular

et

@ angular-devkit / build-ng-packagr

n'était pas la même version, la mise build-ng-packagrà jour vers la même version a build-angularrésolu mon problème.

— Bdwey
source

1

Si vous passez à angulaire 8 ou 9, cela fera l'affaire

ng update @angular/cli

— Victor Osuyak
source

0

Vous pouvez simplement auditer votre code puis

#sudo su 
rm -rf package-lock.json node_modules
sudo npm i --save

— SUmit RUhela
source

-1

Vous avez des dépendances incompatiibles, j'ai résolu ce problème en modifiant le package.json d'un autre projet angulaire puis après le changement de ce packag.json, vous ne modifiez que les versions de dépendances que vous avez.

après le changement, écrivez:

-npm lien

-npm servir -o

alors c'est du travail :)

   {
   "name": "angular-jwt-auth",
   "version": "0.0.0",
   "scripts": {
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
   "@angular/animations": "^7.1.4",
   "@angular/cdk": "^7.3.1",
   "@angular/common": "~7.1.0",
   "@angular/compiler": "~7.1.0",
   "@angular/core": "~7.1.0",
   "@angular/forms": "~7.1.0",
   "@angular/http": "^6.1.10",
   "@angular/material": "^7.3.1",
   "@angular/platform-browser": "~7.1.0",
   "@angular/platform-browser-dynamic": "~7.1.0",
   "@angular/router": "~7.1.0",
   "@ng-bootstrap/ng-bootstrap": "^4.2.0",
   "@types/jquery": "^3.3.29",
   "angular-6-datatable": "^0.8.0",
   "bootstrap": "^4.3.1",
   "chart.js": "^2.8.0",
   "core-js": "^2.5.4",
   "jquery": "^3.4.1",
   "rxjs": "~6.3.3",
   "zone.js": "~0.8.26"
    },
   "devDependencies": {
   "@angular-devkit/build-angular": "~0.11.0",
   "@angular/cli": "~7.1.0",
   "@angular/compiler-cli": "~7.1.0",
   "@angular/language-service": "~7.1.0",
   "@types/chart.js": "^2.7.53",
   "@types/jasmine": "^2.8.16",
   "@types/jasminewd2": "^2.0.6",
   "@types/node": "~8.9.4",
   "codelyzer": "~4.2.1",
   "jasmine-core": "~2.99.1",
   "jasmine-spec-reporter": "~4.2.1",
   "karma": "~3.1.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": "~3.1.6"
   }

— Mohamad Alhamid
source

Je l'ai essayé et cela me donne les mêmes erreurs d'erreur: le chemin de données "" ne doit PAS avoir de propriétés supplémentaires (es5BrowserSupport).

— Ekta Gandhi

-1

J'ai eu ce problème, voici comment je l'ai résolu. Le problème est principalement que votre version Angular ne prend pas en charge votre version Node.js pour la construction. La meilleure solution est donc de mettre à niveau votre Node.js vers la version stable la plus récente.

Pour une mise à jour propre de Node.js, je vous conseille d'utiliser n. si vous utilisez Mac.

npm install -g n
npm cache clean -f
sudo n stable
npm update -g

et vérifiez maintenant que vous êtes à jour:

node -v
npm -v

Pour plus de détails, consultez ce lien: ici

— Arielb
source

Je serais heureux de savoir pourquoi j'ai obtenu ce vote négatif. C'est une réponse claire, sans essayer d'avoir des "solutions de contournement"

— arielb

car ce n'est pas lié à la version du nœud, il devrait s'agir de la version angular-cli.

— zhuhang.jasper

Je viens d'avoir ce problème, je ne pense pas que ce soit la version angular-cli, elle est liée à angular-cli mais elle est affectée par la version du nœud.

— arielb

-1

AUCUNE des réponses ci-dessus ne fonctionne pour moi.

Mon objectif initial était de corriger la COMPILATION parfois CONSTANTE de mon projet avec VSCode.

J'ai essayé de nombreuses façons, mais RIEN ne fonctionnait - le projet NE SERA PAS COMPILÉ!

Enfin, j'ai découvert quel est le problème ici:

J'ai cloné le projet à partir du référentiel de mon entreprise, et tout le code à partir de là DOIT correspondre exactement aux versions des dépendances lorsque la partie existante du projet a été codée.

En fin de compte, j'ai supprimé le projet précédemment cloné ENCORE (plusieurs fois) , et cloné ENCORE (également quelques fois) , et N'AI RIEN SAUF RAN "npm install", et tout a commencé à fonctionner .

La leçon que j'ai apprise ici est la suivante:

Parfois, vous aggraverez la situation lorsque vous essayez de résoudre certains problèmes (celui que j'ai eu était la COMPILATION CONSTANTE de mon projet).

Mais cela ne signifie pas que nous ne pouvons pas essayer de résoudre les problèmes. Nous pouvons. Mais quand tout devient un gâchis, nous ferions mieux d'utiliser le code d'origine.

Heureusement, la COMPILATION CONSTANTE de mon projet ne se produit qu'une fois de temps en temps, pas tout le temps. Ce n'est pas fixe, mais je dois le supporter, sinon mon projet ne sera même pas compilé.

— William Hou
source

-2

c'est du travail réinstaller @ angular-devkit / build-angular @ 0.13.4

npm install @angular-devkit/build-angular@0.13.4 --save-dev

— Ahmeturhan
source