2

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

{{'Abolfazl Roshanzamir' |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.

Abolfazl Roshanzamir
  • 12,730
  • 5
  • 63
  • 79

1 Answers1

0

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 {}
MoxxiManagarm
  • 8,735
  • 3
  • 14
  • 43
  • I'm talking about standalone pipes , more information https://angular.io/guide/standalone-components – Abolfazl Roshanzamir Oct 13 '22 at 12:21
  • So do I. In order to make the pipe for Products available, you need to import it in the product's module. – MoxxiManagarm Oct 13 '22 at 12:26
  • I know, It's your right, but I want to do that with ``standalone`` feature – Abolfazl Roshanzamir Oct 13 '22 at 12:28
  • I believe you are confused. UppercasePipe is standalone, when imported (like my example). If UppercasePipe is not standalone, then you would need to add it to a declarations array. – MoxxiManagarm Oct 13 '22 at 12:29
  • It's your right. you saved my day. thanks for spending your valuable time answering my questions – Abolfazl Roshanzamir Oct 13 '22 at 12:40
  • @AbolfazlRoshanzamir, if your ProductComponent is standalone, you should not have any ProductModule anymore and declare your standalone pipe in the import option of your ProductComponent. Standalone pipes still need to be declared in imports. – Eric Jeker Jun 03 '23 at 05:05