Угловой материал: ошибка "Нет поставщика для MatChip"

Question

Я хочу использовать мат-чипы в моем компоненте

my-comp.module.html

<mat-form-field class="example-chip-list" #chipList>
      <mat-chip-list>
        <mat-chip *ngFor="let role of user.roles" [selectable]="selectable"
        [removable]="removable"
        (removed)="remove(role)">{{ role.name }}</mat-chip>
        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
        <input
          placeholder="New fruit..."
          #fruitInput
          [formControl]="fruitCtrl"
          [matAutocomplete]="auto"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)">
      </mat-chip-list>
    </mat-form-field>

my-comp.module.ts

@NgModule({
  declarations: [MyComp],
  imports: [
    CommonModule,
    MatButtonModule,
    MatIconModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatChipsModule,
    MatAutocompleteModule
  ],
  exports: [MyComp]
})
export class MyCompModule { }

но возникает ошибка:

error-handler.service.ts:11 Error: StaticInjectorError(AppModule)[MatChipRemove -> MatChip]: 
  StaticInjectorError(Platform: core)[MatChipRemove -> MatChip]: 
    NullInjectorError: No provider for MatChip!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:717)
    at resolveToken (core.js:954)
    at tryResolveToken (core.js:898)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795)
    at resolveToken (core.js:954)
    at tryResolveToken (core.js:898)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795)
    at resolveNgModuleDep (core.js:17656)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:18345)
    at resolveDep (core.js:18716)

кажется, все загружено в модуль ...

Answer 1

Недавно я столкнулся с этой же проблемой и обнаружил, что ошибки, записанные в консоли, бесполезны.Если ваша проблема такая же, как у меня, проблема в вашем HTML.Измените свой HTML-код на этот.

<mat-form-field class="example-chip-list" #chipList>
      <mat-chip-list>
         <mat-chip *ngFor="let role of user.roles" [selectable]="selectable"
         [removable]="removable"
         (removed)="remove(role)">
            {{ role.name }}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
         </mat-chip>
        <input
          placeholder="New fruit..."
          #fruitInput
          [formControl]="fruitCtrl"
          [matAutocomplete]="auto"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)">
      </mat-chip-list>
</mat-form-field>

Проблема заключалась в том, что элемент mat-icon с атрибутом matChipRemove должен быть размещен внутри элемента mat-chip, с которым вы его связываете.