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

• Ahmed Musallam: is your @angular/compiler-cli set to version 4? matching the other angular dependencies? have you tried removing your project's node_modules folder then npm-install?
• Ahmed Musallam: I just tried on my local, I can reproduce this error if I downgrade typescript to less than 2.1.0 version. Please update to typescript 2.2.0 and your issue will be resolved.
• Jan Nielsen: Indeed, @AhmedMusallam; after the changes in the answer below, everything works! :D
• Ahmed Musallam: ah ok, did not realize you answered your own question :) please accept it when you can, I know you have to wait 24 hours or something :)

Answer 1

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

• BobbyTables: thanks mate, helpful approach with the dummy project

Answer 2

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.

• Amanda_Panda: This was by far the easiest solution to this problem, and it worked!

Answer 3

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 4

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 5

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.

• Jan Nielsen: Welcome to SO, Jim. It looks like the second part of your answer "similar problem on two different Windows 10 machines" is a separate problem (despite having the same solution: npm install) which should be a separate SO question.

Answer 6

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

Answer 7

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 8

This worked Like Magic

npm install --save-dev del

Answer 9

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 10

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