Angular2 CLI error "@ angular / compiler-cli" has not been installed correctly

Question

I am working on an Angular 2 project. Now, trying to install the Angular CLI in the current project with the following

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

Problem starting ng serve I get an 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

There is a problem with the version

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

Try installing an older one

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

Answer 2

I had the same problem. I resolved it after the “Angular CLI Update” process on the npm @ angular / cli page , that is:

1. Removal and cleaning (global)

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

2. Reinstallation and playback (global)

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

It worked for me.

Answer 3

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

Step 1: install npm -g @ angular / cli @ last
Step 2: new project name (ignore if the project has already been created)
Step 3: cd name-of-project (ignore if the project is 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 the project folder, type "npm install" and wait for the installation to complete, this fix works fine for me.

Answer 4

The same error can occur when upgrading to Angular 4 and not updating Typescript to version 2.1.0.

Answer 5

It absolutely sucked to work. To fix me, I had to do a few things ...

To get around the @angular/compiler-cli was not installed correctly , I had to make a @Ruzenhack solution, which was supposed to remove both global and local @angular/cli :

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

But, taking his advice on installing @angular/cli@latest , I left me with the same problem, which led me to @SergeyV's suggestion that I upgrade to an earlier version of cli . Personally, I had another project that worked with @angular/cli@1.0.0-rc.1 , so I decided to use it and install it both globally and in my package.json .

Success

BUT ...

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

Damn it.

So, I accepted this proposal from angular-cli github issues , which was supposed to update my typescript. So, throwing my version of typescript up to ^2.0.0 into package.json , I was greeted by the familiar and frustrated green ng serve output. At last.

Hope this helps someone.

Answer 6

I had the same problem. I rebooted my computer because Windows .. I still saw the same error message when I realized that I had not run npm install in the project yet, so I did it and solved 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 7

I took 10 hours of research from me to find this:

npm start

A long story to compare your research approach:

After several unsuccessful attempts, I reinstalled node and npm, and now I have:

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

Everything works great for new projects.

 ng new my-new-project 

But I have a compromised 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) 

Since I already have @ angular / cli installed, I just had to add it to the package.json file , using as an example the same file from a newly 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 selected 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 noticed that the folders are. \ node_modules \ @angular \ compiler-cli,. \ node_modules \ @angular \ compiler and. \ node_modules \ @angular \ core, where missing.

I installed as needed:

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

I added the log to the file and I see the detected version after installation:. \ 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 to. \ 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 an unexpected value:

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

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

 .\angular-cli.json 

After 3 hours of research and trying to create the missing files, I had to rethink the approach.

I removed the local @ angular module and reinstalled it 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 user architecture and I had to run npm start

Answer 8

I tried almost all the fixes on this issue. I also tried one of https://github.com/angular/angular-cli#updating-angular-cli . The same results. So I got into a mistake.

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

The error throwing function is the require function. Thus, the @angular/compiler-cli not in the current version. I tried the module identifier @angular/compiler , but it does not have VERSION . (i.e. undefined).

So, it looks like this is a bug that the angular team will have to solve.

Answer 9

You need to update your .json package.
You need to change the dependecy "typescript" to work.
Recent working dependencies for angular-cli:
@ angular / kli: "1.0.0",
@ angular / compiler-cli: "^ 4.0.0",
typescript: "~ 2.2.0"
I changed these settings and worked

Answer 10

Update typescript to the latest version using npm install -g typescript@latest find the version of the installed package with tsc -v

open package.json and change the typescript version from the latest and run it again.

Answer 11

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

Answer 12

Make sure your local project node_modules / @ angular / cli 'is not a reference to the global' node_modules ... '. Delete the local folder (symbolic link) and call "npm install" again.

In my case, it was an incorrect call to "ng new" with the parameter "-link-cli". It seems to me that this parameter does not work as expected, or I have no idea how to use it correctly.

Answer 13

I had this problem with an old Angular 2 application and solved it by following these steps:

• I created a new Angular 2 project with "ng serve DempApp"
• I made a backup of my old package.json file.
• Then I compared my old package.json file with the new one. I replaced the new “dependency” and “devDependencies” blocks from the new package.json.

• Then I edited the old angular-cli.json file and replaced the "environment" block with the following, which I copied from the new application:

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

Answer 14

After updating angular-cli, I got the same error, and I fixed it by calling npm install -g angular-cli in the project directory. After updating 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 am creating a new new installation on a Linux computer

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

After creating new angular 2 projects using

ng new angularhellword

The project was created successfully, but when I execute the command

ng serve

Gives me the same error as below

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

To avoid problems, follow these steps:

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

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

It works for me, and the project succeeds.

Answer 16

This error in the title of the question arose due to copying an existing project and trying to start the ng service. I tried everything above, just tried the new MyApp, and try below package.json - focus on the version of the angular compiler, below the 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 17

Was there the same problem when updating angular 4 after installing angular-cli on startup

ng serve

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

Answer 18

I solved this problem by running npm i

Answer 19

For me, the problem was that I created a project with a Kli, but was not changed to this directory before trying to service it.

Answer 20

DECIDED!!!

This error is not directly related to @ angular / compiler-cli , as it claims, but with @ angular / cli , which is misleading partially hard-coded and partially incomplete reported error. This really throws when the @ angular / compiler-cli version cannot be determined. But this module is fine.

Since I am new to Angular, moving from .NET and I did not expect so many problems from the start. So I started researching this one.

The error occurs when webpack cannot determine the @ angular / compiler-cli version in the 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); } 

Here you can check your modules:

 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 a webpack module in my global modules:

C: \ Users \ profimedica \ AppData \ Roaming \ NPM \ node_modules \ @angular \ Kli \ node_modules \ WebPack

My mistake:

The package "@ angular / compiler-cli" was installed incorrectly. Mistake:

Error: cannot find module '@ angular / compiler-cli'

Error: The package "@ angular / compiler-cli" was not installed correctly. Mistake:

Error: Cannot find the module ' @ angular / compiler-cli in the object.

(C: \ Users \ profimedica ** AppData ** \ Roaming \ NPM \ node_modules \ @angular \ Kli \ node_modules ** @ngtools \ WebPack ** \ SRC \ index.js: 14: 8) on Module._compile (module .js: 570: 32)

Please note that it uses a global package. I am trying to install it locally:

npm install @ angular/cli@1.3.1

npm install @ ngtools / webpack @ 1.6.1

It will request missing packages, if any:

npm WARN @ ngtools / webpack @ 1.6.1 requires the peer extension --resolve@^3.1.0, but none of them are installed.

npm WARN @ ngtools / webpack @ 1.6.1 requires peer-to-peer webpack@^2.2.0 || ^ 3.0.0, but no one has been installed.

npm WARN ajv-keywords@2.1.0 requires peer-to-peer connection ajv @> = 5.0.0, but none of them have been 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 in use. Only global. And the error is the same. Even if I have Angular Cli installed:

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

Now my application 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 21

I tried almost everything on my Mac until I got it to work:

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

Answer 22

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