\'mat-chip-list\' 不是已知元素答案

【问题标题】：'mat-chip-list' is not a known element\'mat-chip-list\' 不是已知元素
【发布时间】：2022-11-16 20:26:21
【问题描述】：

我正在尝试在组件中使用 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
  {
  }

【问题讨论】：

在您的app.modules.ts 中，当您导出MatChipsModule 时会发生什么？
在您的imports 中还包括来自import { BrowserModule } from "@angular/platform-browser"; 的BrowserModule？并重启服务器？
添加 MatChipsModule 或添加 BrowserModule 都没有帮助
我已经将角度和材料从 15 降级到 14。上面的测试用例现在可以工作了

标签： angular angular-material

【解决方案1】：

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

【讨论】：

【解决方案2】：

Angular Material v15 切换到基于 MDC 的组件，这些组件有一些重大变化。

由于 Angular 15 尚未正式发布，因此您不会在最新文档中找到任何相关信息。但在RC docs您会找到更多信息。具体来说，有一个 migration guide for chips，它声明 <mat-chip-list> 已被删除并由三个替代组件替换，很可能您想使用 <mat-chip-listbox>。

或者，您可以通过导入 MatLegacyChipsModule 使用“旧”芯片实现。

【讨论】：