How do I correctly upgrade angular 2 (npm) to the latest version?
NpmAngularNpm Problem Overview
Recently I started Angular 2 tutorial at https://angular.io/docs/ts/latest/tutorial/.
and left off with Angular 2 beta 8. Now I resumed the tutorial and latest beta is beta 14.
If I simply do npm update a few modules (preloaded with the tutorial) are updated but not Angular2 (I can see that with npm ls).
If I do npm update angular 2 or npm update [email protected] it just does nothing either.
Npm Solutions
Solution 1 - Npm
The command npm update -D && npm update -S
will update all packages inside package.json
to their latest version, according to their defined version range. You can read more about it here.
If you want to update Angular from a version prior to 2.0.0-rc.1
, then you'll need to manually edit package.json
, as Angular was split into several npm modules. Without this, as angular2 package points to 2.0.0-beta.21
, you'll never get to use the latest version of Angular.
A list with some of the most common modules that you'll need to get started can be found in the quickstart repository.
Notes:
-
A cool way to stay up to date with your packages' latest version is to use
npm outdated
which shows you all outdated packages together with their wanted and latest version. -
The reason why we need to chain two commands,
npm update -D
andnpm update -S
is to overcome this bug until it's fixed.
Solution 2 - Npm
Another nice package which I used for migrating form a beta version of Angular2 to Angular2 2.0.0 final
is npm-check-updates
It shows the latest available version of all packages specified within your package.json. In contrast to npm outdated
it is also capable to edit your package.json, enabling you to do a npm upgrade
later.
Install
sudo npm install -g npm-check-updates
Usage
ncu
for display
ncu -u
for re-writing your package.json
Solution 3 - Npm
Upgrade to latest Angular 5
Angular Dep packages:
npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save
Other packages that are installed by the angular cli
npm install --save core-js@latest rxjs@latest zone.js@latest
Angular Dev packages:
npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest
Types Dev packages:
npm install --save-dev @types/{jasmine,jasminewd2,node}@latest
Other packages that are installed as dev dev by the angular cli:
npm install --save-dev codelyzer@latest jasmine-core@latest jasmine-spec-reporter@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-coverage-istanbul-reporter@latest karma-jasmine@latest karma-jasmine-html-reporter@latest protractor@latest ts-node@latest tslint@latest
Install the latest supported version used by the Angular cli (don't do @latest):
npm install --save-dev [email protected]
Rename file angular-cli.json to .angular-cli.json and update the content:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "project3-example"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
Solution 4 - Npm
UPDATE:
Starting from CLI v6 you can just run ng update
in order to get your dependencies updated automatically to a new version.
> With ng update
sometimes you might want to add --force
flag.
> If you do so make sure that the version of typescript you got
> installed this way is supported by your current angular version,
> otherwise you might need to downgrade the typescript version.
Also checkout this guide Updating your Angular projects
bash users only
ForIf you are on are on Mac/Linux
or running bash on Windows
(that wont work in default Windows CMD
) you can run that oneliner:
npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5 --save
yarn add @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5
> Just specify version you wan't e.g @4.4.5 or put @latest to get the latest
>
> Check your package.json
just to
> make sure you are updating all @angular/*
packages that you app is relying on
-
To see exact
@angular
version in your project run:
npm ls @angular/compiler
oryarn list @angular/compiler
-
To check the latest stable
@angular
version available on npm run:
npm show @angular/compiler version
Solution 5 - Npm
Official npm page suggest a structured method to update angular version for both global and local scenarios.
1.First of all, you need to uninstall the current angular from your system.
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g @angular/cli
2.Clean up the cache
npm cache clean
EDIT
As pointed out by @candidj
npm cache clean
is renamed as npm cache verify
from npm 5 onwards
3.Install angular globally
npm install -g @angular/cli@latest
4.Local project setup if you have one
rm -rf node_modules
npm install --save-dev @angular/cli@latest
npm install
Please check the same down on the link below:
https://www.npmjs.com/package/@angular/cli#updating-angular-cli
This will solve the problem.
Solution 6 - Npm
Alternative approach using npm-upgrade:
npm i -g npm-upgrade
Go to your project folder
npm-upgrade check
It will ask you if you wish to upgrade the package, select Yes
That's simple
Solution 7 - Npm
If you want to install/upgrade all packages to the latest version and you are running windows you can use this in powershell.exe
:
foreach($package in @("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
npm install @angular/$package@latest -E
}
If you also use the cli
, you can do this:
foreach($package in @('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli')){
iex "npm install @angular/$package@latest -E $(If($('cli','compiler-cli').Contains($package)){'-D'})";
}
This will save the packages exact (-E), and the cli packages in devDependencies
(-D)
Solution 8 - Npm
Just start here:
Select the version you're using and it will give you a step by step guide.
I recommend choosing 'Advanced' to see all steps. Complexity is a relative concept - and I don't know whose stupid idea this feature was, but if you select 'Basic' it won't show you all steps needed and you may miss something important that your otherwise 'Basic' application is using.
As of version 6 there is a new Angular CLI command ng update
which intelligently goes through your dependencies and performs checks to make sure you're updating the right things :-)
The steps will outline how to use it :-)
Solution 9 - Npm
> npm uninstall --save-dev angular-cli > > npm install --save-dev @angular/cli@latest > > ng update @angular/cli > > ng update @angular/core --force > > ng update @angular/material or npm i @angular/cdk@6 > @angular/material@6 --save > > npm install typescript@'>=2.7.0 <2.8.0'
Solution 10 - Npm
Best way to do is use the extension(pflannery.vscode-versionlens) in vscode.
this checks for all satisfy and checks for best fit.
i had lot of issues with updating and keeping my app functioining unitll i let verbose lense did the check and then i run
> npm i
to install newly suggested dependencies.
Solution 11 - Npm
If you are looking like me for just updating your project to the latest these is what works form me since Angular 6:
> Open the console on your project folder: If you type: ng update
then you will get the below message:
We analyzed your package.json, there are some packages to update:
Name Version Command to update
--------------------------------------------------------------------------------
@angular/cli 7.0.7 -> 7.2.2 ng update @angular/cli
@angular/core 7.0.4 -> 7.2.1 ng update @angular/core
There might be additional packages that are outdated.
Run "ng update --all" to try to update all at the same time.
> So I usually go straight and do:
> ng update --all
> Finally you can check your new version:
>
>
>
> ng version
Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.12.2
@angular-devkit/build-angular 0.12.2
@angular-devkit/build-optimizer 0.12.2
@angular-devkit/build-webpack 0.12.2
@angular-devkit/core 7.2.2
@angular-devkit/schematics 7.2.2
@angular/cli 7.2.2
@ngtools/webpack 7.2.2
@schematics/angular 7.2.2
@schematics/update 0.12.2
rxjs 6.3.3
typescript 3.2.4
webpack 4.28.4