Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
NG0302 means Angular cannot resolve a pipe used in a template. First check that the name after | matches the pipe’s name in its @Pipe decorator. Then make the pipe visible to the component that owns the template: import it into a standalone component, or check the declaring and importing NgModules in a module-based app.
What NG0302 means
Angular’s error reference describes the problem plainly: “Angular can’t find a pipe with this name.” The error is a template name or scope-resolution problem, not an indication that the pipe’s transformation logic is broken. Angular classifies NG0302 as “Pipe Not Found” in its Error Encyclopedia.
A pipe’s template name comes from its @Pipe metadata. For example, a pipe configured with @Pipe({ name: 'shortDate' }) is used as {{ value | shortDate }}. The name must match, including capitalization; pipe names cannot contain hyphens. See Angular’s Pipe API.
Check the template’s scope
The fix depends on which component owns the failing template and how that component is configured. Angular’s current guidance recommends standalone components for new code, while NgModules remain relevant in existing applications. Use the structure that matches your project.
#1 Best Overall
| Template context | What to check | Typical fix |
|---|---|---|
| Standalone component | The component’s imports |
Import the standalone pipe directly, or import an NgModule that exports it. |
| Component declared in an NgModule | The declaring module’s declarations and imports | Declare a local non-standalone pipe in its owning module; for a pipe declared elsewhere, import a module that exports it. |
| Standalone pipe used in module-based code | The NgModule’s imports |
Import the standalone pipe into the NgModule. |
These visibility rules are documented in Angular’s NgModules guide and NG0302 reference.
Fix a missing pipe, step by step
- Find the pipe token. In the failing template, identify the name immediately after
|, such asshortDate. - Compare it with the pipe definition. Find the pipe class and check that its
@Pipe({ name: '...' })value matches the template exactly, including case. - Identify the template owner. Determine whether the component containing the template is standalone or declared in an NgModule. Check the component that actually uses the pipe, not just where the pipe class lives.
- Make the pipe available in that scope. For a standalone component, add the standalone pipe to its
imports, or import an NgModule that exports it. For a non-standalone pipe, make sure it is declared in its owning NgModule and that the consuming module imports a module exporting it. A standalone pipe can also be included in an NgModule’simports. - Rebuild the template. If you have just changed an import or declaration and the error persists, restart the development server. Angular notes that a restart may be needed after metadata changes; it is not a required step in every case.
When the missing pipe is built in
Built-in pipes also need to be available in the template’s scope. In a standalone component, import the specific built-in pipe the template uses, such as AsyncPipe or JsonPipe. In module-based code, check that the module providing common pipes is available in the relevant compilation scope. Angular’s CommonModule to Standalone migration guide shows direct imports of AsyncPipe, JsonPipe, and NgIf.
A quick diagnostic checklist
- The token after
|matches the configured pipe name exactly. - The pipe is standalone or is declared in the NgModule that owns it.
- The template’s standalone component or declaring NgModule imports the pipe, or an NgModule that exports it.
- For a built-in pipe, the relevant pipe or common-pipes module is in scope.
- If metadata was just changed, a server restart has been tried if needed.
For version-specific details, consult the NG0302 reference and API documentation for the Angular version installed in the project.
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
