web-dev-qa-db-fra.com

Erreur CLI angulaire2 "Le package angular / compiler-cli" n'a pas été installé correctement

Je travaille sur un projet Angular 2. Essayez maintenant d'installer Angular CLI dans le projet actuel avec les éléments suivants

npm install --save-dev @angular/cli@latest
npm install

Le problème est lors de l'exécution de ng serve je reçois une erreur

The "@angular/compiler-cli" package was not properly installed.
Error: The "@angular/compiler-cli" package was not properly installed.
    at Object.<anonymous> (/myng2project/node_modules/@ngtools/webpack/src/index.js:14:11)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/myng2project/node_modules/@angular/cli/tasks/eject.js:10:19)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
angularangular-cli
49
Foo Barazz

Il y a un problème avec la version

"@angular/cli": "1.0.0-rc.4"

Essayez d'installer un ancien

"@angular/cli": "1.0.0-rc.2"
18
SergeyV

J'ai eu le même problème. Je l'ai résolu à l'issue du processus "Mise à jour Angular CLI" dans la page npm @ angular/cli , c'est-à-dire:

1. Désinstaller et nettoyer (global)

rm -rf node_modules dist
npm uninstall -g @angular/cli
npm cache clean

2. Réinstallez et jouez (global)

npm install -g @angular/cli@latest
npm install
ng serve

Cela a fonctionné pour moi.

55
ruzenhack

J'ai tout essayé dans ces réponses et la seule chose qui a fonctionné pour moi a été la suivante:

Étape 1: npm install -g @ angular/cli @ last
Étape 2: ng nouveau nom de projet (ignorer si le projet est déjà créé)
Étape 3: cd nom-du-projet (ignorer si le projet est déjà créé)
Étape 4: npm installez @ angular/cli --save-dev
Étape 5: npm installez @ angular/compiler-cli --save-dev
Étape 6: Servir

Testé ces étapes dans deux environnements différents

Dans le dossier du projet, tapez "npm install" et attendez la fin de l'installation. Ce correctif fonctionne correctement pour moi.

23
LOTUSMS

Cette même erreur peut également se produire si vous effectuez une mise à niveau vers Angular 4 et ne mettez pas à jour TypeScript vers 2.1.0.

10
Jared Tarnasky

Ceci a absolument aspiré à travailler. Pour résoudre ce problème, je devais faire quelques choses ...

Pour contourner l'erreur @angular/compiler-cli was not installed correctly, je devais prendre la solution de @ Ruzenhack, qui consistait à supprimer les packages global et local @angular/cli:

rm -rf node_modules dist
npm uninstall -g @angular/cli
npm cache clean

Mais en suivant ses conseils pour installer @angular/cli@latest, je me suis retrouvé avec le même problème, ce qui m'a conduit à la suggestion de @ SergeyV de revenir à une version plus ancienne de cli. Personnellement, j'avais un autre projet qui travaillait avec avec @angular/[email protected] alors j'ai décidé de l'utiliser et de l'installer globalement ainsi que dans mon package.json.

Succès.

MAIS ...

On m'a alors donné une autre erreur .... Cannot read property 'Private' of undefined

Dammit.

Donc j'ai pris cette suggestion des problèmes angular-cli github , qui était de mettre à jour mon TypeScript. Ainsi, en jetant ma version TypeScript sur ^2.0.0 dans package.json, j'ai été accueilli avec la sortie verte ng serve familière et sans frustration. Finalement.

J'espère que ça aide quelqu'un.

7
Matt

J'ai eu le même problème. J'ai redémarré mon ordinateur, car Windows .. affichait toujours le même message d'erreur lorsque je me suis rendu compte que je n'avais pas encore exécuté l'installation de npm sur le projet. J'ai donc procédé et résolu le problème.

Global angular CLI - version 1.0.0-rc.4

Dépendances locales:

"@angular/common": "^2.4.0",
"@angular/compiler": "^2.4.0",
"@angular/core": "^2.4.0",
4
Zach

