'mat-chip-list' 不是已知元素

Question

I'm trying to use mat-chip in a component. My code used to work before I upgraded to Angular 15

I am importing the module, which seems to be a common mistake

I think I've included everything according to the docs.

Assistance much appreciated. Thanks

The error is:

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.

The version info is:

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

My 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` { }

and my component:

`<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>`

and component.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 switches to MDC based components, which have some breaking changes. At the time when you posted the question, Angular 15 didn't have a stable release yet, but now it has.

There is a migration guide for chips , which states that the <mat-chip-list> was removed and replaced by three alternative components, most probably you want to use <mat-chip-listbox> .

Alternatively, you can use the "old" chips implementation in v15 by importing MatLegacyChipsModule .

Answer 2

trying including BrowserModule,BrowserAnimationsModule in your import array and define the import at the top. eg. import { BrowserModule } from '@angular/platform-browser' and import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Answer 3

Alternatively, You can try mat-chip-grid with mat-chip-row. It solved my problem.

https://material.angular.io/components/chips/overview#text-entry