Folder structures using angular 5 and ionic 3

Ionic Framework ionic-v3
1

Hi guys,
I don’t know how to set structure of folders in my project. I don’t get it:

What are the differences between pages and app?
I saw in many projects that in app folder there are only initial files for angular (app.component, app.module etc) and in pages we have whole other things (components with ionic-components etc).
1.Should I treat every page as different module for IONIC?

2.When should I put components into app folder and when in pages?

My proposition is to split folders structure for folders:
app - here are all files with architecture from angular documentation (nothing from ionic)
pages - only files for Ionic for specific page (with importing needed components from app folder) - so only templates for pages with ionic-components and imported files from app folder

That structure make my components reusable not only for IONIC app but also for independent angular app. Am I right?

Please help me, without that knowledge I won’t start my project. I was looking inside ionic docs but nothing special I’ve found.

Edit.1
I know that using Angular’s guideline for structuring folders/files don’t give us feature of lazy loading.
So you need to do it like here:

2

I use the Angular feature module strucure, with the following change. Since Ionic lazy loading is page-based instead of module-based, I spit the feature module into “providers” and “lazy-loadables.” Then I register the providers at startup, using ModuleWithProviders, and lazy-load the page module as explained in the link you posted.

1 Like