Angular components are removed after installing a new component - node.js

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.

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"

Related

ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.3.0 but 3.9.10 was found instead

ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.3.0 but 3.9.10 was found instead.
I am using
{
"name": "testUI",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"prod": "ng build --prod --build-optimizer",
"test": "ng test",
"lint": "ng lint > lintError.txt",
"e2e": "ng e2e",
"cli": "npm install --save #angular/cli#latest",
"whitesource": "whitesource run"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.0.7",
"#angular/cdk": "^6.4.6",
"#angular/common": "^6.0.7",
"#angular/compiler": "^7.2.12",
"#angular/core": "^7.0.2",
"#angular/forms": "^6.0.7",
"#angular/http": "^6.0.7",
"#angular/material": "^6.4.6",
"#angular/platform-browser": "^6.0.7",
"#angular/platform-browser-dynamic": "^6.0.7",
"#angular/router": "^6.0.7",
"#ngx-translate/core": "^11.0.0",
"#ngx-translate/http-loader": "^3.0.1",
"angular2-busy": "^2.0.4",
"angular5-csv": "^0.2.11",
"chart.js": "2.9.4",
"core-js": "^2.5.7",
"date-and-time": "^0.14.2",
"hammerjs": "^2.0.8",
"primeicons": "^1.0.0-beta.10",
"primeng": "^6.1.5",
"rxjs": "6.3.3",
"zone.js": "^0.8.27"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.6.8",
"#angular/cli": "^7.1.4",
"#angular/compiler-cli": "^7.2.12",
"#angular/language-service": "^6.0.7",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^8.9.5",
"codelyzer": "~4.2.1",
"jasmine": "^3.2.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-firefox-launcher": "^1.1.0",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.2",
"rxjs-compat": "^6.2.1",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "^3.2.0"
}
My angular core version was 6 I want to upgrade to 7. So i updated few components like core, compiler to version 7. and I am facing this issue for TypeScript. I am giving typescript version as 3.2.0 but in my package-lock.json it is coming as 3.9.10.

Ng serve is working but ionic serve is failing

I'm building an app using Ionic 6.19.0 and it suddenly started to face building issues.
I get Error: spawn UNKNOWN each time I execute ionic serve.
This is my package.json file
{
"name": "stile",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-devkit/schematics": "^13.3.3",
"#angular/common": "~13.0.0",
"#angular/core": "~13.0.0",
"#angular/forms": "~13.0.0",
"#angular/platform-browser": "~13.0.0",
"#angular/platform-browser-dynamic": "~13.0.0",
"#angular/router": "~13.0.0",
"#auth0/angular-jwt": "^5.0.2",
"#capacitor/android": "3.4.3",
"#capacitor/app": "1.1.0",
"#capacitor/camera": "^1.3.1",
"#capacitor/core": "3.4.0",
"#capacitor/haptics": "1.1.4",
"#capacitor/keyboard": "1.2.1",
"#capacitor/status-bar": "1.0.7",
"#ionic/angular": "^6.0.0",
"#npmcli/node-gyp": "^2.0.0",
"bootstrap": "^5.1.3",
"install": "^0.13.0",
"jquery": "^3.6.0",
"json-server": "^0.17.0",
"node-sass": "^7.0.1",
"npm": "^8.6.0",
"rxjs": "~6.6.0",
"tslib": "^2.3.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.3.3",
"#angular-eslint/builder": "^12.2.1",
"#angular-eslint/eslint-plugin": "~13.0.1",
"#angular-eslint/eslint-plugin-template": "~13.0.1",
"#angular-eslint/template-parser": "~13.0.1",
"#angular/cli": "~13.0.1",
"#angular/compiler": "~13.0.0",
"#angular/compiler-cli": "~13.0.0",
"#angular/language-service": "~13.0.0",
"#capacitor/cli": "3.4.0",
"#ionic/angular-toolkit": "^6.1.0",
"#popperjs/core": "^2.11.5",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"#typescript-eslint/eslint-plugin": "5.3.0",
"#typescript-eslint/parser": "5.3.0",
"acorn": "^8.7.0",
"ajv": "^6.12.6",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.4.4"
},
"description": "An Ionic project"
}
Here are few solutions that might help:
Ensure you're in the root folder of your project.
Try fixing the existing node_modules folder with npm rebuild + reassign
permissions to your node_modules folder: chmod 755 -R
/path/to/node_modules
Remove node_modules and reinstall with npm install

