Angular Karma/Jasmine单元测试报NG0201 NgControl缺失provider错误

你碰到的NG0201: No provider for NgControl报错由3处配置错误直接导致：

1. 组件使用了响应式表单的FormControl做绑定，但测试模块只导入了模板驱动表单对应的FormsModule，缺少响应式表单必需的ReactiveFormsModule——NgControl是响应式表单指令依赖的注入项，缺这个模块就会触发该报错。
2. 错误地将Angular Material的内置组件（MatAutocomplete、MatFormField等）直接放在declarations数组中。这类组件是第三方NgModule导出的内容，直接声明会打断依赖注入解析链路，正确做法是导入对应的Material模块，而非单独声明组件。
3. 模板中使用了matInput指令，该指令属于MatInputModule，当前配置完全没有引入该模块，就算解决前两个问题，后续也会触发“无法识别matInput指令”的报错。

直接替换测试文件中的TestBed配置部分即可：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { PrimaryAutoCompleteComponent } from './primary-auto-complete.component';

describe('PrimaryAutoCompleteComponent', () => {
  let component: PrimaryAutoCompleteComponent;
  let fixture: ComponentFixture<PrimaryAutoCompleteComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [PrimaryAutoCompleteComponent], // 仅声明自身业务组件，第三方组件禁止放在这里
      imports: [
        ReactiveFormsModule, // 解决NgControl缺失的核心依赖
        MatAutocompleteModule,
        MatFormFieldModule,
        MatInputModule,
        NoopAnimationsModule // 屏蔽Material动画依赖，提升测试运行速度
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(PrimaryAutoCompleteComponent);
    component = fixture.componentInstance;
    // 不需要手动调用ngOnInit，fixture.detectChanges会自动触发生命周期钩子
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

• 永远不要把第三方库导出的组件、指令放到测试模块的declarations数组里，直接导入对应的官方模块即可，避免依赖注入链路断裂。
• 用到响应式表单的formControl、formGroup绑定时，必须导入ReactiveFormsModule；用到ngModel才需要导入FormsModule，两个模块不要混淆。
• 所有Angular Material组件在测试时都要导入NoopAnimationsModule，不然会抛动画模块缺失的错误，无操作动画模块不会影响测试逻辑，还能提升测试运行速度。
• 不需要手动调用ngOnInit、ngAfterViewInit这类生命周期钩子，fixture.detectChanges()第一次执行的时候会自动按顺序触发组件的完整生命周期。

额外提示：你组件里给filteredOptions和autocomplete属性加@ts-ignore是不好的实践，这两个属性初始化时机明确，要么给属性补充包含undefined的联合类型定义，要么用!非空断言，直接忽略TS错误会掩盖潜在的空值访问问题。

内容的提问来源于stack exchange，提问作者Van Wilder