Recommended Angular Project Structure for Large Projects - dialloi659/angular GitHub Wiki

Recommended Angular Project Structure for Large Projects (Angular 17)

A well-organized Angular project structure is essential for maintaining the codebase, facilitating collaboration, and ensuring long-term maintainability. Below is an expanded and detailed structure for a large Angular 17 application, that include features such as transactions, counterparties, and categories.

Project Structure

angular-app/
├── e2e/                        # End-to-end tests
├── node_modules/               # npm dependencies
├── src/                        # Main source folder
│   ├── app/                    # Main application folder
│   │   ├── core/               # Core services and components shared across the application
│   │   │   ├── components/     # Global components like user profile, login, etc.
│   │   │   ├── guards/         # Authentication and other guards
│   │   │   ├── interceptors/   # HTTP interceptors
│   │   │   ├── services/       # Global services like AuthService, etc.
│   │   │   ├── store/          # Global state management, AppStore, AppState, etc.
│   │   │   ├── utils/          # Utilities and helper functions
│   │   │   ├── core.module.ts  # Core module to group all core elements
│   │   ├── features/           # Feature-specific modules and components
│   │   │   ├── dashboard/      # Dashboard feature
│   │   │   │   ├── components/ # Dashboard components
│   │   │   │   ├── containers/ # Dashboard containers
│   │   │   │   ├── guards/     # Dashboard guards
│   │   │   │   ├── services/   # Dashboard services
│   │   │   │   ├── models/     # Dashboard models
│   │   │   │   ├── dashboard.module.ts  # Dashboard-specific module
│   │   │   ├── transactions/   # Transaction feature
│   │   │   │   ├── components/ # Transaction components
│   │   │   │   │   ├── transaction-filter # Filter component
│   │   │   │   │   ├── transaction-form  # Form component
│   │   │   │   ├── containers/ # Transaction-specific containers
│   │   │   │   │   ├── transaction-list/   # List container
│   │   │   │   │   ├── transaction-create/ # Create container
│   │   │   │   │   ├── transaction-update/ # Update container
│   │   │   │   ├── guards/     # Transaction guards
│   │   │   │   ├── services/   # Transaction services
│   │   │   │   ├── models/     # Transaction models
│   │   │   │   ├── transaction.routes.ts  # Transaction routes
│   │   │   │   ├── transaction.module.ts  # Transaction module
│   │   │   ├── counterparties/ # Counterparty feature
│   │   │   │   ├── components/ # Counterparty components
│   │   │   │   │   ├── counterparty-filter # Filter component
│   │   │   │   │   ├── counterparty-form  # Form component
│   │   │   │   ├── containers/ # Counterparty containers
│   │   │   │   │   ├── counterparty-list/   # List container
│   │   │   │   │   ├── counterparty-create/ # Create container
│   │   │   │   │   ├── counterparty-update/ # Update container
│   │   │   │   ├── guards/     # Counterparty guards
│   │   │   │   ├── services/   # Counterparty services
│   │   │   │   ├── models/     # Counterparty models
│   │   │   │   ├── counterparty.module.ts  # Counterparty module
│   │   │   │   ├── counterparty.routes.ts  # Counterparty routes
│   │   │   ├── categories/     # Categories feature
│   │   │   │   ├── components/ # Category components
│   │   │   │   │   ├── category-filter # Filter component
│   │   │   │   │   ├── category-form  # Form component
│   │   │   │   ├── containers/ # Category containers
│   │   │   │   │   ├── category-list/   # List container
│   │   │   │   │   ├── category-create/ # Create container
│   │   │   │   │   ├── category-update/ # Update container
│   │   │   │   ├── guards/     # Category guards
│   │   │   │   ├── services/   # Category services
│   │   │   │   ├── models/     # Category models
│   │   │   │   ├── category.module.ts  # Category module
│   │   │   │   ├── category.routes.ts  # Category routes
│   │   │   ├── app.component.ts
│   │   │   ├── app.component.scss
│   │   │   ├── app.component.spec.ts
│   │   │   ├── app.config.ts
│   │   │   ├── app.routes.ts
│   │   ├── shared/             # Reusable and shared components, directives, and pipes
│   │   │   ├── components/     # Reusable components
│   │   │   ├── directives/     # Reusable directives
│   │   │   ├── pipes/          # Reusable pipes
│   │   │   ├── models/         # Shared data models
│   │   │   ├── services/       # Reusable services
│   │   │   ├── shared.module.ts  # Shared module to group all shared elements
│   │   ├── assets/             # Static files like images, icons, etc.
│   │   ├── environments/       # Environment files
│   │   │   ├── environment.prod.ts  # Production environment configuration
│   │   │   ├── environment.tst.ts   # TST environment configuration
│   │   │   ├── environment.ts       # Development environment configuration
│   │   ├── styles.scss              # Global styles
│   │   ├── index.html          # Main HTML file
│   │   ├── main.ts             # Main entry point of the application
│   │   ├── test.ts             # Entry point for unit tests
│   │   ├── tsconfig.app.json   # TypeScript configuration for the application
│   │   ├── tsconfig.spec.json  # TypeScript configuration for tests
├── .editorconfig               # Editor configuration
├── .gitignore                  # Git ignore file
├── angular.json                # Angular CLI configuration
├── package.json                # npm dependencies file
├── README.md                   # Project documentation
├── tsconfig.json               # TypeScript configuration
├── tslint.json                 # TSLint configuration

