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

Question

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)

Answer 1

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

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

Answer 2

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/cli@1.3.1

npm install @ngtools/webpack@1.6.1

It will ask for missing packages, if any:

npm WARN @ngtools/webpack@1.6.1 requires a peer of enhanced-resolve@^3.1.0 but none was installed.

npm WARN @ngtools/webpack@1.6.1 requires a peer of webpack@^2.2.0 || ^3.0.0 but none was installed.

npm WARN ajv-keywords@2.1.0 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 **

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

I've solve this issue via running npm i

Answer 7

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.

Answer 8

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.

Answer 9

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

Answer 10

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.

Answer 11

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

Answer 12

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/cli@1.0.0-rc.1 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.

Answer 13

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.

Answer 14

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

Answer 15

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

Answer 16

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.

Answer 17

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.

Answer 18

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

Answer 19

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

Answer 20

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",

Answer 21

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"

Answer 22

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