How to use Standalone Components, Pipes, or Directives in feature modules

Question

I updated my angular project to angular 14. Now I want to have some standalone components, pipes, or directives.

I have a featured module named ProductModule and want to use a standalone pipe called uppercase in this module.

// structure
---Product
          ---product.component
          ---product.service
          ---product.module.ts

---StandabloneFolder
                    ---uppercase.pipe.ts

My uppercase pipe

@Pipe({
    name: 'uppercase',
    standalone: true,
})
export class UppercasePipe implements PipeTransform {
    transform(value: string): string {
        return "UPPERCASE_INPUT"
    }
}

in product.component.html

{{'Javascript Addicted' |uppercase}}

get the following error:

No pipe found with name 'uppercase' product.component.ts(6, 39): Error occurs in the template of component ProductComponent.

NOTE:

This problem will be solved if I add standalone: true to the product.component and remove the ProductComponent from declarations array.

Answer 1

You need to add the UppercasePipe to the imports of product.module.ts.

product.module.ts

@NgModule({
  imports: [/*some import*/, UppercasePipe],
  /* other stuff*/
})
export class ProductModule {}