Angular components are removed after installing a new component

Question

I have an asp.net core web application with angular 5. I want to generate some Barcodes and let the user to print them. After searching I found ngx-barcode. A barcode component for Angular4+. As it says in its page I need install it using this command

$ npm install ngx-barcode –save

So at the node.js command prompt I run that command in my application directory. Like this:

E:\MyprojectDir\ npm install ngx-barcode –save

After getting some warning and at the end of the command execution I got the following message in command prompt:

Added 2 packages and removed 21 packages.

It seems it has been deleted all other node packages from my project. And now there are no reference to angular/core, angular/forms and others package in my project.

This is the content of my package.json file:

{
    "name": "",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng", 
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "postinstall": "webpack --config webpack.config.vendor.js"
    },
    "private": true,
    "dependencies": {
        "@angular/cli": "1.5.0",
        "@angular/compiler-cli": "^5.0.0",
        "@angular/language-service": "^5.0.0",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "~6.0.60",
        "codelyzer": "~3.2.0",
        "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.2.0",
        "tslint": "~5.7.0",
        "typescript": "~2.4.2",
        "@angular/animations": "^5.0.0",
        "@angular/common": "^5.0.0",
        "@angular/compiler": "^5.0.0",
        "@angular/core": "^5.0.0",
        "@angular/forms": "^5.0.0",
        "@angular/http": "^5.0.0",
        "@angular/platform-browser": "^5.0.0",
        "@angular/platform-browser-dynamic": "^5.0.0",
        "@angular/platform-server": "^5.0.0",
        "@angular/router": "^5.0.0",
        "@ngtools/webpack": "1.5.0",
        "@types/webpack-env": "1.13.0",
        "angular2-template-loader": "0.6.2",
        "aspnet-prerendering": "^3.0.1",
        "aspnet-webpack": "^2.0.1",
        "awesome-typescript-loader": "3.2.1",
        "bootstrap": "3.3.7",
        "css": "2.2.1",
        "css-loader": "0.28.4",
        "es6-shim": "0.35.3",
        "event-source-polyfill": "0.0.9",
        "expose-loader": "0.7.3",
        "extract-text-webpack-plugin": "2.1.2",
        "file-loader": "0.11.2",
        "html-loader": "0.4.5",
        "isomorphic-fetch": "2.2.1",
        "jquery": "3.2.1",
        "json-loader": "0.5.4",
        "preboot": "4.5.2",
        "raw-loader": "0.5.1",
        "reflect-metadata": "0.1.10",
        "rxjs": "5.4.2",
        "style-loader": "0.18.2",
        "to-string-loader": "1.1.5",
        "url-loader": "0.5.9",
        "webpack": "2.5.1",
        "webpack-hot-middleware": "2.18.2",
        "webpack-merge": "4.1.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@angular/cli": "1.5.0",
        "@angular/compiler-cli": "^5.0.0",
        "@angular/language-service": "^5.0.0",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "~6.0.60",
        "codelyzer": "~3.2.0",
        "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.2.0",
        "tslint": "~5.7.0",
        "typescript": "~2.4.2",
        "@types/chai": "4.0.1",
        "chai": "4.0.2",
        "karma-chai": "0.1.0",
        "karma-webpack": "2.0.3"
    }
}

It's so nice of you to help me.

What npm installs and uninstalls depends entirely on your package.json file. What does it contain? — JB Nizet, Jun 10 '18 at 11:46
It contains a hundred lines. could you please tell what should I write inside it to prevent removing existing packages? — Vahid Ghadiri, Jun 10 '18 at 11:53
I don't know how this file ended up like this, but it's messed up: all your dependencies have been replaced by the dev dependencies. Look into your git history to get back the correct file, or simply recreate an angular project from scratch, and use the package.json that the CLI generates. — JB Nizet, Jun 10 '18 at 12:13
The file is generated automatically by asp.net core spa template. any way thanks @JBNizet for your time. — Vahid Ghadiri, Jun 10 '18 at 12:28
@fatemefazli thanks. It solved my problem. after running the command I got this error "Version of @angular/compiler-cli needs to be 2.3.1 or greater. Current version is "5.1.0". that it was solved too by using this solution https://stackoverflow.com/questions/47762846/update-to-angular-5-throws-version-of-angular-compiler-cli-needs-to-be-2-3-1-or?rq=1. Anyway if you post your comment as an answer I'll accept it. — Vahid Ghadiri, Jun 27 '18 at 10:29
@VahidGhadiri your welcome Vahid. in this type of errors always ```npm install``` again will give us a good clue where the main problem is. — Fateme Fazli, Jun 27 '18 at 10:41

score 1 · Accepted Answer · answered Jun 27 '18 at 10:41

in this type of errors always npm install again will give us a good clue where the main problem is. and based on @VahidGhadiri mentioned ,next step:

npm install --save-dev @ngtools/webpack@latest

for resolving

error "Version of @angular/compiler-cli needs to be 2.3.1 or greater. Current version is "5.1.0"

Angular components are removed after installing a new component

1 Answers1