Angular组件默认测试持续失败，求排查与修复方案

问题概述 #

运行Angular自动生成的AppComponent基础测试用例时，所有测试均失败，报错提示"[object Object]" type, imported from "AppComponent", must be a standalone component / directive / pipe or an NgModule，无法定位问题根源。

相关代码 #

测试用例 #

it('should create the app', () => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.componentInstance;
  expect(app).toBeTruthy();
});


it(`should have the 'FlinkRegi' title`, () => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.componentInstance;
  expect(app.title).toEqual('FlinkRegi');
});

it('should render title', () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.nativeElement as HTMLElement;
  expect(compiled.querySelector('h1')?.textContent).toContain('Hello, FlinkRegi');
});

App.component.spec.ts #

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { provideRouter } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { RouterOutlet, RouterLink } from '@angular/router';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        AppComponent,          // Import the standalone component directly
        MatSidenavModule,
        MatListModule,
        RouterOutlet,
        RouterLink
      ],
      providers: [
        provideAnimations(),
        provideRouter([]),    // Provide router with empty routes if not required
      ]
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });


  it(`should have the 'FlinkRegi' title`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('FlinkRegi');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, FlinkRegi');
  });
});

App.component.ts #

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { provideAnimations } from '@angular/platform-browser/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, MatSidenavModule, MatListModule, RouterLink, provideAnimations()],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FlinkRegi';
}

错误信息 #

AppComponent > should render title
Error: The "[object Object]" type, imported from "AppComponent", must be a standalone component / directive / pipe or an NgModule. Did you forget to add the required @Component / @Directive / @Pipe or @NgModule annotation?

AppComponent > should create the app
Error: The "[object Object]" type, imported from "AppComponent", must be a standalone component / directive / pipe or an NgModule. Did you forget to add the required @Component / @Directive / @Pipe or @NgModule annotation?

AppComponent > should have the 'FlinkRegi' title
Error: The "[object Object]" type, imported from "AppComponent", must be a standalone component / directive / pipe or an NgModule. Did you forget to add the required @Component / @Directive / @Pipe or @NgModule annotation?

解决方案 #

问题根源 #

报错中的[object Object]指代的是provideAnimations()函数的返回值。provideAnimations()是Angular的提供者函数，用于注册动画相关服务，它返回的是提供者对象，不能放在组件的imports数组中——imports仅允许添加独立组件、指令、管道或NgModule。

修复步骤 #

修改App.component.ts，将provideAnimations()从imports数组移到providers数组中：

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { provideAnimations } from '@angular/platform-browser/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, MatSidenavModule, MatListModule, RouterLink],
  providers: [provideAnimations()], // 移到此处
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FlinkRegi';
}

验证 #

修复后重新运行测试命令：

ng test

所有基础测试用例应该能够正常通过。

内容的提问来源于stack exchange，提问作者Giel v Bussel