Detailed Explanation

core/

The core folder contains services and components that are used globally throughout the application.

  • components/: Contains global components like user profile, login, etc.
  • guards/: Contains authentication and other guards.
  • interceptors/: Contains HTTP interceptors.
  • services/: Contains global services like AuthService.
  • store/: Contains global state management (e.g., using NgRx or other state management libraries).
  • utils/: Contains utility functions and helpers.
  • core.module.ts: Core module to group all core elements.
Example files in core/:
  • services/auth.service.ts: Authentication service.
  • guards/auth.guard.ts: Authentication guard.
  • interceptors/auth.interceptor.ts: HTTP interceptor for adding auth tokens.
  • store/app.state.ts: Defines the global application state.
  • utils/logger.util.ts: Logger utility for consistent logging.

features/

The features folder is divided into sub-folders for each feature module in the application.

  • dashboard/: Dashboard feature module.

    • components/: Dashboard-specific components.
    • containers/: Dashboard-specific containers.
    • guards/: Dashboard-specific guards.
    • services/: Dashboard-specific services.
    • models/: Dashboard-specific models.
    • dashboard.module.ts: Dashboard-specific module.

  • transactions/: Transactions feature module.

    • components/: Transaction-specific components.
      • transaction-filter/: Components for filtering transactions.
      • transaction-form/: Form components for transactions.
    • containers/: Transaction-specific containers.
      • transaction-list/: List container.
      • transaction-create/: Create container.
      • transaction-update/: Update container.
    • guards/: Transaction-specific guards.
    • services/: Transaction-specific services.
    • models/: Transaction-specific models.
    • transaction.routes.ts: Routing

configuration for transactions.

  • transaction.module.ts: Transaction-specific module.

  • counterparties/: Counterparty feature module.

    • components/: Counterparty-specific components.
      • counterparty-filter/: Components for filtering counterparties.
      • counterparty-form/: Form components for counterparties.
    • containers/: Counterparty-specific containers.
      • counterparty-list/: List container.
      • counterparty-create/: Create container.
      • counterparty-update/: Update container.
    • guards/: Counterparty-specific guards.
    • services/: Counterparty-specific services.
    • models/: Counterparty-specific models.
    • counterparty.routes.ts: Routing configuration for counterparties.
    • counterparty.module.ts: Counterparty-specific module.

  • categories/: Categories feature module.

    • components/: Category-specific components.
      • category-filter/: Components for filtering categories.
      • category-form/: Form components for categories.
    • containers/: Category-specific containers.
      • category-list/: List container.
      • category-create/: Create container.
      • category-update/: Update container.
    • guards/: Category-specific guards.
    • services/: Category-specific services.
    • models/: Category-specific models.
    • category.routes.ts: Routing configuration for categories.
    • category.module.ts: Category-specific module.
Example files in features/:
  • dashboard/components/dashboard-overview.component.ts: Component for the dashboard overview.
  • transactions/components/transaction-filter/transaction-filter.component.ts: Component for filtering transactions.
  • counterparties/services/counterparty.service.ts: Service for managing counterparties.
  • categories/models/category.model.ts: Data model for categories.

shared/

The shared folder contains reusable components, directives, pipes, and services that can be used across multiple features.

  • components/: Reusable components.
  • directives/: Reusable directives.
  • pipes/: Reusable pipes.
  • models/: Shared data models.
  • services/: Reusable services.
  • shared.module.ts: Shared module to group all shared elements.
Example files in shared/:
  • components/loading-spinner/loading-spinner.component.ts: Reusable loading spinner component.
  • directives/highlight.directive.ts: Directive for highlighting text.
  • pipes/date-format.pipe.ts: Pipe for formatting dates.
  • models/user.model.ts: Shared user data model.
  • services/notification.service.ts: Service for managing notifications.

Best Practices

  1. Modularity and Encapsulation: Keep features encapsulated within their own modules for better separation of concerns.
  2. Reusability: Use the shared folder for components, directives, pipes, and services that are used across multiple features.
  3. Lazy Loading: Implement lazy loading for feature modules to improve performance by loading modules on demand.
  4. Testing: Add unit tests and end-to-end tests for each component, service, and feature.
  5. Documentation: Maintain up-to-date documentation for each module and component to facilitate maintenance and collaboration.

This structure helps manage the complexity of large Angular projects by keeping the code organized, modular, and maintainable.