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.
core/
:
Example files in 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
- components/: Transaction-specific components.
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.
- components/: Counterparty-specific components.
-
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.
- components/: Category-specific components.
features/
:
Example files in 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.
shared/
:
Example files in 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
- Modularity and Encapsulation: Keep features encapsulated within their own modules for better separation of concerns.
- Reusability: Use the
shared
folder for components, directives, pipes, and services that are used across multiple features. - Lazy Loading: Implement lazy loading for feature modules to improve performance by loading modules on demand.
- Testing: Add unit tests and end-to-end tests for each component, service, and feature.
- 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.