Error While Configure Jest With anglular 6

I create the angualr Project with following Configuration and Try use jest the install
package.json file is follwing:
{
"name": "angular-assessment",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "jest",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"3d-force-graph": "^1.56.5",
"#angular/animations": "^6.1.0",
"#angular/cdk": "^6.1.0",
"#angular/common": "^6.1.0",
"#angular/compiler": "^6.1.0",
"#angular/core": "^6.1.0",
"#angular/forms": "^6.1.0",
"#angular/http": "^6.1.0",
"#angular/platform-browser": "^6.1.0",
"#angular/platform-browser-dynamic": "^6.1.0",
"#angular/router": "^6.1.0",
"#ckeditor/ckeditor5-angular": "^1.1.0",
"#ckeditor/ckeditor5-build-classic": "^12.4.0",
"#gustafguner/angular-tooltip": "^1.0.0",
"#ng-bootstrap/ng-bootstrap": "^4.1.3",
"circular-json": "^0.5.9",
"core-js": "^2.5.4",
"event-stream": "^4.0.1",
"gojs": "^2.1.12",
"gulp-cli": "^2.2.0",
"gulp-replace": "^1.0.0",
"gulp-util": "^3.0.8",
"microsoft-adal-angular6": "^1.3.0",
"ngx-color": "^4.0.0",
"ngx-color-picker": "^7.5.0",
"ngx-contextmenu": "^5.2.0",
"ngx-draggable-widget": "^1.0.7",
"ngx-image-zoom": "^0.3.4",
"ngx-order-pipe": "^2.0.2",
"ngx-toggle-switch": "^2.0.5",
"ngx-ui-loader": "^7.2.2",
"rxjs": "~6.2.0",
"sp-pnp-js": "^3.0.10",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.8.0",
"#angular/cli": "~6.2.5",
"#angular/compiler-cli": "^6.1.0",
"#angular/language-service": "^6.1.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/jest": "^26.0.23",
"#types/node": "~8.9.4",
"codelyzer": "~4.3.0",
"gulp": "^4.0.2",
"gulp-spsave": "^3.1.1",
"husky": "^4.2.5",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"jest": "^27.0.4",
"jest-preset-angular": "^9.0.4",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"lint-staged": "^10.2.11",
"prettier": "2.0.5",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.9.2"
},
"jest": {
"preset": "jest-preset-angular",
"setupTestFrameworkScriptFile": "<rootDir>/setupJest.ts"
}
}
setupJest.ts File Contain following code:
import 'jest-preset-angular';
geeting this error while npm test
Error: Cannot find module '#angular/compiler-cli/src/ngtsc/reflection'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
I follow this Links:
1]https://timdeschryver.dev/blog/integrate-jest-into-an-angular-application-and-library
2]https://www.amadousall.com/how-to-set-up-angular-unit-testing-with-jest/
All of your packages are very old and out of date, this is causing you many problems. You can hover over each package and update them to the current version of Angular which is 12, you are on AngularJS for angular-build and the rest angular 6.
So what I would do if I was you is install them individually or generate a new angular application. this is end of life end of support according to Google right now because LTS expired three years ago plus.
before you do that update angular
npm uninstall #angular/cli -g
npm install #angular/cli -g
ng n angularjesttest
cd angularjesttest
then reinstall each package from npm as the current platform version, this is the problem with older packages.

Cannot find module 'aproba'

