Angular Project Structure: Best Practices for a Clean and Scalable App

1. Feature-based structure:

   • Organize folders by features of your application.
   • Each feature folder contains all related files like components, templates, styles, and services.
   • This is good for larger applications with distinct functionalities.
2. • Group folders by file types like components, services, directives, etc.
   • This is simpler for smaller projects and easier to find specific file types.

Here are some additional tips for structuring your Angular project:

• Use a flat hierarchy over deep nesting. Only create subfolders when there are many files (more than 15) in a category.
• Name folders and files clearly to reflect their purpose.

Project Root

my-app/
├── src/
│   ├── app/   <-- Root application module
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   └── app.module.ts
│   ├── features/  <-- Feature folders
│   │   ├── dashboard/
│   │   │   ├── dashboard.component.ts
│   │   │   ├── dashboard.component.html
│   │   │   └── dashboard.component.css
│   │   ├── products/
│   │   │   ├── product-list.component.ts
│   │   │   ├── product-list.component.html
│   │   │   ├── product-list.component.css
│   │   │   └── product.service.ts  <-- Feature-specific service
│   │   └── users/
│   │       ├── user-list.component.ts
│   │       ├── user-list.component.html
│   │       └── user-list.component.css
│   ├── shared/  <-- Shared components, directives, etc.
│   │   ├── loading-spinner.component.ts
│   │   └── ...
│   ├── environment.ts
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── package.json
├── ... (other project files)

Explanation:

• The src/app folder contains the root application module and its related files.
• The src/features folder groups feature-specific components, templates, styles, and services.
  • Each feature has its own subfolder (e.g., dashboard, products, users).
  • Feature-specific services can reside within their respective feature folders.
• The src/shared folder houses components, directives, pipes, or services that are used across multiple features.

my-app/
├── src/
│   ├── app/   <-- Root application module
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   └── app.module.ts
│   ├── components/  <-- All application components
│   │   ├── app.component.ts
│   │   ├── dashboard.component.ts
│   │   ├── product-list.component.ts
│   │   └── user-list.component.ts
│   ├── directives/  <-- Custom directives
│   │   └── ...
│   ├── pipes/  <-- Custom pipes
│   │   └── ...
│   ├── services/  <-- All application services
│   │   ├── app.service.ts  <-- Global service
│   │   ├── product.service.ts  <-- Feature-specific service (can be here or in features)
│   │   └── ...
│   ├── environment.ts
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── package.json
├── ... (other project files)

• The src/app folder remains the same as in the feature-based structure.
• Component, directive, pipe, and service files are grouped by type in dedicated folders:
  • src/components contains all application components.
  • src/directives houses custom directives.
  • src/pipes stores custom pipes.
  • src/services holds all application services.
    • Global services can reside in this folder (e.g., app.service.ts).

Choosing the Right Structure

• Additional Tips:

  • Maintain a flat hierarchy as much as possible. Create subfolders only when necessary (many files in a category).
  • Use clear and descriptive folder and file names for easy readability.
  • Consider using a linter or code formatter to enforce consistent naming conventions.

This structure separates concerns by file type across layers:

my-app/
├── src/
│   ├── app/   <-- Root application module
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   └── app.module.ts
│   ├── presentation/  <-- Presentation layer (components, templates, styles)
│   │   ├── app/
│   │   │   ├── app.component.ts
│   │   │   ├── app.component.html
│   │   │   └── app.component.css
│   │   ├── features/
│   │   │   ├── dashboard/
│   │   │   │   ├── dashboard.component.ts
│   │   │   │   ├── dashboard.component.html
│   │   │   │   └── dashboard.component.css
│   │   │   └── ... (other features)
│   │   └── layout/  <-- Shared layout components
│   │       └── header.component.ts
│   ├── data-access/  <-- Data access layer (services, repositories)
│   │   ├── app.service.ts  <-- Global service
│   │   ├── product.service.ts
│   │   └── ... (other services)
│   └── domain/  <-- Domain logic (models, entities)
│       └── product.model.ts
│   ├── environment.ts
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── package.json
├── ... (other project files)

• Separates presentation (UI), data access (services), and domain logic (models) into dedicated folders.
• Offers a clean separation of concerns and promotes reusability of domain models.

This approach combines elements of feature-based and type-based structures, providing flexibility:

my-app/
├── src/
│   ├── app/   <-- Root application module
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   └── app.module.ts
│   ├── features/  <-- Feature folders (optional)
│   │   ├── dashboard/
│   │   │   ├── dashboard.component.ts
│   │   │   ├── dashboard.component.html
│   │   │   └── dashboard.component.css
│   │   └── ... (other features)
│   ├── components/  <-- Shared or global components
│   │   ├── app.component.ts  <-- Can be here or in features
│   │   └── ... (other components)
│   ├── services/  <-- All application services
│   │   ├── app.service.ts  <-- Global service
│   │   ├── product.service.ts  <-- Can be in features or here
│   │   └── ... (other services)
│   └── ... (other folders based on project needs)  <-- Flexible for custom needs
│       ├── directives/
│       ├── pipes/
│       └── ...
│   ├── environment.ts
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── package.json
├── ... (other project files)

• Offers flexibility to use feature folders when needed and group shared components and services separately.
• Adapts well to projects with a mix of feature-specific and global elements.

Custom Structure:

For highly specialized applications, you can tailor the structure to your specific needs. Consider factors like:

• Team size and preferences
• Project complexity and growth expectations
• Specific domain requirements