bug: getting 'pipe could not be found' error when Modal Component uses a custom pipe

[dorontal]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

I get an error in Chrome's dev console that says The pipe '...' could not be found! where '...' is the name of the pipe used in the a modal component's HTML template. The modal is opened from some page. That page also uses the pipe, but successfully, because it imports the module of the pipe into its own .module declaration. The modal component also has a module declaration file which imports the pipe in it, but it seems that the call to this.modalController.create(... does not consult the module declaration file of the modal component.

Expected behavior:

Expected the pipe to be available for the modal component when it was opened from a a page that successfully uses the same pipe - if only because the module of the page that opened the modal controller already imported the module of the pipe, so why is the pipe not available in the modal as well? The modal's module file also imports that pipe, does that modules file not get consulted when you open the modal via Ionic's ModalController? Let's fix this the right way, please, so that we do not have to rely on workarounds, even if one exists, as the reliance on workarounds erodes the overall quality of the software.

Steps to reproduce:

• Create a simple custom pipe, eg. a pipe that works on strings and returns the first 3 characters.
• Create a module for the custom pipe.
• Use the custom pipe in some page component, by importing the pipe's module into the page component's module and using the pipe in the page component's template HTML file.
• Create a modal page component, making sure it uses the pipe in its template HTML file as well.
• Open the modal page component from the page component (in the code - the component class delcaration .ts file) by using Ionic's ModalController
• Run the app in browser with dev-console open
• You will see the error "The pipe '...' could not be found!" in the browser's dev-console as soon as the code tries to present the modal component

Other information:

Seems related to issue #7160 and issue #7619 and issue #7621

Ionic info:

insert the output from ionic info here

Ionic:

   Ionic CLI                     : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.0
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.0.0 (/usr/local/bin/node)
   npm    : 6.14.7
   OS     : Linux 4.19

[DwieDima]

I'm often using pipes inside modals and have no issues.
Did you import the ModalPageModule to the PageModule, where you call your modal?
This may solve your issue.

Heres a working example using custom pipe inside parent and modal: https://github.com/DwieDima/custom-pipes-modal-usage

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[dorontal]

Okay, Reproduction is done!

I replicated the issue by using the 'blank' Ionic template app and adding a modal and adding a pipe. You'll see that the pipe can be used in the component that pops up the modal but not in the modal itself. This issue is all about: "how do we use the pipe in the modal's template?"

See the README.md of the created repository that reproduces the issue.

The replicated issue is here:
https://github.com/dorontal/ionic-issue-21819-reproduction

[ionitron-bot]

Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for bug reports and feature requests. Please use our forum or our slack channel for questions about the framework.

Thank you for using Ionic!