Angular 17用@if语法执行ng test报NG05105错误如何解决？

云上老周

2026-6-19

问题

我在代码中使用了Angular 17的@if模板语法，代码如下：

<div @if(uploadProgress)>
  <progress [value]="uploadProgress" max="100"></progress>
</div>

执行ng test时出现错误：

Error: NG05105: Unexpected synthetic property @if(uploadProgress) found. Please make sure that:
Either BrowserAnimationsModule or NoopAnimationsModule are imported in your application.
There is corresponding configuration for the animation named @if(uploadProgress) defined in the animations field of the @Component decorator.

该错误表明Angular将@if错误识别为动画触发器。我不想导入BrowserAnimationModule，因为这在我的场景中并无必要。请问如何解决该错误？我可以改用*ngIf等结构指令，但是否必须强制使用*ngIf？

解决方法

不需要强制改用*ngIf，可以通过以下方式修复测试环境的识别问题：

启用测试环境对新控制流语法的支持
测试环境可能未开启Angular 17新控制流语法（@if/@for等）的支持。需在测试配置文件（如test.ts或setup-jest.ts）中，确保配置了对应支持项：比如在TestBed.configureTestingModule中，确认编译器已启用新控制流的编译支持，或检查Angular CLI版本是否适配新语法的测试环境要求。

给组件添加空动画配置
若测试环境仍误判@if为动画触发器，可在组件的@Component装饰器中添加空的animations数组，明确告知Angular该组件无动画触发器，避免误识别：

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  animations: [] // 添加空数组
})
export class YourComponentComponent {
  // 组件逻辑
}