Angular: NG02100: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Meaning

| async subscribes to an Observable or Promise. Passing already-resolved data (an array, an object, a string) throws. Remove the pipe for plain values, or make the property an Observable / Promise. A frequent cause is | async applied to the result of a subscribe() assignment.

Common causes

• Property holds an array/object, not an Observable or Promise
• Subscribed manually in the component and then used | async on the stored value
• Service returns data synchronously in one branch and an Observable in another
• Wrong variable bound (the value vs the $ stream)
• *ngIf="user$ | async as user" where user$ is already a value

Detailed fix by platform

Code examples

items$ = this.http.get<Item[]>('/api/items');     // template: @for (i of items$ | async; track i.id)
items: Item[] = [];                                // template: @for (i of items; track i.id)  (no async)

ngOnInit() { this.items$.subscribe(v => (this.items = v)); }   // fine, but then do NOT use | async on `items`

How to diagnose

1. Type — Observable, Promise or plain value?
2. Pipe — Is async applied to the stream?
3. Mix — Manual subscribe plus async?

More related errors