Versions of @angular/compiler-cli and typescript could not be determined

Question

I have installed Angular/cli and then try to run command ng serve then below error is throwing. I have tried lot of thing like uninstall angular/cli, npm cache clean, etc

Versions of @angular/compiler-cli and typescript could not be determined. The most common reason for this is a broken npm install.

Please make sure your package.json contains both @angular/compiler-cli and typescript in devDependencies, then delete node_modules and package-lock.json (if you have one) and run npm install again.

Answer 1

This may be a problem in not implicitly running devDependencies.

Try running them implicitly with the command below.

npm install --dev

Answer 2

Generic way out to escape this issue

1. Create a new project

   ng new angular-seed

2. Copy all the default dependencies and dev-dependenices from package.json to your current project in use (angular, typescript, etc...)

3. Then remove node_modules and run install npm packages of your current project, or whatever method you use to reubild

   rm -fr node_modules npm install

note: if this doesn't get you the latest version, then you may have global tools installed in roaming data (in window explored browser type %appdata%, and navigate to npm to observe)

Answer 3

1. Open the command prompt in your project folder.

2. Run the command.

 npm install --only=dev

Answer 4

By default, npm install will install all modules listed as dependencies. With the --production flag, npm will not install modules listed in devDependencies. either we can go

First Way

for editing the dependency part in package.json by adding it with relevant version

    "dependencies": {
    /*existing part */

     "@angular/cli": "1.5.2",
    "@angular/compiler-cli": "^5.0.0",
    "typescript": "^2.4.2"
    }

Second Way

To install dev dependencies, npm --production=false install will work even with NODE_ENV=production.

Or you can run NODE_ENV=development npm install

for more details click to know more

Answer 5

In the case of deployment, it is a good idea to add a preinstall script to address these gaps in dependencies:

"preinstall": "npm install @angular/cli @angular/compiler-cli typescript"

Answer 6

First, for prevent, update angular

npm install -g @angular/cli

Second, also the run "npm install", you must install dev dependencies

npm install --dev

verify dependencies are without error

ng --version

Answer 7

Could you check that your "@angular/compiler" in your dependencies is compatible with angular/cli version.

For example :

  "devDependencies": {
    "@angular/cli": "1.4.8",
    "@angular/compiler-cli": "4.4.6",

is compatible with :

"@angular/compiler": "4.4.6",

Answer 8

Please run the command

npm --production=false install

in your terminal. Also note that you should be in your project folder while executing this.

Answer 9

Actually the real problem is with npm.

If its downloading as --legacy-bundling=true (Which is by default) then you will have this issue. If you see node_modules folder all the dependent modules would be nested.

When you run npm install command you should set --legacy-bundling=false

npm install --legacy-bundling=false

Now if you see node_modules folder no any module would be nested. And everything will work.

You can set npm default behaviour using following command, then you will not have to set every time.

npm set --legacy-bundling=false

Answer 10

I came across this issue when I was installing npm dependencies on Jenkins. I had @angular/compiler-cli in devDependencies and typescript in dependencies and NODE_ENV=production in the environment.

I tried NODE_ENV=development npm install and it worked for me.

For more details see this : https://github.com/angular/angular-cli/issues/8407

Answer 11

Also check these dependencies package.json:

...
"@angular/cli": "x.x.x",
"@angular/compiler": "^y.y.y",
"@angular/compiler-cli": "^z.z.z",
"typescript": "^t.t.t"
...

Hope this helps...