Feature Folders and Standalone Patterns

Grouping code by feature keeps related components, routes, and services in one folder, making the codebase easier to navigate and maintain.

Feature Folder Structure

src/app/
├── core/                    # Singleton services, guards, interceptors
│   ├── services/
│   │   ├── auth.service.ts
│   │   └── logger.service.ts
│   ├── guards/
│   │   └── auth.guard.ts
│   ├── interceptors/
│   │   └── auth.interceptor.ts
│   └── core.module.ts       # Or provideCore() function
│
├── shared/                  # Reusable components, pipes, directives
│   ├── components/
│   │   ├── button/
│   │   ├── modal/
│   │   └── card/
│   ├── pipes/
│   ├── directives/
│   └── shared.module.ts     # Or standalone imports
│
├── features/                # Feature modules
│   ├── users/
│   │   ├── components/
│   │   │   ├── user-list/
│   │   │   ├── user-detail/
│   │   │   └── user-form/
│   │   ├── services/
│   │   │   └── user.service.ts
│   │   ├── models/
│   │   │   └── user.model.ts
│   │   ├── store/           # NgRx or signal state
│   │   │   ├── user.actions.ts
│   │   │   ├── user.reducer.ts
│   │   │   └── user.selectors.ts
│   │   └── users.routes.ts
│   │
│   ├── products/
│   │   ├── components/
│   │   ├── services/
│   │   ├── models/
│   │   └── products.routes.ts
│   │
│   └── dashboard/
│       ├── components/
│       └── dashboard.routes.ts
│
└── app.component.ts

Core vs Shared

Standalone components import only the directives and pipes they actually use, making dependencies explicit.

Standalone Component Imports

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { HighlightDirective } from '../../shared/directives/highlight.directive';
import { TruncatePipe } from '../../shared/pipes/truncate.pipe';

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    ReactiveFormsModule,
    HighlightDirective,
    TruncatePipe,
  ],
  template: `...`,
})
export class UserListComponent {}

Barrel Exports

// shared/index.ts
export * from './components/button/button.component';
export * from './components/modal/modal.component';
export * from './pipes/truncate.pipe';
export * from './directives/highlight.directive';

Feature Routes

// features/users/users.routes.ts
import { Routes } from '@angular/router';

export const USERS_ROUTES: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./components/user-list/user-list.component').then(m => m.UserListComponent),
  },
  {
    path: ':id',
    loadComponent: () =>
      import('./components/user-detail/user-detail.component').then(m => m.UserDetailComponent),
  },
];