What is the ideal project structure Ionic?


#1

Hello everybody,

To start, sorry for my English.

I am a beginner in ionic and I wanted to know how to properly structure my application (in src folder).
I use in my application a tabcontroller with 3 tabs, and with the Ionic creator, I have the following structure :

src
app
app.component.ts
…
pages
folder1
page1.component.ts
page1.template.html
page1.template.css
folder2
page2.component.ts
page2.template.html
page2.template.css

I stopped using Ionic Creator, and I would like to have a good structure in case the application grows.

I know that in Angular 4, we separate the different modules as well as the services …
But is it the same for Ionic 3 app ?

If I do like for Angular 4, could I still use Navigation with NavController?

Thanks in advance.


#2

I use a variant of this. (My variation includes for example an Effects folder for ngrx effects. You might want/need to do something like that, depending on what libraries you use. But the material in the link is excellent.)

https://angular.io/guide/styleguide#folders-by-feature-structure


#3

Thank you very much for your answer.
I Will follow this way to structure my app.


#4

Old thread, but just an input.

What is recommended by Angular Style Guide is actually different from ionic. For my project, since it’s managed by different people, I prefer to use the default folder structure specified by ionic.

For example, ionic generate provider http will create a HttpProvider in /providers/http/.


#5

I use: https://github.com/Robinyo/ionic-angular-schematics

Goals

    β”œβ”€β”€ <PROJECT_ROOT>
        └── /src
            └── /app                                  -  App Module
                β”œβ”€β”€ app.component.ts
                β”œβ”€β”€ app.html
                β”œβ”€β”€ app.module.ts
                β”œβ”€β”€ app.scss
                β”œβ”€β”€ main.ts
                └── /core                             - Core Feature Module (e.g., Singleton Services/Providers)
                    β”œβ”€β”€ core.module.ts
                    β”œβ”€β”€ module-import-guard.ts  
                    └── /logger
                        β”œβ”€β”€ console-logger.service.ts
                        β”œβ”€β”€ logger.service.ts                               
                └── /pages                            - Page (Component) Modules
                    └── /home
                        β”œβ”€β”€ home.page.html
                        β”œβ”€β”€ home.page.module.ts 
                        β”œβ”€β”€ home.page.scss   
                        β”œβ”€β”€ home.page.spec.ts
                        β”œβ”€β”€ home.page.ts                                                                                                               
                └── /shared                           - Shared Feature Module (shared Components, Directives and Pipes)
                    β”œβ”€β”€ shared.module.ts                
            └── /assets
            └── /environments                         - Environment specific configuration   
                β”œβ”€β”€ environment.dev.ts
                β”œβ”€β”€ environment.ts                        
            └── /theme
                β”œβ”€β”€ facebook-messenger-theme.scss            
                β”œβ”€β”€ gradient-mixins.scss
                β”œβ”€β”€ gradient.scss
                β”œβ”€β”€ green-and-blue-theme.scss                    
                β”œβ”€β”€ variables.scss
            β”œβ”€β”€ index.html
            β”œβ”€β”€ manifest.json
            β”œβ”€β”€ service-worker.js
        └── /config                                   - Webpack Configuration
            β”œβ”€β”€ webpack.config.json
        └── /e2e                                      - E2E Test Configuration
            β”œβ”€β”€ app.e2e-spec.ts
            β”œβ”€β”€ app.po.ts
            β”œβ”€β”€ tsconfig.e2e.json
        └── /resources                                - Default Resources (e.g., Icon and Splash)
        └── /www                                      - Ionics 'dist' directory
            └── /assets
            └── /build   
            β”œβ”€β”€ index.html
            β”œβ”€β”€ manifest.json
            β”œβ”€β”€ service-worker.js
        β”œβ”€β”€ .editorconfig
        β”œβ”€β”€ .gitignore
        β”œβ”€β”€ config.xml
        β”œβ”€β”€ ionic.config.json
        β”œβ”€β”€ karma.conf.json           
        β”œβ”€β”€ package.json
        β”œβ”€β”€ protractor.conf.json
        β”œβ”€β”€ README.md     
        β”œβ”€β”€ tsconfig.json
        β”œβ”€β”€ tsconfig.ng-cli.json        
        β”œβ”€β”€ tslint.json             

Note: See this post re Shared Feature Module (Shared Common Modules) v Encapsulated Modules.