The "@angular/compiler-cli" package was not properly installed

Question

Upgrading my project to Angular 4.0 (from 2.4) with Angular CLI 1.0 (from beta.31), I get the error below after following the migration guide:

> ng build --prod

The "@angular/compiler-cli" package was not properly installed.
Error: The "@angular/compiler-cli" package was not properly installed.
    at Object.<anonymous> (/home/jan/src/fm-repos/fm-ui/node_modules/@ngtools/webpack/src/index.js:14:11)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/jan/src/fm-repos/fm-ui/node_modules/@angular/cli/tasks/eject.js:10:19)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)

My angular dependencies post-migration:

"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/compiler-cli": "^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",
"@angular/cli": "1.0.0",
"@angular/material": "2.0.0-beta.3",

Note: this similar question is about Angular 2 project: Angular2 CLI error "@angular/compiler-cli" package was not properly installed

Answer 1

Try these steps please: Clean up

remove node_modules from your project
remove any angular-cli and @angular/cli references from package.json if it's there
Uninstall angular-cli and @angular/cli globally: npm uninstall -g angular-cli @angular/cli

Reinstall

Install @angular/cli globally: npm install -g @angular/cli
Install @angular/cli in your project: npm install --save-dev @angular/cli

Answer 2

Open package.json and move @angular/cli under dependencies like:

"dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/cli": "1.2.1",
    "@angular/compiler-cli": "^4.3.1",
    "@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",
    "zone.js": "^0.8.4"
  },

Then go to project folder in command prompt and run the command "npm install". It will load all necessary dependencies.

Answer 3

This worked Like Magic

npm install --save-dev del

Answer 4

I just changed to "@angular/compiler-cli": "^4.3.2" from "@angular/compiler-cli": "^4.0.0" in devDependencies in package.json file.

It worked for me

Answer 5

I tried everything, and the only thing that worked for me was a simple npm install

Answer 6

For me none of the solutions above worked, but updating npm and typescript globally did.

To update, run these commands:

npm update

npm update -g typescript

Answer 7

npm uninstall -g angular-cli
rm -rf ./node_modules
rm package-lock.json
npm install --save-dev @angular/cli@latest

if installing the latest version still gives you an error you can run through the process again of uninstalling and manually enter the version of angular-cli after verifying the newest release in the angular-cli repo. My package.json listed ^1.3.0, but there was a beta version just released and when i manually changed it to

"@angular/cli": "^1.3.0-beta.0"    
npm i

It installed successfully

Answer 8

I create new fresh installation in Linux machine _ _ ____ _ _ / \ _ __ __ _ _ _| | __ _ _ __ / | | | | / △ \ | ' \ / _| | | | |/ _ | '| | | | | | | / \| | | | (| | || | | (| | | | || | | | // __| ||__, |__,||__,|| ____|_____|| |/ @angular/cli: 1.0.1 node: 6.10.2 os: linux x64

Aftere i create new angular 2 project using

ng new angularhellword

Project successfully created but when i execute command

ng serve

Given me above same error like

The "@angular/compiler-cli" package was not properly installed.

Please take the following steps to avoid issues:

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

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

It works for me and project run successfully.

Answer 9

Ensure you have TypeScript 2.2 in your package.json and ensure your tsconfig is properly updated.

Details:

With Angular CLI 1.0 installed, create a new dummy project:

ng new dummy

then remove the node_modules directories:

rm -rf ./dummy/node_modules
rm -rf ./myproject/node_modules

and diff the changes between the dummy project and your project:

diff -bur ./dummy/ ./myproject/

Of the many changes, the crucial change necessary to address this error for me was TypeScript and tsconfig changes:

package.json:

"typescript": "~2.0.3" ==> "typescript": "~2.2.0"

.angular-cli.json

Change:

"tsconfig": "tsconfig.json"

to:

"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",

and add these new files from your dummy project, and install your packages:

npm install

Answer 10

I had this same error message on my Mac running OS 10.12.4 when I was setting up Angular 2.

I also had a similar problem on two different Windows 10 machines. The windows machines received an error that stated,

    Node_modules appears empty, you may need to run `npm install`.

In both cases, I was able to solve the problem by running npm install within the project directory.

I went into the command line / terminal and then into the directory where the project was stored, e.g.:

    c:\Users\myname\projectname>

For Windows I used npm install command and in Mac I used sudo npm install.

In both cases it took care of the problem.