> Markdown version of [/videos/5-sustainable-angular-architectures-with-nx-and-strategic-design?t=2732](https://www.wearedevelopers.com/videos/5-sustainable-angular-architectures-with-nx-and-strategic-design?t=2732). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Sustainable Angular Architectures with Nx and Strategic Design

Manfred Steyer reveals how to eliminate the dreaded frontend big ball of mud. Combine Domain-Driven Design with Nx workspaces to build sustainable, strictly bounded Angular architectures.

- **Speakers:** [Manfred Steyer](https://www.wearedevelopers.com/@manfred-steyer)
- **Event:** WeAreDevelopers LIVE
- **Published:** June 12, 2020
- **Duration:** 50:57
- **URL:** https://www.wearedevelopers.com/videos/5-sustainable-angular-architectures-with-nx-and-strategic-design

## Summary

Building long-lasting Angular applications requires more than just following best practices; it demands a structural methodology that prevents the dreaded big ball of mud. Manfred Steyer outlines a model for sustainable Angular architecture by combining Domain-Driven Design (DDD) with Nx monorepository tooling. By adopting the strategic design facet of DDD, developers can systematically decompose massive frontend applications into manageable, loosely coupled subdomains that remain maintainable over a long app lifecycle. This approach leverages the strict boundaries of an Nx workspace to enforce organizational layer rules. Steyer demonstrates how to subdivide domains into specific functional layers: feature libraries mapping to use cases (smart components), domain models handling state and data access, utility blocks housing reusable UI (dumb components), and shared APIs for cross-boundary communication. Utilizing this modular strategy establishes clear dependency constraints, inherently preventing cyclical dependencies and unauthorized cross-domain access. As Steyer notes, secrets are one aspect of a solid architecture, because everything you keep a secret can be changed easily afterwards. Beyond theoretical architecture, Nx supercharges this methodology with immediate developer experience enhancements. Visual dependency graphs make the architecture continuously observable, while automated linting rules enforce module access boundaries directly inside the CI pipeline. Structuring an application into fine-grained libraries turns those elements into discrete units of testing and recombination. Using the Nx affected command suite drastically reduces build execution times by recompiling and testing only the specific libraries altered by an incoming change.

**Keywords:** angular enterprise architecture, domain-driven design, strategic design, nx monorepo workspace, frontend monorepo strategies, architectural boundaries, dependency graph visualization, smart vs dumb components, circular dependency prevention, incremental build tools, angular cli integration, access restriction linting, shared kernel pattern, state management facade, monolithic application decomposition

## Chapters

1. **Building long-term Angular architectures with domain-driven design** (00:16) — Creating sustainable enterprise applications requires balancing design methodologies like domain-driven design with an experienced team logic.
1. **Applying strategic domain-driven design for sub-domains** (04:50) — Decomposing large codebases into isolated sub-domains prevents unintended side effects and tangled architectural logic.
1. **Managing scale and dependencies using mono repositories** (08:25) — Grouping isolated projects under a single workspace eliminates versioning conflicts and simplifies library distribution burdens.
1. **Enhancing Angular workspaces with native Nx capabilities** (14:03) — Adopting an Nx workspace over a standard Angular CLI environment enables advanced visual dependency graphing.
1. **Structuring Nx workspaces with domain and shared libraries** (15:52) — Dividing modules into features, utility components, and domain layers enforces clear application boundaries and code reuse.
1. **Enforcing architectural boundaries and module access restrictions** (20:12) — Implementing explicit boundary access rules avoids deep cyclic dependencies and prevents the shared kernel from mutating into a monolith.
1. **Managing domain logic using infrastructure and facade patterns** (25:51) — Separating domain models from APIs using a facade orchestrates use cases efficiently while paving a path to integrated state management.
1. **Exploring a domain-driven Nx workspace source code** (30:40) — Exposing only specific components via index files maintains strict interface stability while keeping implementation details internal.
1. **Visualizing dependencies and linting architectural module constraints** (36:25) — Adding tags to module configuration parameters powers custom linting rules that block illegal imports directly in continuous integration pipelines.
1. **Accelerating continuous integration builds with affected tools** (42:14) — Utilizing git diff insights enables developers to selectively build and test only the modified slices of an entire monorepo.
1. **Replacing Angular modules with lightweight fine-grained libraries** (45:32) — Decomposing heavy logic into granular libraries yields superior caching boundaries while moving away from traditional Angular module patterns.

## Related Moments

- [Managing enterprise monorepos using Nx tooling features](https://www.wearedevelopers.com/videos/492-stairway-to-heaven-scaling-frontends-the-right-way) (from "Stairway to Heaven - Scaling Frontends the Right Way")
- [Debunking common misconceptions about the Nx ecosystem](https://www.wearedevelopers.com/videos/292-nx-the-easy-choice) (from "Nx - the easy choice")
- [Evaluating the long-term trajectory of the Angular framework](https://www.wearedevelopers.com/videos/317-differential-loading) (from "Differential Loading")
- [Fundamental architecture and modules in Angular applications](https://www.wearedevelopers.com/videos/685-angular-unleashed-mastering-modern-web-development-with-angular) (from "Angular Unleashed: Mastering Modern Web Development with Angular")
- [Restructuring the monolith using domain-driven design](https://www.wearedevelopers.com/videos/1206-single-server-global-reach-running-a-worldwide-marketplace-on-bare-metal-in-a-cloud-dominated-world) (from "Single Server, Global Reach: Running a Worldwide Marketplace on Bare Metal in a Cloud-Dominated World")
- [Structuring engineering teams around domain bounded contexts](https://www.wearedevelopers.com/videos/64-shared-mobility-for-everyone) (from "Shared mobility for everyone!")

## Related Articles

- [Why Event-Driven Architecture Isn’t About Speed (and When You Actually Need It)](https://www.wearedevelopers.com/magazine/745-why-event-driven-architecture-isn-t-about-speed-and-when-you-actually-need-it)
- [Dev Digest 132 - Binging WADFlix?](https://www.wearedevelopers.com/magazine/473-dev-digest-132-binging-wadflix)
- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)
- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)

## Related Jobs

- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Agile Full Stack Engineer](https://www.wearedevelopers.com/jobs/48325-agile-full-stack-engineer) at **synava GmbH**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Senior Software Engineer, Angular (B2C Web Platform)](https://www.wearedevelopers.com/jobs/ext/1927757-senior-software-engineer-angular-b2c-web-platform) at **Bitpanda**
- [Senior Fullstack Engineer, Angular & Nestjs (Defi Wallet)](https://www.wearedevelopers.com/jobs/ext/1983681-senior-fullstack-engineer-angular-nestjs-defi-wallet) at **Bitpanda**