The pipe 'async' could not be found
If the component at the route you're loading is not declared (via declarations:[]
) then you will also get this type of error.
When adding a new component in Angular 9 I had to restart the development server possibly also because of HMR:
ng serve --hmr
Without this the application simply did not load all the dependencies and issued this error.
@NgModule.declarations
aren't inherited by child modules. If you need pipes, directives, components from a module, the module should be imported into your feature module.
The module with all the core pipes is CommonModule
from @angular/common
import { CommonModule } from '@angular/common';
@NgModule({
imports: [ CommonModule ]
})
class BlogModule {}
The reason it works in the app.component
is because you are most likely importing BrowserModule
into the AppModule
. BrowserModule
re-exports CommonModule
, so by importing BrowserModule
, it's like also importing CommonModule
.
It's also worth noting that CommonModule
has the core directives also, like ngFor
and ngIf
. So if you have a feature module that uses those, you will also need to import the CommonModule
into that module.