Angular2 CLI error "@angular/compiler-cli" package was not properly installed

I'm working an Angular 2 project. Now trying to install Angular CLI within the current project with the following

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

Problem is when running ng serve I receive error

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)

I had the same problem. I resolved it following the "Updating Angular CLI" process in the npm @angular/cli page, that is:

1. Uninstall and clean (global)

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

2. Reinstall and play (global)

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

This worked for me.

I've tried everything in these answers and the only thing that worked for me was the following:

> Step 1: npm install -g @angular/cli@latest
Step 2: ng new name-of-project (ignore if project already created)
Step 3: cd name-of-project (ignore if project already created)
Step 4: npm install @angular/cli --save-dev
Step 5: npm install @angular/compiler-cli --save-dev
Step 6: ng serve

Tested these steps in two different environments

Inside of project folder, type "npm install" and wait the installation finishes, this fix works fine for me.

There is an issue with version

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

Try to install older one

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

This same error can also occur if you upgrade to Angular 4 and don't update Typescript to 2.1.0.

This absolutely sucked to work through. In order for me to fix it I had to do a few things...

To get around the @angular/compiler-cli was not installed correctly error, I had to take @Ruzenhack's solution, which was to remove both the global and local @angular/cli packages:

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

But taking his advice further to install @angular/cli@latest left me with the same problem, which led me to @SergeyV's suggestion that I downgrade to an older version of the cli. Personally, I had another project that was working with @angular/[email protected] so I decided to use that and install it globally as well as in my package.json.

Success.

BUT...

I was then given another error.... Cannot read property 'Private' of undefined

Dammit.

So I took this suggestion from the angular-cli github issues, which was to upgrade my typescript. So, throwing my typescript version to ^2.0.0 in package.json, I was greeted with the familiar and frustration-free green ng serve output. Finally.

I hope this helps someone out.

I took me 10 hours of investigatons to find this:

> npm start

The long story to let you compare your investigation approach:

After multiple failed attempts I reinstalled the node and npm and now I have:

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

All works fine for new projects

ng new my-new-project

But I have a compromized project that shows

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)

Because I already have @angular/cli installed globally, I just had to add it to the package.json file, using as example the same file from a new created project that works fine:

{
  "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"
  }
}

The second error is thrown from here because the @angular/compiler-cli module is not installed as a local module:

// 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);
}

I checked the node_modules folder and I observed that the folders .\node_modules@angular\compiler-cli, .\node_modules@angular\compiler and .\node_modules@angular\core where missing.

I installed as required:

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

I added a log to the file and I see detected version after install: .\node_modules@ngtools\webpack\src\index.js

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

Now I get a new error:

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)

To investigate this new issue I added a log line in .\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);
    }

And I got the unexpected value:

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

Obviously, this file is not in my home directory, instead of from the root of the project:

.\angular-cli.json 

After 3 hours of investigations and attempts to create the missing files I had to rethink the approach.

I deleted the local @angular module and reinstalled globally:

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

I found that my project has a custom architecture and I had to run npm start

I had the same problem. Restarted my pc, because Windows.. Was still seeing the same error message when I realized I hadn't run npm install on the project yet, so I did that and it resolved the problem.

Global angular CLI - version 1.0.0-rc.4

Local dependencies:

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

I have tried just about all the fixes in this question. I also tried the one at https://github.com/angular/angular-cli#updating-angular-cli . Same results. So I dug into the error.

I looked at the code at "node_modules/@ngtools/webpack/src/index.js:14:11". This is the same spot where it fails on my project. The line is version = require('@angular/compiler-cli').VERSION; This line throws the exception and logs the error The "@angular/compiler-cli" package was not properly installed.

The function throwing the error is the require function. So the @angular/compiler-cli module is not in the current release. I have tried the module identifier @angular/compiler but that does not have a VERSION. (i.e. undefined).

So looks like this is a bug the angular team will have to sort out.

Upgrade the typescript to the latest version with

npm install -g typescript@latest

find the version of installed package with

tsc -v

open package.json and change the typescript version with the latest one and start it again.

SOLVED !!!

This error is not directly related to @angular/compiler-cli as it claims, but to @angular/cli, a misleading partially hardcoded and partially incomplete reported error. It is thrown indeed when the version of @angular/compiler-cli can not be determined. But this module is fine.

As I am new in Angular, migrating from .NET and I did not expected so many issues from the beginning. So I started to investigate this one.

The error occure when webpack can not determine the version of @angular/compiler-cli in file 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);
}

You can check your modules here:

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

My package.json contains as devDependencies "webpack": "^3.5.5" but there is no local node_modules\webpack. I have the webpack module in my global modules:

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

My error was:

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.

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

Obsrve that it uses the global package. I try to install it localy:

>npm install @angular/[email protected]

>npm install @ngtools/[email protected]

It will ask for missing packages, if any:

npm WARN @ngtools/[email protected] requires a peer of enhanced-resolve@^3.1.0 but none was installed.

npm WARN @ngtools/[email protected] requires a peer of webpack@^2.2.0 || ^3.0.0 but none was installed.

npm WARN [email protected] requires a peer of ajv@>=5.0.0 but none was installed.

So, I had to add them too.

npm install enhanced-resolve@^3.1.0
npm install webpack@^3.5.5
npm install ajv@5.2.2

Now, the problem is that the local module is not used. Only the global one. And the error is the same. Even if I have Angular Cli installed:

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

Now my app works fine:

PS C:\PRO\ANG\material\ag-grid\ag-grid-angular-seed\angular-cli> npm start
> ag-grid-cli@0.0.0 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 **

I tried pretty much everything on my Mac until I got it to work with:

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

I think you need to run "npm install @angular/compiler-cli --save".

After update angular-cli I got the same error and I fixed it by call npm install -g angular-cli at project dir. After than update angular-cli.json, change

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

to

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

You need update your package.json.
Must change dependecy "typescript" to work.
Last working dependecies for angular-cli:
@angular/cli:"1.0.0",
@angular/compiler-cli:"^4.0.0",
typescript:"~2.2.0"
I changed this parameters and has worked

I create new fresh installation in Linux machine

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

After I create new angular 2 projects using

ng new angularhellword

Project successfully created but when I execute command

ng serve

Gives me above same error as shown below

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

Had the same issue on a fresh angular 4 installation, after installing angular-cli when I run

ng serve

I got the same error. I referred repository uptodate link and changed compiler,cli and core to 4.0. It worked for me.

I've solve this issue via running npm i

for me the issue was I had created a project with the cli but not changed into that directory before trying to serve it

Check that your local project's 'node_modules/@angular/cli' is not a link to global 'node_modules...'. Remove the local folder (the symlink) and call to 'npm install' again.

In my case it was wrong 'ng new' call with '--link-cli' parameter. It seems to me that this parameter wont work as expected or I have no idea how to use it correctly.

I had this issue with an older Angular 2 app and solved it by doing the following:

1. I created a new Angular 2 project with "ng serve DempApp"

2. I made a backup copy of my old package.json file.

3. I then compared my old package.json file with the new one. I replaced the new "dependencies" and "devDependencies" blocks from the new package.json.

4. I then edited the old angular-cli.json file and replaced the "environments" block with the following, which I copied from the new app:

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

This error in the question title occurred due to copy of existing project and try to run ng serve. I tried everything above, just try ng new YourApp, and try below package.json - focus on angular-compiler version, below resolved error on my 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"
  }
}

Use npm install -g @angular/cli command to install cli.