J'ai pris 10 heures d'investigations pour trouver ceci:

npm start

La longue histoire pour vous permettre de comparer votre approche d'enquête:

Après plusieurs tentatives infructueuses, j'ai réinstallé le nœud et npm et j'ai maintenant:

c:\> ng -v
@angular/cli: 1.3.0
node: 6.9.0
os: win32 ia32

Tout fonctionne bien pour les nouveaux projets

ng new my-new-project

Mais j'ai un projet compromis qui montre

Unable to find "@angular/cli" in devDependencies.

Please take the following steps to avoid issues:
"npm install --save-dev @angular/cli@latest"

The "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler-cli'
Error: The "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler-cli'
at Object.<anonymous> (C:\Users\profimedica\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@ngtools\webpack\src\index.js:14:11)

Etant donné que @ angular/cli est déjà installé globalement, il me suffisait de ajoutez-le au fichier package.json, en prenant comme exemple le même fichier provenant d'un nouveau projet créé qui fonctionne correctement:

{
  "dependencies": {
    "body-parser": "^1.17.1",
    "express": "^4.15.2",
    "http": "0.0.0"
  },
  "devDependencies": {
    "@angular/cli": "1.3.0",
    "@angular/compiler-cli": "^4.2.4"
  }
}

La deuxième erreur est générée à partir de là car le module @ angular/compiler-cli n’est pas installé en tant que module local:

// Check that Angular is available.
try {
    version = require('@angular/compiler-cli').VERSION;
}
catch (e) {
    throw new Error('The "@angular/compiler-cli" package was not properly installed. Error: ' + e);
}

J'ai vérifié le dossier node_modules et j'ai constaté que les dossiers.\Node_modules\@angular\compiler-cli,.\Node_modules\@angular\compiler et.\Node_modules\@angular\core étaient manquants.

J'ai installé au besoin:

npm install @angular/compiler-cli
npm install @angular/compiler
npm install @angular/core

J'ai ajouté un journal au fichier et je vois la version détectée après l'installation:.\Node_modules\@ngtools\webpack\src\index.js

console.log(require('@angular/compiler-cli').VERSION);
Version { full: '4.3.5' }

Maintenant, je reçois une nouvelle erreur:

Cannot read property 'config' of null
TypeError: Cannot read property 'config' of null
at Class.run (C:\PRO\htdocs\my\api\gen\projects\generated\testknowledge\node_modules\@angular\cli\tasks\serve.js:23:63)

Pour étudier ce nouveau problème, j'ai ajouté une ligne de journal.\Node_modules\@angular\cli\models\config\config.js

