Beta11 to RC0: "no provider for customPipe"


#1

Hi,
I’m trying to upgrade my Beta11 app to RC0… and it’s a nightmare!

Today, I’m facing a “No provider for…” error on a custom pipe that used to work well on Beta11.

When upgrading to RC0, I followed scrupulously the upgrade method (copy to new rc0 project) and did the following steps:

  • in [app.modules.ts]:
  1. import custom pipes
  2. added my custom pipes to [declarations] array
  3. tried to add them to [entryComponents] array too, but still get the error…
  • in components where these pipes are required:
  1. I kept the import statements for my custom pipes
  2. I removed the [pipes] array from the [@Component] definition

I don’t understand what I did wrong. Something must have been changed in RC0 that broke my pipes, but I can’t understand what as messages in Console are so unclear:
error_handler.js:45 EXCEPTION: Error in ./MyPage class MyPage_Host - inline template:0:0 caused by: No provider for PipDuration!

Any help would be really appreciated in solving this problem.

I’ve had to deal with so many compiling errors because of Rollup (PouchDB…), and now that compiling “seems ok” (but I’m not sure of that!), I get runtime errors (in browser: I don’t even tried to run my app on device…).
Today, I’m so desperate about upgrading to RC0 that I’m wondering if Ionic team has gone to RC0 too fast.
In my opinion, and as far as I can read other questions an comments, RC0 seems to be more a broken Beta12 than a real RC. The process to upgrade indicated here is far from covering all cases, and the Conference app does not help as it does not cover Providers and Pipes concepts…
Also, moving to Rollup seems to be prematured, as mentionned here, and it generates many problems to developpers…


#2
  • in [app.modules.ts]:

    1. You import custom pipes
    2. add it them to [declarations] arraythem in
    3. no need to add to add them in [entryComponents] array
  • in components where these pipes are required:

    1. Do nothing (no imports)

Just use the pipe name (not ClassName) in your templates


#3

@mvrc: thanks for your answer.
Just tried to remove imports: same error.


#4

@mvrc: you were right: I found an import that should have been deleted.
Now the "no provider for " error has disappeared.

However, I still have a new error when I try to ionic build:

I need to use the pipe in TS code and used to write:
let myvar: any = this.myPipe.transform(...);

This generate the following error at build:
Cannot find name 'myPipe'

Tried also without ‘this.’ as my pipe is globally defined now: same error…

Is there something to do differently ?


#5

The transform function is already in your pipe and you don’t have to call it.
Just use |, something like this let myvar: any = (value | myPipe).

But i usually use it in my templates, so i’m not sure how to use it in your ts files.


#6

@mvrc: I will try that and report result.

In fact, I changed my way to build my pipes.

As I will need to call the (calculation) functions created in pipes from TS files also, I would prefer to

  • concentrate all that functions into a provider,
  • and call these functions from pipes,

so these functions will be available both

  • through pipes in templates,
  • and by calling them the classic way from TS files.

The only thing I don’t know how to do is calling a provider function from a pipe.

As there is no “constructor” in pipes, how to reference the provider in pipe?
Providers and pipes are referenced in app.module.ts.

Is it possible and how to do it?


#7

Unfortunately you cannot use a provider in a pipe.
You have to build your function in the transform function of your pipe.

But if you nedd to separate your function, you can make multiple pipe and make a chain with them.


#8

aaarrrrggghhh! Bad news!

Is there another way to make a function callable from a pipe than through a provider?


#9

You can try passing your functions as parameters.


#10

hummm… seems to be a bit complicated and will make the code unclear and difficult to maintain…
I just thought about a simple solution: building my own js library of calculation functions and import it in the pipes?


#11

Apparently i was wrong,
you can look into angular2 pipes for an example : date_pipe.ts


#12

Are you thinking of :
import {DateFormatter} from '../facade/intl';

I had a look at this [intl.ts]: it is not a provider, but a simple class of functions.

I think that solution sounds great: I’ll be able to group all my calculation functions in the same class, and call them from pipes or from TS files.

One unique place to maintain all calculation functions is a good thing for me!

@mvrc Thanks for your help and advices!


#13

@mvrc: just to make you know that I’ve implemented this solution successfully!