Unable to use custom pipes in a modal -- getting "pipe not found" error

Ionic Framework Ionic Angular
1

Hello, I actually opened an issue for this, but perhaps someone here can shed a light? Here’s the issue:

In a nutshell, I have a custom pipe, it works fine when used in a page component’s template.

I don’t know how to use the pipe in a modal component – one that is popped up via ModalController – it does not have a module file that can import the pipe’s module, for one thing. The (parent) component that pops it up, does have a module file and it correctly imports the pipe’s module and can even use that pipe, but not the modal.

How do we use a custom pipe in our modal component’s template?

You can see the issue more clearly in this repository I’ve created to reproduce it:

2

Hi there. Going to close that issue as it is not an issue with the framework, but rather a support question.
Please ask here on the forum first before opening github issues.

Looking over the example repo you have provided, you dont the modal component in any declarations array in the app. Meaning that it’s not connected to any chunk in your app.

3

Got it: I will post in the forum first, before creating a new issue, as opposed to reversing this order.

I understand that this is not a bug.

I just found the solution to it and will post the solution.

The “solution” feels a bit hackish and it definitely is not straightforward or simple to understand.

Thanks again for all your great work that has enabled so much for the rest of us (with Ionic and specifically with Ionic-Angular),

4

The solution to the problem is this:

(you’ll need to refer to the code in the repo I’ve created to reproduce the issue – that repo is now fixed. When you click the button in it to pop up the modal, the modal does pop and its template does find the pipe).

In home.module.ts - the module of the component that uses ModalController to pop up the modal component, you’ll need to add ModalComponent to both the entryComponents and to declarations. This allows the popped-up modal component to access any pipes that the home (caller) component also has access to.

1 Like
5

I was under the impression that if you’re using Ivy, entryComponents are no longer necessary.

1 Like
6

I had used older versions of Ionic (since version 2) on this project. As a result my modules files were out of date. I now generated new module files for the modals via ionic g page modals/page-name and then just imported each modal’s module in the module of the calling component. I also include the module of the pipe in each modal component’s module as a module import.Then the modal has access to all of the calling component’s pipes. So this is the new way to do things correctly, I believe. So there was no need for either entryComponents or declarrations in this case…

7

This this the right answer. Thanks

1 Like