Angular Material: error "No provider for MatChip"

Question

I want use mat-chips into my component

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

but it raise an error:

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)

it seem all loaded into the module...

Answer 1

I ran into this same issue recently, and found the errors written to console to be unhelpful. If your issue is the same as mine, the problem is in your HTML. Change your HTML to this.

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

The issue was that a mat-icon element with the attribute matChipRemove must be placed inside of the mat-chip element you are pairing it with.