The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →NG0302 means Angular cannot resolve a pipe used in a template. Check that the name after | matches the pipe’s @Pipe name, then make the pipe available in the component or NgModule that owns the template. The right import or declaration depends on whether your code uses standalone components or NgModules.
What NG0302 means
Angular’s NG0302 error reference describes the problem directly: “Angular can’t find a pipe with this name.” The error index classifies it as “Pipe Not Found.” It is a template name-resolution or scope problem—not, by itself, evidence that the pipe’s transformation logic is broken.
As an Amazon Associate I earn from qualifying purchases.
A pipe’s template name is the value in its @Pipe decorator. For example, a pipe configured with @Pipe({ name: 'shortDate' }) is used as {{ value | shortDate }}. The identifier after | must match the configured name, including its spelling and capitalization. Angular’s Pipe API documents the decorator metadata and pipe naming rules.
Fix it in the scope that owns the template
First identify the component whose template contains the failing pipe. Then check how that component receives its dependencies. Angular’s NgModules guide explains module-based visibility; standalone components instead declare template dependencies in their own imports.
#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 owned elsewhere, import a module that exports it. |
| Standalone pipe used by an NgModule-based component | The NgModule’s imports |
Import the standalone pipe into that module. |
Standalone component
Add the pipe to the imports array of the standalone component whose template uses it. You can instead import an NgModule that exports the pipe, when that is how the pipe is provided. A pipe marked standalone does not need to be declared in an NgModule.
NgModule-declared component
A non-standalone pipe used locally must appear in the owning NgModule’s declarations. If another module owns the pipe, the consuming component’s module needs to import a module that exports it. A pipe in a module’s declarations is not automatically available to every other module in the application.
Standalone pipe in an NgModule application
Current Angular allows standalone pipes in an NgModule’s imports; add the pipe there rather than to declarations. Check the API and syntax against the Angular version installed in your project.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Check built-in pipes, too
Built-in pipes such as AsyncPipe and JsonPipe also have to be in the template’s scope. In a standalone component, import the specific built-in pipe it uses. Angular’s CommonModule to Standalone migration guide shows direct imports such as AsyncPipe and JsonPipe (alongside the NgIf directive). In module-based code, ensure the module providing the common pipes is available in the relevant compilation scope.
Rank #3
Debug NG0302 step by step
- Find the pipe token. In the failing template, identify the name immediately after
|, such asshortDate. - Compare the configured name. Find the pipe’s
@Pipe({ name: ... })metadata and compare the two names character-for-character, including capitalization. Angular’s Pipe API says pipe names cannot contain hyphens. - Check how the pipe is provided. Inspect whether it is standalone and, if it is not, which NgModule declares it.
- Check the template owner’s scope. For a standalone component, inspect that component’s
imports. For a component declared in an NgModule, inspect the module’s declarations and imports, including whether an imported module exports the pipe. - For built-in pipes, verify their imports. Add the specific pipe to a standalone component’s imports, or check the module-based common-pipe scope.
- Restart only if needed. If you have just changed an import or declaration and the error persists despite correct metadata, restart the development server. Angular notes that a restart may be needed after a recent metadata change; it is not a required fix for every NG0302 error.
Why the fix depends on the project
Angular recommends standalone components for new code, while NgModules remain relevant to existing applications. The key is to fix the scope of the actual component template, using the project’s installed Angular version and configuration—not to add a pipe declaration or import in an unrelated part of the application.
Angular’s documentation does not provide an incidence rate, common-cause percentages, or a fix-success statistic for NG0302. The documented troubleshooting path is to verify the pipe name and make the pipe visible through the correct import or declaration.
Quick Recap
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.
