37

What is the best way to update angular material in a project to latest version material@2.0.0-alpha.8-3 ?

I tried:

npm install --save @angular/material @angular/cdk
Sreetam Das
  • 3,226
  • 2
  • 22
  • 36
Kram_
  • 763
  • 2
  • 6
  • 12

8 Answers8

47

You'll want to use the npm update command. An example would look like this. 

npm update @angular/material @angular/cdk

This will install the latest stable version. If you would like to target a specific version, you would have to specify it by adding the version to the end after an @ symbol.

Additionally, you can check for outdated packages with

npm outdated

Here's the documentation on npm update.

https://docs.npmjs.com/cli/update

K. Waite
  • 1,574
  • 13
  • 12
42

Use the following command:

ng update @angular/material

Note: I recently used this command to upgrade from version 8 to version 9. I have not tested it for older versions. Works fine for all versions after version 9.

Debiprasad
  • 5,895
  • 16
  • 67
  • 95
  • 2
    I also tried to update from 9 to 10 using npm update but nothing happened, but ng update worked for me. – RRR Jun 26 '20 at 06:57
  • 4
    @RenjithP.N. Yes, `ng update` is the right way to upgrade Angular including Angular Material. While upgrading using `ng update`, it also does some required changes in the files as well which `npm update` does not do. – Debiprasad Jul 05 '20 at 04:29
14

The following step helped me to update material theme from v9 to v10.

First removed the old package

npm remove @angular/material @angular/cdk

Then installed the latest package

npm add @angular/material @angular/cdk
Dipendra Gurung
  • 5,720
  • 11
  • 39
  • 62
  • 2
    I was having issue that I wasn't able to update it from version 7.0.0 to 15.x.x but your solution worked. Thanks – Amrinder Singh Dec 28 '22 at 11:22
  • 1
    This worked for me as well. My App was using Angular 15 but still referencing Angular Material 8. I wasn't able to use ng update to go from v 8 to v 9 due to errors with the angular version being greater than the dependencies and ng update won't let you skip major versions. Also, if you want to upgrade to a specific version, you can use npm add @angular/material@15 @angular/cdk@15 – Billy Rudasill Jul 17 '23 at 15:00
4

Way 1

Have you try with a simple npm i @angular/material ? As reported at npmjs he will fetch the latest version.

Way 2

delete the file package-lock.json and in your package.json check that you are up to date with the latest angular material, after that simply do an npm i

Jacopo Sciampi
  • 67
  • 3
  • 13
3

it's better to use the angular tool to upgrade ng update by doing:

ng update @angular/material @angular/cli

in some rare cases, when you touch some material mixins this angular api doesn't work, in that case I suggest to use npm (or yarn for whom used to it) as:

# Removing the material previous version files from node_modules in the explorer or with the command
npm remove @angular/material @angular/cdk
# Or by using yarn:
yarn remove @angular/material @angular/cdk

# And re-install the new version of the packages:
npm i @angular/material@latest @angular/cdk@latest
# with yarn it gives:
yarn add @angular/material@latest @angular/cdk@latest
getName
  • 693
  • 1
  • 9
  • 19
2

you should always try to use ng update @angular/material because it does not only update the packages. It also migrates your code, e.g. imports and so on.

I migrated from 7 to 11 and the imports changed from import { MatSnackBar } from '@angular/material'; to import { MatSnackBar } from '@angular/material/snack-bar';

user3838018
  • 305
  • 3
  • 14
  • Hi We need to upgrade Angular 7 to 11 with Angular material , but this angular "https://update.angular.io/?l=2&v=7.0-11.0 link we followed , but getting lots of error ANY HELP LINE PLEASE – Adhi Venkatesh Aug 02 '21 at 13:20
1
first remove from `package-lock.json` this
  // "@angular/material": {
    //   "version": "6.4.7",
    //   "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.4.7.tgz",
    //   "integrity": "sha512-SdNx7Xovi24Kw9eU6lkLhY/7f2M7L9F+/uh6XuPr4jbGgCUVVpeeVI5ztZhsZRbj1sN+/r1p5w8u62apWWl5Ww==",
    //   "requires": {
    //     "parse5": "^5.0.0",
    //     "tslib": "^1.7.1"
    //   },
    //   "dependencies": {
    //     "parse5": {
    //       "version": "5.1.0",
    //       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
    //       "integrity": "sha512- 
fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
    //       "optional": true
    //     }
    //   }
    // },
// "@angular/cdk": {
//   "version": "7.3.7",
//   "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.3.7.tgz",
//   "integrity": "sha512-xbXxhHHKGkVuW6K7pzPmvpJXIwpl0ykBnvA2g+/7Sgy5Pd35wCC+UtHD9RYczDM/mkygNxMQtagyCErwFnDtQA==",
//   "requires": {
//     "parse5": "^5.0.0",
//     "tslib": "^1.7.1"
//   },
//   "dependencies": {
//     "parse5": {
//       "version": "5.1.0",
//       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
//       "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
//       "optional": true
//     }
//   }
// },


 second remove from `package.json` this line
      // "@angular/material": "^6.4.7",
      // "@angular/cdk": "^7.3.7",


then finaly run this
  npm install --save @angular/material @angular/cdk
Mohamed Elsafty
  • 11
  • 4
0

For update angular material from existing lower version

  1. Remove existing package

npm remove @angular/material @angular/cdk

  1. Add new Package

npm add @angular/material @angular/cdk

Bhadresh Patel
  • 1,671
  • 17
  • 18