# Ionic 4 page or component, service or provider **URL:** \ **Category:** Ionic Framework\ **Created:** [July 31, 2018, 2:37pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877 "2018-07-31T14:37:14Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![shepard](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@shepard](https://forum.ionicframework.com/u/shepard)\ **Post date:** [July 31, 2018, 2:37pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/1 "2018-07-31T14:37:14Z")
Comparing the Ionic conference app: > **[ionic-team/ionic-conference-app](https://github.com/ionic-team/ionic-conference-app/tree/master/src)** > > ionic-conference-app - A conference app built with Ionic to demonstrate Ionic To the Ionic Stencil Conference app: > **[ionic-team/ionic-stencil-conference-app](https://github.com/ionic-team/ionic-stencil-conference-app/tree/master/src)** > > ionic-stencil-conference-app - A conference app built with Stencil to demonstrate Ionic 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? ---
**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\ **Post date:** [July 31, 2018, 3:15pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/2 "2018-07-31T15:15:28Z")
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 🙂 Maybe ionic team did not liked the wording if you check the meaning in programming languages or contexts. ---
**Author:** ![shepard](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@shepard](https://forum.ionicframework.com/u/shepard)\ **Post date:** [July 31, 2018, 4:42pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/3 "2018-07-31T16:42:50Z")
Thanks for that. The Ionic 4 CLI currently generates Pages as well as Components. > **[Ionic Docs - ionic generate](https://beta.ionicframework.com/docs/cli/generate/)** > > Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards 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/](https://www.joshmorony.com/using-angular-routing-with-ionic-4/)]([http://from](http://from) [joshmorony.com](http://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. ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [August 2, 2018, 1:35pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/4 "2018-08-02T13:35:08Z")
I’ve just decided to even separate my modals in their own folder 😉 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 ---
**Author:** ![pwespi](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@pwespi](https://forum.ionicframework.com/u/pwespi)\ **Post date:** [August 2, 2018, 1:48pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/5 "2018-08-02T13:48:14Z")
Regarding the conference app, there are kind of three version right now: - [ionic-stencil-conference-app](https://github.com/ionic-team/ionic-stencil-conference-app) is the version with @ionic/core 4 beta and stencil (without angular) - [ionic-conference-app **master** branch](https://github.com/ionic-team/ionic-conference-app/tree/master) is with ionic-angular 3.9.2 - [ionic-conference-app **core-update** branch](https://github.com/ionic-team/ionic-conference-app/tree/core-update) is with @ionic/angular 4 beta ---
**Author:** ![shepard](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@shepard](https://forum.ionicframework.com/u/shepard)\ **Post date:** [August 2, 2018, 2:26pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/6 "2018-08-02T14:26:00Z")
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) ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [August 2, 2018, 2:30pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/7 "2018-08-02T14:30:22Z")
> [@shepard](#): > > 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…? 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 😉 ---
**Author:** ![shepard](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@shepard](https://forum.ionicframework.com/u/shepard)\ **Post date:** [August 2, 2018, 2:37pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/8 "2018-08-02T14:37:31Z")
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). ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [August 2, 2018, 2:45pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/9 "2018-08-02T14:45:32Z")
> [@shepard](#): > > I really do not see renaming all my services (ItemService.ts) to providers (ItemProvider.ts). I didn’t did that neither, my provider are even named `-service.ts` and not `.service.ts` … maybe somehow someday 😉 ---
**Author:** ![shepard](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@shepard](https://forum.ionicframework.com/u/shepard)\ **Post date:** [August 2, 2018, 2:52pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/10 "2018-08-02T14:52:47Z")
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 ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [August 2, 2018, 2:58pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/11 "2018-08-02T14:58:00Z")
thx for the test … still unsure about what are really to “official” best practice, but interesting 😉 ---
**Author:** ![vespinasgmailcom](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vespinasgmailcom/32/127150_2.png) [@vespinasgmailcom](https://forum.ionicframework.com/u/vespinasgmailcom)\ **Post date:** [July 20, 2019, 4:50pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/12 "2019-07-20T16:50:45Z")
I just reached last night to the same conclusion. Although modal pages are pages AND components, it made a lot of sense to group them inside a modals folder, since those aren’t pages you navigate to using the normal router way. Also, despite pages being components, I found more clear to use the components folder only for reusable-component-tags. In my particular case, I have this structure: ```auto componentes: reusable components modals: pages to be used on modal dialogs public: public pages (those you can navigate without authenticate yourself first) private: secured pages (you need to authenticate to access anything under here) services: common services ``` ---
**Author:** ![shepard](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@shepard](https://forum.ionicframework.com/u/shepard)\ **Post date:** [July 20, 2019, 5:15pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/13 "2019-07-20T17:15:47Z")
That is pretty much what I use except for the private/public separation. For my purposes, those two designations are not always black and white due to multiple levels of admin access and one-off access needs to a particular ‘private’ page for special purposes. I let my auth-guard and router handle that. ---
**Author:** ![vespinasgmailcom](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vespinasgmailcom/32/127150_2.png) [@vespinasgmailcom](https://forum.ionicframework.com/u/vespinasgmailcom)\ **Post date:** [July 20, 2019, 8:43pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/14 "2019-07-20T20:43:52Z")
Well, this is my first hybrid app and my first ionic app, so I am sure I will change many things in the way I structure my apps in the future. 🙂 ---
**Author:** ![ginilf](https://avatars.discourse-cdn.com/v4/letter/g/46a35a/32.png) [@ginilf](https://forum.ionicframework.com/u/ginilf)\ **Post date:** [January 7, 2020, 2:44pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/15 "2020-01-07T14:44:55Z")
Hi So can I include one page in another page in this ionic conference app? (i.e. if a page is a component?) ---
**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\ **Post date:** [January 7, 2020, 7:38pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/16 "2020-01-07T19:38:21Z")
Why do you want to do this? It seems a very confusing UX. ---
**Author:** ![ginilf](https://avatars.discourse-cdn.com/v4/letter/g/46a35a/32.png) [@ginilf](https://forum.ionicframework.com/u/ginilf)\ **Post date:** [January 8, 2020, 12:03am UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/17 "2020-01-08T00:03:38Z")
> [@ginilf](#): > > onference ap Yeah i should probably just make components - I guess my question really is, can I change what i’ve put into a page, easily into a component? Sorry, I’m quite new to this. Happy to read any good articles you can point me to. ---
**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\ **Post date:** [January 8, 2020, 12:08am UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/18 "2020-01-08T00:08:20Z")
> [@ginilf](#): > > can I change what i’ve put into a page, easily into a component? That sort of depends what’s in there. If it has navigation stuff like router outlets or tabs, probably would be best to rethink those. If it’s just lists or items or forms, shouldn’t be much of a problem. > [@ginilf](#): > > Happy to read any good articles you can point me to. If you haven’t gone through it, I think [the Tour of Heroes](https://angular.io/tutorial) covers probably 90% of the questions newcomers to Angular app organization and framework idioms tend to have, including the ones they don’t know to ask before going down rabbit holes. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [July 19, 2021, 9:26pm UTC](https://forum.ionicframework.com/t/ionic-4-page-or-component-service-or-provider/136877/19 "2021-07-19T21:26:28Z")
Closed on July 19, 2021, 9:26pm UTC