Ionic Project Structure
A scalable and maintainable folder structure for Ionic applications
File Structure
- src
- index.html
- main.ts
- app
- app.component.ts
- app.component.html
- app.module.ts
- app-routing.module.ts
- pages
- home
- home.page.ts
- home.page.html
- home.page.scss
- home.module.ts
- home-routing.module.ts
- tabs
- tabs.page.ts
- tabs.page.html
- tabs.page.scss
- tabs.module.ts
- tabs-routing.module.ts
- components
- shared
- header
- footer
- loading
- services
- api.service.ts
- auth.service.ts
- storage.service.ts
- guards
- auth.guard.ts
- models
- user.model.ts
- api.model.ts
- utils
- constants.ts
- helpers.ts
- assets
- images
- fonts
- icons
- e2e
- src
- ionic.config.json
- angular.json
- capacitor.config.ts
- package.json
- tsconfig.json
- karma.conf.js
- README.md
Directory Structure Explanation
pages/home/home-routing.module.ts
Routing module for the home page defining child routes and navigation.
components/shared/
Shared components organized by functionality for reuse across the application.
src/guards/
Contains Angular route guards for protecting routes and handling navigation logic.
guards/auth.guard.ts
Route guard for protecting authenticated routes and handling authorization.
src/models/
Contains TypeScript interfaces and models for type safety and data structure.
models/user.model.ts
TypeScript interface defining the structure of user data throughout the app.
src/utils/
Contains utility functions, constants, and helper methods used across the app.
utils/constants.ts
Application-wide constants including API endpoints and configuration values.
capacitor.config.ts
Capacitor configuration for native mobile app functionality and plugins.
e2e/
End-to-end testing directory containing tests for complete user workflows.