Ionic Angular: Project Structure Suggestion

I would like to share how I manage Ionic Angular project generally.

By using ionic generate command, we can get what Angular features are available in an Ionic Angular project:

> page 
  component 
  service 
  module 
  class 
  directive 
  guard 
  class 
  directive 
  guard 
  pipe 
  interface 
  enum 

I usually divide and group them according to their type (component, service, guard etc.) rather than use case. It can make the project structure cleaner and simplify the syntax of importing exported declarations or modules.

Here is an example of the structure I usually apply

src
├── app
    ├── components
        └── search
            ├── search.component.html
            ├── search.component.scss
            └── search.component.ts
    ├── directives
        ├── disable-click.directive.ts
        └── highlight.directive.ts
    ├── enums
        ├── colors.ts
        └── genders.ts
    ├── guards
        └── auth.guard.ts
    ├── modals
        └── student-info
            ├── student-info.module.ts
            ├── student-info.page.html
            ├── student-info.page.scss
            └── student-info.page.ts
    ├── models
        └── student.ts
    ├── pages
        └── home
            ├── home-routing.module.ts
            ├── home.module.ts
            ├── home.page.html
            ├── home.page.scss
            └── home.page.ts
        └── login
            ├── login-routing.module.ts
            ├── login.module.ts
            ├── login.page.html
            ├── login.page.scss
            └── login.page.ts
    ├── pipes
        └── date.pipe.ts
    ├── services
        ├── auth.service.ts
        └── env.service.ts
    ├── utils
        ├── animations.ts
        └── validators.ts
├── assets
├── environments
├── theme
├── global.scss
├── index.html
├── main.ts
├── polyfills.ts
├── test.ts
└── zone-flags.ts

Key Points

components: This folder consists of all non-page components that is without module.

directives: This folder consists of all Angular directives.

enums: This folder consists of all enums.

guards: This folder consists of all Angular guards.

modals: This folder consists of all page components that is not used for routing but for Ionic modal.

models: This folder consists of all classes that is used to represent MVC's model or so-called DTO (Data Transfer Object).

pages: This folder consists of all page components that should be used for routing.

pipes: This folder consists of all Angular pipes.

services: This folder consists of all Angular injectable services.

utils: This folder consists of all helper classes or functions.

Example

I did not create an example project to demonstrate this structure, but you can take my Ionic app - Simple QR as a real-world reference.

Hope this can help you. Happy coding!