NG 21 + Vitest + Non-stadanlone component with async pipe

With Angular 21, I can't test (with vitest) a non-standalone component using the Async pipe. I get the following error:

X [ERROR] NG8004: No pipe found with name 'async'.
To fix this, import the "AsyncPipe" class from "@angular/common" and add it to the "imports" array of the module declaring the component. [plugin angular-compiler]

src/app/async-test/async-test.html:1:9:
1 │ <p>{{v | async }}</p>
╵ ~~~~~

Error occurs in the template of component AsyncTestComponent.

src/app/async-test/async-test.ts:6:15:
6 │ templateUrl: './async-test.html',
╵ ~~~~~~~~~~~~~~~~~~~


Here is the full code:

Test

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

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [CommonModule, AsyncPipe ],
declarations: [AsyncTestComponent]
})
.compileComponents();

fixture = TestBed.createComponent(AsyncTestComponent);
component = fixture.componentInstance;
await fixture.whenStable();
});

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


Component:

@Component({
selector: 'app-async-test',
templateUrl: './async-test.html',
styleUrl: './async-test.css',
standalone: false
})
export class AsyncTestComponent {
protected readonly v = of(1);
}


HTML:

<p>{{v | async }}</p>


All I did was: ng new --> add a non standalone component and use the async pipe in it then run ng test

Did someone else experienced the same issue ?

Continue reading...