I want to upgrade my application from angular4 to angular5. What changes do I need to make in package.json?
Here are my dependencies:
"dependencies": {
"#material/fab": "^0.28.0",
"#progress/kendo-angular-charts": "1.2.1",
"#progress/kendo-angular-dateinputs": "1.0.5",
"#progress/kendo-angular-dropdowns": "1.1.1",
"#progress/kendo-angular-excel-export": "1.0.3",
"#progress/kendo-angular-grid": "1.1.3",
"#progress/kendo-angular-inputs": "1.0.6",
"#progress/kendo-angular-intl": "1.2.1",
"#progress/kendo-angular-l10n": "1.0.2",
"#progress/kendo-data-query": "1.0.5",
"#progress/kendo-drawing": "1.1.1",
"angular-2-dropdown-multiselect": "1.5.4",
"angular-tree-component": "4.1.0",
"angular2-cool-storage": "3.1.0",
"core-js": "2.5.0",
"hammerjs": "2.0.8",
"mydatepicker": "2.0.27",
"ng-sidebar": "6.0.1",
"ng2-device-detector": "^1.0.0",
"ng2-dnd": "4.2.0",
"ng2-dropdown-treeview": "2.0.1",
"ng2-toasty": "4.0.3",
"ng2draggable": "1.3.2",
"ngx-bootstrap": "1.9.3",
"ngx-clipboard": "8.0.4",
"primeng": "4.1.3",
"rxjs": "5.4.3",
"typescript": "2.3.4",
"zone.js": "0.8.16"
}, "devDependencies": {
"#angular/cli": "1.3.0",
"#angular/compiler-cli": "4.3.4",
"#types/jasmine": "2.5.53",
"#types/node": "8.0.22",
"codelyzer": "3.2.0",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "1.7.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"karma-coverage-istanbul-reporter": "1.3.0",
"protractor": "5.1.2",
"ts-node": "3.3.0",
"tslint": "5.7.0",
"typescript": "2.5.2"
}
I would advice you, from my experince, to create a new project with the newest #angular/cli and copy your code there. It will be more easier than configuring angular 5, specially if you have ejected your project, because the webpack configurations are pretty different, and you will get a lot of wierd errors by just updating packages.
just follow this command
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
you have to upgrade your Angular CLI to avoid some conflict
this command gonna upgrade your global package
npm uninstall -g #angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean`
npm install -g #angular/cli#latest
and this command will upgrade your local package
rm -rf node_modules dist <-- in mac os
# use rmdir /S/Q node_modules dist <--- in Windows Command Prompt;
use rm -r -fo node_modules,dist <--- in Windows PowerShell
npm install --save-dev #angular/cli#latest
npm install
I used to upgrade project from angular 4 to angular 5, and i got a little bug cause i use some library that deprecate in angular 4,
so my suggestion is backup your project and try to upgrade it !!
Lol, hope your enjoy :)
P.S. i'm copy this code from somewhere and didn't save path sorry for didn't give a credit of this code
You can uninstall and Reinstall on that time you wants to give the
npm install #angular/Cli #5.2.9
Which version you need that's. Version
Then after Remove the nodemodules in project and then click
npm install
Then the package.json is automatically upgrades to 5
Related
The Vite doesn't work
Os:CentOs7
Laravel: 9.26.1
node: v16.17.0
npm: 8.15.0
I would like use new Laravel Project with React.js.
And try the plug-in Breeze for Authentication
I use the command
composer create-project laravel/laravel new-project
php artisan breeze:install
php artisan breeze:install react
npm install
npm run dev
At first all command successful complete , but when i use
npm run dev
the server told me
/tmp/dev-xxxxxx.sh: line 1: vite: command not found
and i try the solution
https://github.com/vitejs/vite/discussions/5432
and
https://github.com/vitejs/vite/issues/1215
that's all not work for me
this is package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#headlessui/react": "^1.4.2",
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-react": "^0.8.0",
"#inertiajs/progress": "^0.2.6",
"#tailwindcss/forms": "^0.5.2",
"#vitejs/plugin-react": "^2.0.0",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^0.27",
"laravel-vite-plugin": "^0.5.0",
"lodash": "^4.17.19",
"postcss": "^8.4.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwindcss": "^3.1.0"
},
"dependencies": {
"vite": "^3.0.9"
}
}
How should I do to resolve this question？
I find the question
i type before npm install
npm config set bin-links false
because CentOs7 have sym link error(bin-link to my laptop)
that can not install complete
so i should set bin-links to true
and
npm install vite
it's would solve the problem
What is essential difference between these commands, except that npm update modify package.json?
rm package-lock.json
npm install
npm update --dev
In package-lock.json basically the indirect dependencies are locked. The indirect dependencies mean those dependencies, that are not specified in the package.json of your project but they are the dependencies of your dependencies.
When npm update --dev is called some dependencies are updated in the package.json. After the entries are updated an install is called, this install updates in package-lock.json those thirdparties that are in connection with the modified ones in the package.json. This means that both the direct and indirect dependencies are updated in the package-lock.json. But only for those, that were modified in package.json.
The thirdparties that remained the same in the package.json won't be touched in the package-lock.json. (Both direct and indirect dependencies of them remain the same.)
When rm package-lock.json and npm install is called, then the information is lost about the indirect dependencies with the removing of the package-lock.json. As npm install is called, a new package-lock.json is generated and the indirect dependencies could be changed for all of your dependencies.
Let's see an example for this.
In package-lock.json we have an indirect dependency the tslib: 1.9.0.
"tslib": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
"integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ=="
},
The tslib is a dependency of all Angular modules, that are specified directly in thepackage.json:
"dependencies": {
"#angular/animations": "8.2.12",
"#angular/cdk": "~8.2.3",
"#angular/common": "8.2.12",
"#angular/compiler": "8.2.12",
"#angular/core": "8.2.12",
"#angular/flex-layout": "^8.0.0-beta.27",
"#angular/forms": "8.2.12",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "8.2.12",
"#angular/platform-browser-dynamic": "8.2.12",
"#angular/platform-server": "8.2.12",
"#angular/router": "8.2.12",
"#nguniversal/module-map-ngfactory-loader": "8.1.1",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.3.1",
"core-js": "^2.6.5",
"hammerjs": "^2.0.8",
"jquery": "3.4.1",
"oidc-client": "^1.9.0",
"popper.js": "^1.14.3",
"rxjs": "^6.4.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.800.6",
"#angular/cli": "8.3.18",
"#angular/compiler-cli": "8.2.12",
"#angular/language-service": "8.2.12",
"#types/jasmine": "~3.3.9",
"#types/jasminewd2": "~2.0.6",
"#types/node": "~11.10.5",
"codelyzer": "^5.0.1",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.5",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"typescript": "3.4.5"
},
"optionalDependencies": {
"node-sass": "^4.9.3",
"protractor": "~5.4.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
If we call npm update --dev, following changes are done:
+ bootstrap#4.5.0
+ core-js#2.6.11
+ popper.js#1.16.1
+ karma-jasmine-html-reporter#1.5.4
+ karma-coverage-istanbul-reporter#2.0.6
+ codelyzer#5.2.2
+ karma#4.4.1
+ #types/jasmine#3.3.16
+ #types/jasminewd2#2.0.8
+ oidc-client#1.10.1
+ rxjs#6.5.5
We can see, that in the package.json the Angular dependencies are not touched. It follows that the tslib is also remained on version 1.9.0 in the package-lock.json.
However if we remove the package-lock.json, remove the node_modules, do the above updates in the package.json manually and call npm install we can see in the newly generated package-lock.json that the tslib is also updated to 1.12.0. (If we do not remove the node_modules the same version could be put back in the package-lock.json as previously.)
Conclusion
So the difference is, that in case of npm update --dev only those direct and indirect dependencies are updated, which were in connection with the changed ones in the package.json. But in case of rm package-lock.json and npm install all indirect dependencies can change.
After installing npm to the blur-admin template https://github.com/akveo/blur-admin
I had a number of issues which I fixed by using the run recomendations in the npm audit dialog. However I cant fix one even after running
$ npm install lodash#latest --save
I have updated the lodash file in package.json:
{
"name": "blur_admin",
"version": "1.3.1",
"devDependencies": {
"bower": "~1.8.4",
"browser-sync": "^2.26.3",
"browser-sync-spa": "~1.0.3",
"chalk": "~1.1.1",
"del": "~2.2.2",
"eslint-plugin-angular": "~0.12.0",
"estraverse": "~4.2.0",
"gulp": "^4.0.0",
"gulp-angular-filesort": "^1.2.1",
"gulp-angular-templatecache": "~2.0.0",
"gulp-autoprefixer": "~3.1.1",
"gulp-eslint": "^5.0.0",
"gulp-filter": "~4.0.0",
"gulp-flatten": "~0.3.1",
"gulp-gh-pages": "^0.5.4",
"gulp-inject": "~4.1.0",
"gulp-load-plugins": "~1.4.0",
"gulp-minify-css": "~1.2.1",
"gulp-minify-html": "~1.0.4",
"gulp-ng-annotate": "~2.0.0",
"gulp-prompt": "^1.1.0",
"gulp-protractor": "^4.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "~0.5.4",
"gulp-rev": "~7.1.2",
"gulp-rev-replace": "~0.4.2",
"gulp-sass": "^4.0.1",
"gulp-shell": "^0.5.2",
"gulp-size": "~2.1.0",
"gulp-sourcemaps": "~1.6.0",
"gulp-uglify": "~2.0.0",
"gulp-useref": "^3.1.6",
"gulp-util": "~3.0.6",
"gulp-zip": "^3.0.2",
"http-proxy-middleware": "~0.17.2",
"lodash": "^4.17.11",
"main-bower-files": "~2.13.1",
"uglify-save-license": "~0.4.1",
"wiredep": "~4.0.0",
"wrench": "~1.5.8"
},
"scripts": {
"postinstall": "bower install"
}
}
But still get:
PS D:\dev\Blur-Admin test\blur-admin-master\blur-admin-master> npm audit
=== npm audit security report ===
Manual Review
Some vulnerabilities require your attention to resolve
Visit https://go.npm.me/audit-guide for additional guidance
Low Prototype Pollution
Package lodash
Patched in >=4.17.5
Dependency of browser-sync-spa [dev]
Path browser-sync-spa > opt-merger > lodash
More info https://nodesecurity.io/advisories/577
found 1 low severity vulnerability in 13272 scanned packages
1 vulnerability requires manual review. See the full report for details.
PS D:\dev\Blur-Admin test\blur-admin-master\blur-admin-master>
I've tried everything!
This usually means that one of the other project dependencies in your project.json has a dependency of lodash and they have not patched their pacakge.json.
The error states which one it is: "browser-sync-spa" and the path to it:
browser-sync-spa > opt-merger > lodash
You would have to open an issue on browser-sync-spa or opt-merger to update their repo/package.json or open a PR for them.
Other option is to live with it or Fork their project which is the nuclear option.
I wrote a wrapper library for internal use of webpack with all the needed loaders and config stuff pre-done so I only have to install the wrapper library to every project and add the entry configuration.
So far that worked but for my newest, freshly cloned project it doesn't.
I tried deleting the node_modules folder and the package-lock.json file and do a clean npm i but it's still the same.
webpack-cli is installed, but has webpack as peer-dependency and it says it isn't installed. When I add it to the projects' package.json it works, but then trying to npm run build results in several errors that it couldn't find any of the loaders that should have been installed with the library.
project package.json
"scripts": {
"build": "webpack --progress --colors --hide-modules",
"dev": "npm run build --",
"watch": "npm run dev -- --watch",
"prod": "NODE_ENV=production npm run build"
},
"devDependencies": {
"#namespace/lib": "git+ssh://git#internal:js/lib.git"
},
library package.json
"dependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"autoprefixer": "^9.3.1",
"babel-loader": "^8.0.4",
"copy-webpack-plugin": "^4.5.4",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"image-webpack-loader": "^4.4.0",
"lodash": "^4.17.11",
"node-sass": "^4.9.4",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"eslint": "^5.8.0",
"standard": "^12.0.1"
}
I deleted the
"#namespace/lib": "git+ssh://git#internal:js/lib.git"
line from the projects' package.json file and did a
npm i -D git+ssh://git#internal:js/lib.git
and now it installed all the libraries' dependencies.
Before that I just ran npm i from the newly cloned project with the existing lines in the package.json. I don't understand why that would make a difference, but it seems it did!
//EDIT:
Another thing that worked:
git reset --hard
rm package-lock.json
rm -rf node_modules # deleting already installed modules from the previous tries
npm i
So from a fresh git clone-perspective it's just deleting the lock-file and then installing again. But without a pre-existing node_modules folder.
I'm setting up gulp to do tasks to my JS files in a legacy .NET WebForms project. I have installed NPM, which I then used to install Gulp, and I can successfully run gulp which executes my gulpfile.js. Now I have dependencies to install using npm, like gulp-concat, gulp-uglify, etc. I don't want every developer who opens the solution to have to type "npm install xlibrary" for every dependency. Is there a way to have npm install a list of dependencies, perhaps through a config file (I think VS 2015 does it this way)?
Create package.json file containing
{
"name": "my-web-app",
"description": "Hello world app",
"version": "1.0.0",
"private": true,
"dependencies": {
"bower": "^1.4.1",
"del": "^1.2.0",
"gulp": "^3.9.0",
"gulp-add-src": "^0.2.0",
"gulp-concat": "^2.6.0",
"gulp-csso": "^1.0.0",
"gulp-filter": "^2.0.2",
"gulp-main-bower-files": "^1.2.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^1.0.5",
"gulp-sourcemaps": "^1.5.2",
"gulp-typescript": "^2.7.8",
"gulp-uglify": "^1.2.0"
}
}
In that file you write out all the dependancies, so then developer just types "npm install" and npm gets all needed packages.