This document discusses using Nx for modular monolith architecture in Angular applications. It introduces Nx as a tool for managing monorepos, and describes how it can enforce module boundaries and shared dependencies. The document also presents improved patterns for organizing large enterprise Angular applications in a monorepo, with separate areas for UI, data access, models, routes, and APIs between domains.

1. ng-journal.com
ng-journal.com
Modular Monoliths with
Nx
❤️

2. ng-journal.com
ng-journal.com
About me
• Stefan Haas
• Angular and Nx
• Nx Champion
• Freelancer (open to work)
• Trainer & Consultant
• Blogger

3. ng-journal.com
Motivation
Why you should care about frontend architecture

4. ng-journal.com
Monolith

5. ng-journal.com
Monolith
🪳

6. ng-journal.com
Monolith Modular Monolith

7. ng-journal.com
Monorepos

8. ng-journal.com
ng-journal.com
Lib B
2.0.0
Lib A
Lib C
App
1.3.0
1.3.0 2.0.0
Poly-Repo Approach

9. ng-journal.com
ng-journal.com
Lib B
2.0.0
Lib A
Lib C
App
1.3.0
1.3.0 2.0.0
Version Conflict!
Lib C: 1.3.0
Lib C: 2.0.0
Poly-Repo Approach

10. ng-journal.com
ng-journal.com
Lib B
Lib A
Lib C
App
Monorepo Approach

11. ng-journal.com
Why should you use a Monorepo?

12. ng-journal.com
ng-journal.com
Single Version Policy
Consistent Third-Party Dependencies
No semantic versioning needed
Consistent Tooling

13. ng-journal.com
ng-journal.com
Consuming libraries
Poly-Repo
1. 13.3.4  13.3.5
2. ng build
3. npm publish
4. npm install my-package@13.3.5
Monorepo
1. import { something } from ‘@ng-journal/lib’;

14. ng-journal.com
ng-journal.com
Consuming libraries
Poly-Repo
1. 13.3.4  13.3.5
2. ng build
3. npm publish
4. npm install my-package@13.3.5
Monorepo
1. import { something } from ‘@ng-journal/lib’; 🏆

15. ng-journal.com
Where is the catch?

16. ng-journal.com
LARGE

17. ng-journal.com
Nx
Professional tooling for monorepos

18. ng-journal.com
ng-journal.com
Third Party Tool
• De facto industry standard
• Extends the Angular CLI
• Caching, Interactive Graphs, Generators

19. ng-journal.com
Modularization
Enforcing Module Boundaries

20. ng-journal.com
Traditional Angular Architecture
App
Feature Feature Feature
Shared

21. ng-journal.com
Feature
Feature Feature
Feature
Feature
Feature
Feature
Feature
Feature
Becomes this …

22. ng-journal.com
Boundary A
Boundary B
Feature
Feature Feature
Feature
Feature
Feature
Feature
Feature
Feature

23. ng-journal.com
eslintrc.json

24. ng-journal.com

25. ng-journal.com
Enterprise Monorepo Pattern

26. ng-journal.com
Insurance Portal

27. ng-journal.com
Claim Contract Complaint Shared
Customer
Vertical Slicing

28. ng-journal.com
Claim Contract Complaint Shared
Customer
Vertical Slicing
Domains

29. ng-journal.com
Claim Contract Complaint Shared
Customer
Vertical Slicing
Domains
How to slice an app?

30. ng-journal.com
Claim
Horizontal Slicing

31. ng-journal.com
helper functions
adsfasdfsdfdfdf
business logic, services, state
Smartffffomponensdfffffff
ts
Dumb Components
AAAAAAAAAAAAA
Smart Components
Smart Components
feature-list
feature-
create
ui ui-form
data-access
utils-validators
Claim
feature-
details
Feature
UI
Data Access
Utils

32. ng-journal.com
Sharing dependencies between domains

33. ng-journal.com
Contract Claim
Contract Date
Picker
Direct access is forbidden!

34. ng-journal.com
Contract Claim
Shared
Contract Date
Picker
Shared Kernel

35. ng-journal.com
Contract Claim
Contract Date
Picker
Claim API
Private API

36. ng-journal.com
Contract Claim
Contract Date
Picker
Claim API
1 API for each consuming domain

37. ng-journal.com
One more thing...

38. ng-journal.com
ng-journal.com
Problems with the traditional
Enterprise Monorepo Pattern
• UI is allowed to inject services
• violating the “smart vs dumb component” principle
• Utils are not allowed to use models
• but needed for type predicates
• Where to put routes?

39. ng-journal.com
feature-
list
feature-
create
ui ui-form
data-access
utils-validators
Claim
feature-
details
api
Improved Enterprise
Monorepo Pattern

40. ng-journal.com
feature-
list
feature-
create
ui ui-form
data-access
utils-validators
Claim
feature-
details
api
routes
models
• routes
makes it possible to compose features on a page via
auxiliary routes
• models
contains interfaces
• ui
not allowed to depend on data-access
Improved Enterprise
Monorepo Pattern

41. ng-journal.com
<demo/>
</>
{ }
&&

42. ng-journal.com
GitHub - Repo
github.com/HaasStefan/ng-journal-insurance-
portal

43. ng-journal.com
Nx Workshop
• More on Modularization
• Nx Caching
• Distributed Caching
• Incremental Builds
• Custom Remote Cache
• Nx Plugins
• Generators
• @nx/devkit
• EJS
• CI/CD
ng-journal.com/workshops/nx-scaling-
angular-applications