Error: "@anuglar/compiler-cli" package was not properly installed

Question

New to Angular and taking over a project started by another developer. I have installed Angular and also executed npm install but I keep getting "@anuglar/compiler-cli" package was not properly installed. Here's what I tried so far:

1. (a) npm install -g typescript and then (b) npm install - No luck on "ng serve"
2. (a) npm uninstall --save-dev angular-cli (b) npm install --save-dev @angular/cli@latest; - No luck on "ng serve"

Terminal Error:

Error: The "@angular/compiler-cli" package was not properly installed.
    at Object.<anonymous> (/Users/Jack/Documents/Github/t-dashboard/node_modules/@ngtools/webpack/src/index.js:14:11)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/Jack/Documents/Github/t-dashboard/node_modules/@angular/cli/tasks/eject.js:10:19)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)

Package.json

{
  "name": "genesis-ui",
  "version": "1.5.11",
  "description": "Bootstrap 4 Admin Template",
  "author": "",
  "url": "https://genesisui.com",
  "copyright": "Copyright 2016 creativeLabs Łukasz Holeczek",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.2.3",
    "@angular/compiler": "2.2.3",
    "@angular/core": "2.2.3",
    "@angular/forms": "2.2.3",
    "@angular/http": "2.2.3",
    "@angular/platform-browser": "2.2.3",
    "@angular/platform-browser-dynamic": "2.2.3",
    "@angular/router": "3.2.3",
    "@angular/upgrade": "2.2.3",
    "@types/lodash": "4.14.40",
    "angular-calendar": "0.4.0",
    "angular2-datatable": "0.5.2",
    "angular2-ladda": "^1.0.6",
    "angular2-moment": "^1.1.0",
    "angular2-toaster": "1.0.2",
    "chart.js": "^2.3.0",
    "core-js": "^2.4.0",
    "date-fns": "1.10.0",
    "moment": "^2.17.0",
    "ng2-bootstrap": "^1.1.16",
    "ng2-charts": "^1.4.4",
    "ng2-select": "^1.1.2",
    "ng2-timeago": "^1.0.6",
    "rxjs": "5.0.0-rc.4",
    "ts-helpers": "^1.1.2",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@types/jasmine": "^2.5.37",
    "codelyzer": "1.0.0-beta.4",
    "jasmine-core": "^2.5.2",
    "jasmine-spec-reporter": "2.7.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.11",
    "ts-node": "1.7.0",
    "tslint": "4.0.2",
    "typescript": "2.3.4"
  }
}

Update 1

Thx for the reply, but still running into the same issue. Here's the command I used:

1. npm i -S @angular/compiler-cli -> Which added "dependencies":{.., "@angular/compiler-cli": "^4.2.3",...} in package.json
2. npm i -D @angular/cli-> Which added "devDependencies":{..., "@angular/cli": "^1.1.2",...}
3. npm install -> Still getting the same error - "The "@angular/compiler-cli" package was not properly installed."
4. Thought I'd try to install complier-cli to devDependency. npm i -S @angular/compiler-cli -> Which added "devDependencies":{..., "@angular/compiler-cli": "^1.1.2",...} and then npm install.

Update 2

