What is the ideal project structure Ionic?


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 :


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.


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.)



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


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/.


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


    β”œβ”€β”€ <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.