Building a Clean Architecture Angular App with NgRx

Clean architecture is not just a buzzword — it is the difference between an app that scales to 100 developers and one that collapses under its own weight. Here is how we structure every large Angular project.

The Core Principle

Business logic must never depend on the framework. Angular, NgRx, and HTTP are delivery mechanisms — they should sit at the outer ring of your architecture, not the core.

Layer Structure

We use four layers: Domain (pure TypeScript entities and use cases), Application (NgRx feature stores, facades), Infrastructure (HTTP services, local storage adapters), and Presentation (Angular components, pipes, directives).

The Facade Pattern

Components should never dispatch NgRx actions directly. A Facade service sits between the component and the store, keeping components ignorant of state management details and making them trivially testable.