如何更新角度材质

Question

将项目中的角度材料更新到最新版本的最佳方法是什么

[email protected]

？

我尝试过：

npm install --save @angular/material @angular/cdk

Answer 1

您需要使用 npm update 命令。一个例子如下所示。

npm update @angular/material @angular/cdk

这将安装最新的稳定版本。如果您想定位特定版本，则必须通过将版本添加到@符号后的末尾来指定它。

此外，您可以使用

检查过时的软件包

npm outdated

这是有关 npm 更新的文档。

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

Answer 2

使用以下命令：

ng update @angular/material

注意：我最近使用这个命令从版本8升级到版本9。我还没有测试过旧版本。适用于版本 9 之后的所有版本。

Answer 3

以下步骤帮助我将材质主题从 v9 更新到 v10。

先把旧的包拆掉

npm remove @angular/material @angular/cdk

然后安装最新的软件包

npm add @angular/material @angular/cdk

Answer 4

Way 1

你尝试过简单的

npm i @angular/material

吗？据 npmjs 报道，他将获取最新版本。

Way 2

删除文件

package-lock.json

并在您的

package.json

中检查您是否是最新的 Angular 材料，之后只需执行

npm i

Answer 5

最好使用 Angular 工具来升级

ng update

，方法是：

ng update @angular/material @angular/cli

在极少数情况下，当你接触某些材质混合时，这个 Angular api 不起作用，在这种情况下，我建议使用

npm

（或习惯使用纱线的人）作为：

# 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

Answer 6

您应该始终尝试使用

ng update @angular/material

，因为它不仅会更新软件包。它还会迁移您的代码，例如进口等等。

我从 7 迁移到 11，导入从

import { MatSnackBar } from '@angular/material';

到

import { MatSnackBar } from '@angular/material/snack-bar';

Answer 7

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

Answer 8

用于更新现有较低版本的角度材质

1. 删除现有包

npm 删除@Angular/Material @Angular/cdk

2. 添加新套餐

npm 添加@Angular/Material @Angular/cdk

Answer 9

从 Angular Material 16.2.1 开始，您可以在 mat-autocomplete 上使用 requireSelection 指令：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Number</mat-label>
    <input #input
           type="text"
           placeholder="Pick one"
           matInput
           [formControl]="myControl"
           [matAutocomplete]="auto"
           (input)="filter()"
           (focus)="filter()">
    <mat-autocomplete requireSelection #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

文档：角度材质 - 自动完成 - 需要选择一个选项