I have nodejs version 10.15.0 and Angular CLI version 1.7.3 and Angular version 5.2.9 but when I am trying install any npm packages or trying to update the npm,
it is showing throwing the below error: my code
My package.json file is:
{
"name": "so-portal-rwd",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.2.11",
"#angular/cdk": "^5.2.5",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.5.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"#angular/service-worker": "^6.0.5",
"#ng-idle/core": "^2.0.0-beta.15",
"#ng-idle/keepalive": "^2.0.0-beta.15",
"adal-angular5": "^1.0.36",
"angular-user-idle": "^1.1.0",
"angular-webstorage-service": "^1.0.2",
"angular2-draggable": "^1.4.2",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"crypto-js": "^3.1.9-1",
"hammerjs": "^2.0.8",
"marked": "^0.4.0",
"mat-video": "^2.5.1",
"ng2-dnd": "^5.0.2",
"ng2-file-upload": "^1.3.0",
"ng2-pdf-viewer": "^5.1.0",
"ngx-carousel": "^1.3.5",
"ngx-webstorage": "^3.0.2",
"ngx-webstorage-service": "^4.0.1",
"npm": "^6.5.0",
"rxjs": "^5.5.6",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular-devkit/core": "^0.5.13",
"#angular/cli": "~1.7.3",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/marked": "^0.4.0",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.0",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
Try:
npm install --save aproba
If it still didn't work try cleaning cache and installing again:
npm cache clean --force
npm install --save aproba

Datepicker Material Design Angular 5 - opens empty windows

See the behavior -
https://drive.google.com/file/d/1NG-CdTq3EgjDX8kc8VOSkPimYOzjdFSA/view
When I resize the browser it shows the content of mat-calendar, but initialy it is blank.
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
MatDatepickerModule and MatNativeDateModule imported..
Package.json dependencies
"private": true,
"dependencies": {
"#angular/animations": "^6.0.7",
"#angular/cdk": "^5.2.5",
"#angular/common": "6.0.7",
"#angular/compiler": "6.0.7",
"#angular/core": "6.0.7",
"#angular/flex-layout": "^6.0.0-beta.16",
"#angular/forms": "6.0.7",
"#angular/http": "6.0.7",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "6.0.7",
"#angular/platform-browser-dynamic": "6.0.7",
"#angular/router": "6.0.7",
"angular-bootstrap-md": "^6.0.1",
"angularfire2": "^5.0.0-rc.6",
"bootstrap": "^4.1.1",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"firebase": "4.12.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"ng4-geoautocomplete": "^0.1.0",
"ngx-toastr": "^8.8.0",
"promise-polyfill": "7.1.2",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"rxjs-tslint": "^0.1.5",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.0.8",
"#angular/compiler-cli": "6.0.7",
"#angular/language-service": "6.0.7",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"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": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "2.7.2",
"#angular-devkit/build-angular": "~0.6.8"
}
}
Why isn't it working?
What should I change adjust?
I am also working with MDBootsrap, can it be the problem?
Update
Updated a bit the package.json
It was a bit of a straggle to make things work again so use with cautious.
{
"name": "kai.starter",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve ",
"start-prod": "ng serve --aot --prod --configuration production",
"build": "ng build --aot --prod --configuration production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.0.7",
"#angular/cdk": "^5.2.5",
"#angular/common": "6.0.7",
"#angular/compiler": "6.0.7",
"#angular/core": "6.0.7",
"#angular/flex-layout": "^6.0.0-beta.16",
"#angular/forms": "6.0.7",
"#angular/http": "6.0.7",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "6.0.7",
"#angular/platform-browser-dynamic": "6.0.7",
"#angular/router": "6.0.7",
"#ng-bootstrap/ng-bootstrap": "^3.0.0",
"#ngrx/store": "^6.0.1",
"#ngrx/store-devtools": "^6.0.1",
"angularfire2": "^5.0.0-rc.7",
"bootstrap": "^4.1.1",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"firebase": "4.12.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"ng-bootstrap": "^1.6.3",
"ng4-geoautocomplete": "^0.1.0",
"ngx-geoautocomplete": "^0.1.1",
"ngx-toastr": "^8.8.0",
"promise-polyfill": "7.1.2",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",
"rxjs-tslint": "^0.1.5",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.0.8",
"#angular/compiler-cli": "6.0.7",
"#angular/language-service": "6.0.7",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"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": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "2.7.2",
"#angular-devkit/build-angular": "~0.6.8"
}
}
It started working suddenly without specific explanation what was the problem ..
I've also removed the mdbootsrap from the project, but it worked well before that as well.

Resources