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

1 week ago 16
ARTICLE AD BOX

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?

Read Entire Article