Angular 16中Material ChipGrid组件使用异常求助

项目依赖 #

"@angular/animations": "^16.0.4",
"@angular/cdk": "^16.0.4",
"@angular/common": "^16.0.4",
"@angular/compiler": "^16.0.4",
"@angular/core": "^16.0.4",
"@angular/forms": "^16.0.4",
"@angular/material": "^16.0.4",
"@angular/platform-browser": "^16.0.4",
"@angular/platform-browser-dynamic": "^16.0.4",
"@angular/router": "^16.0.4",
"@ctrl/ngx-codemirror": "^7.0.0",
"@danielmoncada/angular-datetime-picker": "^16.0.1",
"@fortawesome/angular-fontawesome": "^0.10.1",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@types/chrome": "^0.0.154",
"@types/node": "^20.3.0",
"@vimeo/player": "^2.15.0",
"byte-base64": "^1.1.0",
"chart.js": "^3.7.1",
"core-js": "^3.20.2",
"country-flags-dial-code": "^1.2.0",
"dexie": "^3.2.4",
"express": "^4.17.1",
"file-saver": "1.3.3",
"flag-icon-css": "^3.4.6",
"hammerjs": "^2.0.8",
"json2typescript": "^1.5.1",
"moment": "^2.29.1",
"ng2-file-upload": "^3.0.0",
"ngx-cookie-service": "^16.0.0",
"ngx-device-detector": "^6.0.1",
"ngx-permissions": "^15.0.1",
"ngx-select-ex": "^8.0.1",
"ngx-sharebuttons": "^13.0.0",
"pace-progress": "1.0.2",
"papaparse": "^5.4.1",
"paper": "^0.12.15",
"perfect-scrollbar": "^1.4.0",
"pretty": "^2.0.0",
"reflect-metadata": "^0.1.12",
"rxjs": "^7.5.2",
"simple-line-icons": "^2.4.1",
"tslib": "^2.3.1",
"typescript-ioc": "^3.2.2",
"typescript-map": "^0.0.7",
"web-animations-js": "^2.3.1",
"xp.css": "^0.2.3",
"zone.js": "~0.13.0"

模板代码 #

<mat-chip-grid #chipGrid aria-label="Enter fruits">
  <mat-chip-row *ngFor="let lang of languages"
                (removed)="remove(lang)"
                [editable]="true"
                (edited)="edit(lang, $event)"
                [aria-description]="'press enter to edit ' + lang.name">
    {{lang.name}}
    <button matChipRemove [attr.aria-label]="'remove ' + lang.name">
      <mat-icon>cancel</mat-icon>
    </button>
  </mat-chip-row>
  <input placeholder="New Lang..."
         [matChipInputFor]="chipGrid"
         [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
         [matChipInputAddOnBlur]="addOnBlur"
         (matChipInputTokenEnd)="add($event)"/>
</mat-chip-grid>

异常情况 #

Chrome开发者工具报错，报错指向<mat-chip-row>对应的模板代码块；存在同逻辑可正常运行的示例，TypeScript代码中已正确导入Chips相关类。

模块代码 #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialChipsInputComponent } from './materialChipsInput.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MaterialModule} from '../../material.module';
import {MatChipsModule} from "@angular/material/chips";
import {MatIconModule} from "@angular/material/icon";
import {MatFormFieldModule} from "@angular/material/form-field";
import {MatLegacyChipsModule} from "@angular/material/legacy-chips";
import {ReactiveFormsModule} from "@angular/forms";

@NgModule({
    imports: [
        CommonModule,
        BrowserAnimationsModule,
        MaterialModule,
        MatChipsModule,
        MatIconModule,
        MatFormFieldModule,
        MatLegacyChipsModule,
        ReactiveFormsModule
    ],
  declarations: [
    MaterialChipsInputComponent
  ],
  exports:[MaterialChipsInputComponent]
})
export class MaterialChipsInputModule {
}

排查与解决方案 #

核心问题 #

模块中同时导入了**MatChipsModule（新MDC Chips组件）和MatLegacyChipsModule（旧版兼容组件）**，二者指令体系冲突，导致Angular无法正确解析模板中的新Chips指令，引发报错。

模板中使用的<mat-chip-grid>、<mat-chip-row>属于新MDC Chips的指令，对应MatChipsModule；而MatLegacyChipsModule对应的是旧版的<mat-chip-list>、<mat-chip>指令，两类模块不可混用。

解决步骤 #

1. 移除Legacy模块导入：删除MatLegacyChipsModule的导入语句，同时检查MaterialModule中是否也导入了该模块，若有同样移除。
2. 确认类导入正确性：确保组件类中导入的是MatChipsModule中的类型（如MatChipInputEvent、MatChipGrid等），而非Legacy版本。
3. 补全组件逻辑：验证组件类中以下内容是否正确定义：
   • languages数组已初始化，每个元素包含name属性
   • remove、edit、add方法已实现，参数类型匹配模板绑定
   • separatorKeysCodes已从@angular/cdk/keycodes导入并定义（如separatorKeysCodes: number[] = [ENTER, COMMA];）
   • addOnBlur布尔值已定义
4. 重新编译验证：执行ng serve重新编译项目，检查报错是否消失。

内容的提问来源于stack exchange，提问作者Nesan Mano