Angular project structure

Angular project structure

In Angular, a project typically follows a well-defined structure that is generated when you run

ng new my-app

Here’s the standard Angular project structure and what each part does:

Root Level

my-app/
├── node_modules/       # Installed npm dependencies
├── src/                # Application source code
├── angular.json        # Angular workspace configuration 
├── package.json        # npm dependencies and scripts
├── tsconfig.json       # TypeScript compiler configuration
├── .editorconfig       # Editor configuration (formatting rules)
├── .gitignore          # Files ignored by Git
└── README.md           # Project documentation

Inside src/

src/
├── app/                # Root application logic
│   ├── app.component.ts      # Root component logic
│   ├── app.component.html    # Root component template
│   ├── app.component.css     # Root component styles
│   ├── app.component.spec.ts # Root component tests
│   ├── app.module.ts         # Root Angular module
│   └── ... (feature modules, services, etc.)
│
├── assets/             # Images, icons, and other static resources
├── environments/       # Environment-specific settings
│   ├── environment.ts       # Default (dev) environment
│   └── environment.prod.ts  # Production environment
│
├── favicon.ico         # App icon
├── index.html          # Main HTML file, app bootstraps here
├── main.ts             # Entry point; bootstraps AppModule
├── polyfills.ts        # Polyfills for browser compatibility
├── styles.css          # Global styles

Best Practices for Organizing app/

When the app grows, it’s better to structure app/ by features rather than by file type:

app/
├── core/              # Singleton services, global components (header, footer)
├── shared/            # Reusable components, directives, pipes
├── features/          # Feature modules (e.g., users, products, dashboard)
│   ├── users/
│   │   ├── user-list/
│   │   ├── user-detail/
│   │   └── users.module.ts
│   └── products/
│       ├── product-list/
│       ├── product-detail/
│       └── products.module.ts
├── app-routing.module.ts # Centralized routing configuration
└── app.module.ts

✅ Key Points:

  • Feature Modules: Group related components/services for scalability.
  • Core Module: Holds services/components that should only be loaded once (e.g., AuthService).
  • Shared Module: Reusable components/pipes/directives used across the app.
  • Lazy Loading: Improves performance by loading feature modules on demand.

Leave a Reply