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

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 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.