On npm install, I see some warning during the execution. Any idea on what the warning is all about? npm WARN @angular/compiler-cli@4.2.3 requires a peer of @angular/compiler@4.2.3 but none was installed. npm WARN @angular/compiler-cli@4.2.3 requires a peer of @angular/core@4.2.3 but none was installed. npm WARN @angular/core@2.2.3 requires a peer of rxjs@5.0.0-beta.12 but none was installed. npm WARN @angular/core@2.2.3 requires a peer of zone.js@^0.6.21 but none was installed. npm WARN @angular/http@2.2.3 requires a peer of rxjs@5.0.0-beta.12 but none was installed. npm WARN @angular/router@3.2.3 requires a peer of rxjs@5.0.0-beta.12 but none was installed. npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-alpha.26 requires a peer of @angular/core@^4.0.3 but none was installed. npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-alpha.26 requires a peer of @angular/common@^4.0.3 but none was installed. npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-alpha.26 requires a peer of @angular/forms@^4.0.3 but none was installed. npm WARN angular2-ladda@1.2.1 requires a peer of @angular/core@^4.0.0 but none was installed. npm WARN angular2-toaster@1.0.2 requires a peer of rxjs@5.0.0-beta.12 but none was installed. npm WARN codelyzer@1.0.0-beta.4 requires a peer of tslint@^3.9.0 but none was installed. npm WARN ng2-bootstrap@1.6.3 requires a peer of @angular/common@^2.3.1 || >=4.0.0 but none was installed. npm WARN ng2-bootstrap@1.6.3 requires a peer of @angular/compiler@^2.3.1 || >=4.0.0 but none was installed. npm WARN ng2-bootstrap@1.6.3 requires a peer of @angular/core@^2.3.1 || >=4.0.0 but none was installed. npm WARN ng2-bootstrap@1.6.3 requires a peer of @angular/forms@^2.3.1 || >=4.0.0 but none was installed. npm WARN ng2-charts@1.6.0 requires a peer of @angular/common@^2.3.0 || >=4.0.0 but none was installed. npm WARN ng2-charts@1.6.0 requires a peer of @angular/core@^2.3.0 || >=4.0.0 but none was installed. npm WARN ng2-select@1.2.0 requires a peer of @angular/common@^2.3.0 but none was installed. npm WARN ng2-select@1.2.0 requires a peer of @angular/core@^2.3.0 but none was installed.

Still the same error. Any other suggestions? Thanks in advance.

Answer 1

I am getting the same error The "@angular/compiler-cli" package was not properly installed.

Here are the couple of things I tried

1.Remove node_modules and run npm install
2.Installing latest version of typescript
3.Re-install cli npm install --save-dev @angular/cli@latest

Answer 2

I am relatively new to Angular, node.js and npm, so I'm not saying that this is a good solution, but I had a very similar problem with very similar errors that I solved the following way (after hours of experiments)

"dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/common": "^4.1.3",
    "@angular/compiler": "^4.1.3",
    "@angular/core": "^4.1.3",
    "@angular/forms": "^4.1.3",
    "@angular/http": "^4.1.3",
    "@angular/platform-browser": "^4.1.3",
    "@angular/platform-browser-dynamic": "^4.1.3",
    "@angular/router": "^4.1.3",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.1",
    "webpack": "^2.6.1",
    "zone.js": "^0.8.12"
}
    "devDependencies": {
    "@angular/cli": "1.1.1",
    "@angular/compiler-cli": "^4.1.3",
    "@types/jasmine": "2.5.51",
    "@types/node": "~7.0.29",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.3",
    "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.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~3.0.6",
    "tslint": "~5.4.3",
    "typescript": "~2.3.4"
}

1. I removed the content of node_modules.
2. run npm install which failed.
3. run npm outdated which showed all of the dependencies as MISSING
4. Installed latest rxjs (upgrade from 5.4.0)
5. Installed all of the @angular dev dependencies manually matching the version (4.1.3)
6. Installed the rest of dev dependencies in this order: zone.js, core-js, webpack and bootstrap also matching versions (seems like order mattered)
7. Run npm outdated which showed all the packages installed
8. Run ng build which failed
9. Run npm r @angular/compiler-cli -D to remove it from dev dependencies. Had to do it twice, as the first time failed, but it seems like (that failed time) added lots of dependencies in node_modules
10. Run npm i @angular/compiler-cli@4.1.3 -D to add it to my dev dependencies
11. Successfully run ng build

Answer 3

Packages were out of data:

npm i -g npm-check-updates
npm-check-updates -u
npm install

(How do I update each dependency in package.json to the latest version?) ... and then

npm install npm -g

(https://github.com/Urigo/angular-meteor/issues/1381)

Thanks everyone for the help!

Answer 4

add below dependencies in the dependencies array

    "@angular/cli": "1.0.0",

and re run npm install and ng serve.

Answer 5

You are missing compiler cli package, just re-install it

npm i -S @angular/compiler-cli

Your package.json seems to be missing angular cli in dev dependencies too, so do

npm i -D @angular/cli