class CliConfig {
    constructor(_configPath, schema, configJson, fallbacks = []) {
        this._configPath = _configPath;     
        console.log(_configPath);
        this._config = new (json_schema_1.SchemaClassFactory(schema))(configJson, ...fallbacks);
    }

Et j'ai eu la valeur inattendue:

C:\Users\profimedica\.angular-cli.json

De toute évidence, ce fichier ne se trouve pas dans mon répertoire personnel, et ne provient pas de la racine du projet:

.\angular-cli.json

Après 3 heures d’enquêtes et de tentatives de création des fichiers manquants, j’ai dû repenser l’approche.

J'ai supprimé le module @angular local et réinstallé globalement:

npm install --save-dev @angular/cli@latest
npm install --save-dev @angular/compiler-cli@latest
npm install --save-dev @angular/compiler@latest
npm install --save-dev @angular/core@latest

J'ai trouvé que mon projet avait une architecture personnalisée et que je devais exécuter npm start

4
profimedica

Mettez à niveau le TypeScript vers la dernière version avec npm install -g TypeScript@latest trouvez la version du paquet installé avec tsc -v

ouvrez package.json et changez la version TypeScript avec la dernière version, puis redémarrez-la.

2
Chirag Aggarwal

J'ai essayé à peu près tous les correctifs dans cette question. J'ai aussi essayé celui de https://github.com/angular/angular-cli#updating-angular-cli . Même résultat. Alors j'ai creusé dans l'erreur.

J'ai regardé le code à "node_modules/@ngtools/webpack/src/index.js: 14: 11". C'est le même endroit où il échoue sur mon projet. La ligne est version = require('@angular/compiler-cli').VERSION; Cette ligne lève l'exception et enregistre l'erreur The "@angular/compiler-cli" package was not properly installed.

La fonction générant l'erreur est la fonction require. Le module @angular/compiler-cli ne figure donc pas dans la version actuelle. J'ai essayé l'identifiant de module @angular/compiler mais cela n'a pas de VERSION. (c'est-à-dire non défini).

On dirait donc que c’est un bug que l’équipe angular devra régler.

2
RBall444

RESOLU !!!

Cette erreur n’est pas directement liée à @ angular/compiler-cli comme elle le prétend, mais à @ angular/cli, une erreur rapportée trompeuse partiellement codée en dur et partiellement incomplète. Il est en effet jeté lorsque la version de @ angular/compiler-cli ne peut pas être déterminée. Mais ce module est bon.

Comme je suis nouveau dans Angular, migrer depuis .NET et moi ne nous attendions pas à autant de problèmes dès le début. Alors j'ai commencé à enquêter sur celui-ci.

L'erreur se produit lorsque Webpack ne peut pas déterminer la version de @ angular/compiler-cli dans le fichier C:\Users\profimedica\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@ngtools\webpack\src\index. js:

// Check that Angular is available.    
try {
    version = require('@angular/compiler-cli').VERSION;
}
catch (e) {
    throw new Error('The "@angular/compiler-cli" package was not properly installed. Error: ' + e);
}

Vous pouvez vérifier vos modules ici:

ng -v
@angular/cli: error
@angular/core: 4.3.6
@angular/compiler-cli: 4.3.6
node: 6.9.0
os: win32 ia32

Mon package.json contient sous la forme devDependencies "webpack": "^ 3.5.5" mais il n'y a pas de noeud_modules\webpack local. J'ai le module webpack dans mes modules globaux:

C:\Utilisateurs\profimedica\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\webpack

Mon erreur était:

Le paquet "@ angular/compiler-cli" n'a pas été installé correctement. Erreur:

Erreur: Impossible de trouver le module '@ angular/compiler-cli'

Erreur: Le paquet "@ angular/compiler-cli" n'était pas installé correctement. Erreur:

Erreur: Impossible de trouver le module '@ angular/compiler-cli' dans Object.

(C:\Utilisateurs\profimedica ** AppData **\Roaming\npm\node_modules\@angular\cli\node_modules ** @ ngtools\webpack **\src\index.js: 14: 8) à Module._compile (module .js: 570: 32)

Observez qu'il utilise le paquet global. J'essaie de l'installer localement:

npm install @ angular/cli @ 1.3.1

npm install @ ngtools/webpack @ 1.6.1

Il vous demandera les paquets manquants, le cas échéant:

npm WARN @ ngtools/webpack @ 1.6.1 nécessite un homologue de enhanced-resolve@^3.1.0 mais aucun n’a été installé.

npm WARN @ ngtools/webpack @ 1.6.1 requiert un homologue de webpack@^2.2.0 || ^ 3.0.0 mais aucun n’a été installé.

npm WARN [email protected] requiert un homologue de ajv @> = 5.0.0 mais aucun n’a été installé.

Donc, je devais les ajouter aussi.

npm install enhanced-resolve@^3.1.0
npm install webpack@^3.5.5
npm install [email protected]

Maintenant, le problème est que le module local n'est pas utilisé. Seul le global. Et l'erreur est la même. Même si j'ai Angular Cli installé:

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

Maintenant, mon application fonctionne bien:

PS C:\PRO\ANG\material\ag-grid\ag-grid-angular-seed\angular-cli> npm start
> [email protected] start C:\PRO\ANG\material\ag-grid\ag-grid-angular-vseed\angular-cli
> ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
2
profimedica

Avait le même problème sur une nouvelle installation angular 4, après avoir installé angular-cli quand je cours

ng serve

J'ai eu la même erreur. J'ai fait référence à lien de référentiel mis à jour et changé le compilateur, cli et noyau à 4.0. Cela a fonctionné pour moi.

1
Abel

J'ai résolu ce problème en exécutant npm i

1
orellabac

Je crée une nouvelle installation sur une machine Linux

@ angular/cli: 1.0.1 noeud: 6.10.2 os: linux x64

Après avoir créé de nouveaux angular 2 projets à l'aide de

ng new angularhellword

Projet créé avec succès mais lorsque j'exécute la commande

ng serve

Me donne ci-dessus même erreur comme indiqué ci-dessous

Le paquet "@ angular/compiler-cli" n'a pas été installé correctement.

Veuillez prendre les mesures suivantes pour éviter les problèmes:

"npm uninstall --save-dev angular-cli"

"npm install --save-dev @angular/cli@latest"

Cela fonctionne pour moi et le projet est exécuté avec succès.

1
Vijay Gajera

Après la mise à jour angular-cli, j'ai eu la même erreur et je l'ai corrigée en appelant npm install -g angular-cli au répertoire du projet. Après que la mise à jour angular-cli.json, change

"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

à

"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}
1
Eugene Kirin

J'ai pratiquement tout essayé sur mon Mac jusqu'à ce que je puisse le faire fonctionner:

> npm cache clean --force
> npm install
> ng serve
1
Gruber

Je pense que vous devez exécuter "npm install @ angular/compiler-cli --save".

1
Tommy Jiang

Vous devez mettre à jour votre package.json.
Doit changer la dépendance "TypeScript" pour fonctionner.
Dernières dépendances de travail pour angular-cli:
@ angular/cli: "1.0.0",
@ angular/compiler-cli: "^ 4.0.0",
TypeScript: "~ 2.2.0"
J'ai changé ces paramètres et a travaillé

1
Владимир Саакян

pour moi le problème était que j'avais créé un projet avec la cli mais pas changé dans ce répertoire avant d'essayer de le servir

1
SeanMC

J'ai eu ce problème avec une ancienne application Angular 2 et je l'ai résolu en procédant comme suit:

  1. J'ai créé un nouveau projet Angular 2 avec "ng serve DempApp"
  2. J'ai fait une copie de sauvegarde de mon ancien fichier package.json.
  3. J'ai ensuite comparé mon ancien fichier package.json avec le nouveau. J'ai remplacé les nouveaux blocs "dépendances" et "devDependencies" du nouveau package.json.

  4. J'ai ensuite édité l'ancien fichier angular-cli.json et remplacé le bloc "environnements" par le suivant, que j'ai copié à partir de la nouvelle application:

    "environmentSource": "environnements/environnement.ts", "environnements": {"dev": "environnements/environnement.ts", "prod": "environnements/environnement.prod.ts"}

0
Medhat Elmasry

Vérifiez que le paramètre 'node_modules/@ angular/cli' de votre projet local ne constitue pas un lien vers un 'module_noeud-global ...' global. Supprimez le dossier local (le lien symbolique) et appelez à nouveau "npm install".

Dans mon cas, il n'y avait pas de nouvel appel avec le paramètre '--link-cli'. Il me semble que ce paramètre ne fonctionnera pas comme prévu ou que je ne sais pas comment l'utiliser correctement.

0
tretyak

Cette erreur dans le titre de la question s’est produite en raison de la copie du projet existant et de l’exécution de ng serve. J'ai tout essayé ci-dessus, essayez juste votre nouvelle application, et essayez ci-dessous package.json - concentrez-vous sur la version angular-compiler, erreur ci-dessous résolue sur ma machine.

{
  "name": "orderflow2",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "webpack": "^3.2.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    ***"@angular/cli": "^1.2.0",
    "@angular/compiler-cli": "^4.0.0",***
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "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": "~3.0.4",
    "tslint": "~5.3.2",
    "TypeScript": "~2.3.3"
  }
}
0
HydTechie