Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I correctly upgrade angular 2 (npm) to the latest version?

Tags:

npm

angular

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.

like image 973
dragonmnl Avatar asked Apr 13 '16 12:04

dragonmnl


People also ask

How do I upgrade Angular to 11?

You can run ng add @angular/localize to include required packages. Finally, run ng update @angular/core @angular/cli command to update to Angular 11. This will migrate your project to latest Angular release. After the update to Angular 11 is done your project will be using Typescript 4.

How do I upgrade from Angularjs 11 to 12?

Run ng update @angular/core@12 @angular/cli@12 which should bring you to version 12 of Angular. Angular now requires TypeScript 4.2. ng update will update you automatically.


9 Answers

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 and npm update -S is to overcome this bug until it's fixed.

like image 64
Cosmin Ababei Avatar answered Oct 05 '22 07:10

Cosmin Ababei


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

ncufor display

ncu -u for re-writing your package.json

like image 36
Seven Avatar answered Oct 05 '22 06:10

Seven


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": {}
  }
}
like image 37
Isak La Fleur Avatar answered Oct 05 '22 07:10

Isak La Fleur


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


For bash users only

If 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 or yarn list @angular/compiler
  • To check the latest stable @angular version available on npm run:
    npm show @angular/compiler version
like image 27
angularrocks.com Avatar answered Oct 05 '22 05:10

angularrocks.com


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.

like image 32
Jithin Avatar answered Oct 05 '22 05:10

Jithin


Alternative approach using npm-upgrade:

  1. npm i -g npm-upgrade

Go to your project folder

  1. npm-upgrade check

It will ask you if you wish to upgrade the package, select Yes

That's simple

like image 29
xameeramir Avatar answered Oct 05 '22 07:10

xameeramir


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)

like image 27
Poul Kruijt Avatar answered Oct 05 '22 05:10

Poul Kruijt


Just start here:

https://update.angular.io

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.

enter image description here

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 :-)

like image 36
Simon_Weaver Avatar answered Oct 05 '22 07:10

Simon_Weaver


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'

like image 33
KatyaKrym Avatar answered Oct 05 '22 06:10

KatyaKrym