Ionic 4 page or component, service or provider

#1

Comparing the Ionic conference app:


To the Ionic Stencil Conference app:

It looks like all pages are classed as Components.
While this may be a personal option (to use component or page), is this the growing trend and should we be following this for the sake of continuity?

On the same note, using Services or Providers as the container name. If they are essentially the same thing except for how you inject them, should we name all services - Providers?

[Ionic4] Why does CLI create file.page.ts instead of file.component.ts
#2

in stencil you are working with plain components, like in angular

the “page” stuff is something ionic 2-3 introduced, which will be vanished with ionic 4 with or without angular.
So ionic pages are angular components - so simple components at all - mixed up with some additional data for ionic routing via ionicpage decorator.

and providers are angular services :slight_smile:
Maybe ionic team did not liked the wording if you check the meaning in programming languages or contexts.

#3

Thanks for that.
The Ionic 4 CLI currently generates Pages as well as Components.

The page generated does not utilize the IonicPage decorator, that I see. Id IonicPage decorator still usable in v4?

“The @IonicPage decorator has been removed and it is no longer possible to enable lazy loading without Angular routing”
[https://www.joshmorony.com/using-angular-routing-with-ionic-4/](http://from joshmorony.com)

So, I guess my confusion here is why is there a Page generator at all?
And even if there is, in order to be inline with future v4+ apps, should I be generating these Pages into a ‘components’ folder?
I realize I have an option here. Just trying to be inline with the popular vote with new apps I am about to start.

#4

I’ve just decided to even separate my modals in their own folder :wink:

I know it isn’t the angular standard but I found kind of misleading to have everything under components, specially when the app is more than 3 pages like I have

I’m guessing that it isn’t a technical problem since the cli doesn’t makes it mandatory to have all components and components

And in the worst case, Webstorm handle moving files super smoothly

So under src/app I’ve got

components
pages
modals
services
pipes

I guess I could have do something like the following too

components/components
components/pages
components/modals
services
pipes

and about your last question @shepard, no you can’t use IonicPage in v4, it doesn’t exists anymore

#5

Regarding the conference app, there are kind of three version right now:

#6

I’m inline with you on this.
While I have not separated modals(yet), I would prefer to keep components/components:| separate.

So far I am getting the indication that it might be a wild west situation here.

If there is to be a page generator - might as well use it.
Currently I have a folder named providers - with a number of services in it.
If there is no consensus on this, I guess I’ll wing it and call the folder ‘services’ - unless there is a case for something other than a service that might go in the ‘providers’ folder…?

I know this is not of great importance and decisions can be undone with something like Webstorm as mentioned but would also like to solidify this, in my own apps at least.

@pwespi thanks, I never saw the core-update branch. That one uses a folder named Pages that looks to also contain modals, maybe (pop-over)

#7

Did you try to use the CLI v4 to generate a provider? Does it create one in a folder called services or providers? I guess that’s maybe the added value

Except that, really, I have migrated my folder providers folder to services, so far I don’t see the added value

But I guess as long as we all use providers oder services we all speak about the same thing at least :wink:

#8

When I last used the generator, it put providers in the app folder because I did not use it correctly as now we add the folder name in the command. So, really, it puts it into any folder you want. Although, I have not tried it with 4.0.2 yet. ( oops - now make that 4.0.3 )

I really do not see renaming all my services (ItemService.ts) to providers (ItemProvider.ts).

#9

I didn’t did that neither, my provider are even named -service.ts and not .service.ts … maybe somehow someday :wink:

#10

So I just installed CLI 4.0.3 and generated a page.
It no longer takes the prefix or folder name, so it put it directly into the app folder.
I could navigate to the pages folder and create the page there or, as I just tested use it like this:
ionic g page pages/test
Which creates a folder named test in my pages folder.

There is no generate provider available.
ionic g service whateverfolder/test works

1 Like
#11

thx for the test … still unsure about what are really to “official” best practice, but interesting :wink: