Angular Workspace Anatomy: Standalone Components and Signals

Modern Angular eliminates the complexity of NgModule in favor of self-contained Standalone Components.

1. Project Directory Structure

client/
├── src/
│   ├── app/
│   │   ├── core/           # Singletons, interceptors, guards
│   │   ├── shared/         # Reusable UI components, pipes, directives
│   │   ├── features/       # Feature modules (auth, products, dashboard)
│   │   ├── app.component.ts
│   │   ├── app.config.ts   # Dependency providers (Router, HttpClient)
│   │   └── app.routes.ts   # Route definitions
│   ├── assets/
│   ├── index.html
│   └── main.ts             # Application entry point
├── angular.json
├── package.json
└── tsconfig.json

2. Bootstrapping with app.config.ts

// src/app/app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { routes } from './app.routes';
import { jwtInterceptor } from './core/interceptors/jwt.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(withInterceptors([jwtInterceptor]))
  ]
};

3. Minimal Standalone Component Example

// src/app/app.component.ts
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `
    <header class="app-header">
      <h1>{{ title() }}</h1>
    </header>
    <main>
      <router-outlet></router-outlet>
    </main>
  `
})
export class AppComponent {
  title = signal('Devify Enterprise Angular Client');
}