“mat-chip-list”不是已知元素

Question

我正在尝试在组件中使用 mat-chip 。在升级到 Angular 15 之前，我的代码曾经可以运行

我正在导入模块，这似乎是一个常见的错误

我想我已经根据文档包含了所有内容。

非常感谢您的帮助。谢谢

错误是：

Error: src/app/app.component.html:1:1 - error NG8001: 'mat-chip-list' is not a known element:
1. If 'mat-chip-list' is an Angular component, then verify that it is part of this module.
2. If 'mat-chip-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <mat-chip-list>
  ~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

版本信息是：

Angular CLI: 15.0.0-rc.3
Node: 16.14.0
Package Manager: npm 9.1.1
OS: linux x64

Angular: 15.0.0-rc.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0-rc.3
@angular-devkit/build-angular   15.0.0-rc.3
@angular-devkit/core            15.0.0-rc.3
@angular-devkit/schematics      15.0.0-rc.3
@angular/cdk                    15.0.0-rc.2
@angular/material               15.0.0-rc.2
@schematics/angular             15.0.0-rc.3
rxjs                            7.5.7
typescript                      4.8.4

我的app.modules.ts：

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { MatChipsModule } from '@angular/material/chips';


@NgModule({
    declarations: [
       AppComponent
    ],
    imports: [
       MatChipsModule
    ],
    exports: [
    ],
    providers: [
    ],
    bootstrap: [AppComponent],
       entryComponents: [ 
    ]

})
export class AppModule` { }

和我的组件：

`<mat-chip-list>
    <mat-chip>
        Dog one
    </mat-chip>
    <mat-chip color="primary">
       Dog two
    </mat-chip>
    <mat-chip color="accent">
       Dog three
    </mat-chip>
</mat-chip-list>`

和组件.ts：

   import { Component } from '@angular/core';

   @Component({
      selector: 'chips-example',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
  })
  export class AppComponent
  {
  }

Answer 1

Angular Material v15 切换到基于 MDC 的组件，其中有一些重大更改。有一个芯片迁移指南，其中指出该<mat-chip-list>组件已被删除并被三个替代组件替换：

1. <mat-chip-listbox><mat-chip-option>当用户可以选择芯片时应使用with
2. <mat-chip-grid><mat-chip-row>当文本输入与芯片交互时应使用with
3. <mat-chip-set><mat-chip>当您实现自定义可访问性模式时应使用with

或者，您可以通过导入 .v15 和 v16 来使用 v15 和 v16 中的“旧”芯片实现MatLegacyChipsModule。然而，这种方法已被弃用，并且从 Angular v17 开始它被删除了。

Answer 2

尝试在导入数组中包含 BrowserModule,BrowserAnimationsModule 并在顶部定义导入。例如。从 '@angular/platform-b​​rowser' 导入 { BrowserModule } 并从 '@angular/platform-b​​rowser/animations' 导入 { BrowserAnimationsModule }；