Scalable Angular Architectures with Route-Based Architecture

Architecture decisions in Angular often start with the routes. In this talk, Fabian Gosebrink shows how clean modules, libraries, and state areas can be derived from routing structures. With Nx, he supports modularization and keeps dependencies under control. The result: an architecture that grows with its requirements and gives teams clear orientation. Attendees learn how to structure complex applications along their routes and keep them maintainable over the long term.

Transcript

1. ROUTE BASED ARCHITECTURE
2. HI I AM FABIAN
3. WHERE TO PUT MY FILES AND FOLDERS?
5. IT STARTED SMALL...
6. 1 app/ products.component.ts 2 product.component.ts 3 checkout.component.ts 4 header.component.ts 5 products.service.ts 6 checkout.service.ts 7 product.model.ts 8
7. ADDING MORE...
8. 1 app/ 2 products.component.ts 3 product.component.ts 4 checkout.component.ts 5 header.component.ts 6 products.service.ts 7 checkout.service.ts 8 product.model.ts 9 10 product-detail.component.ts 11 product-image.component.ts 12 product-info.component.ts 13 product-detail.service.ts 14 cart.model.ts ... 15
9. 1 app/ 2 products.component.ts 3 product.component.ts 4 checkout.component.ts 5 header.component.ts 6 products.service.ts 7 checkout.service.ts 8 product.model.ts 9 product-detail.component.ts 10 product-image.component.ts 11 product-info.component.ts 12 product-detail.service.ts 13 cart.model.ts 14 15 ...
10. THIS IS GETTING MESSY
11. 1 app/ components/ 2 services/ 3 models/ 4 app.routes.ts 5
12. MUCH BETTER
13. UNTIL...
14. 1 app/ 2 components/ products/ 3 product-detail/ 4 checkout/ 5 header/ 6 7 services/ 8 products.service.ts 9 product-detail.service.ts 10 checkout.service.ts 11 12 models/ 13 14 product.model.ts 15 cart.model.ts
15. WHERE IS PRODUCT DETAIL?
16. 1 app/ 2 components/ products/ 3 product-detail/ 4 checkout/ 5 header/ 6 7 services/ 8 products.service.ts 9 product-detail.service.ts 10 checkout.service.ts 11 12 models/ 13 product.model.ts 14 cart.model.ts 15
17. 1 app/ 2 components/ products/ 3 product-detail/ 4 5 checkout/ 6 header/ 7 8 services/ 9 products.service.ts 10 product-detail.service.ts 11 checkout.service.ts 12 13 models/ 14 product.model.ts 15 cart.model.ts
18. 1 app/ 2 components/ 3 products/ product-detail/ 4 5 checkout/ 6 header/ 7 8 services/ 9 products.service.ts product-detail.service.ts 10 11 checkout.service.ts 12 13 models/ 14 product.model.ts 15 cart.model.ts
19. 1 app/ 2 components/ 3 products/ product-detail/ 4 5 checkout/ 6 header/ 7 8 services/ 9 products.service.ts product-detail.service.ts 10 11 checkout.service.ts 12 13 models/ product.model.ts 14 15 cart.model.ts
20. THE FEATURE IS SCATTERED
21. WHAT CODE IS 1 app/ components/ 2 3 services/ models/ 4 5 app.routes.ts
22. WHAT CODE DOES 1 app/ products 2 3 product-detail checkout 4
23. THE NAME SAYS WHAT
24. THE NAME SAYS WHAT THE FOLDER SAYS WHY
25. WHAT CHANGES TOGETHER?
26. FEATURES ARE VERTICAL SLICES
27. Products Product Detail Checkout UI UI UI Logic Logic Logic Data Data Data
28. 1 2 export const routes: Routes = [ { path: 'products', ... }, 3 { path: 'products/:id', ... }, 4 { path: 'checkout', ... }, 5 6 ];
29. UI TELLS YOU MORE THAN YOU THINK!
30. 1 features/ 2 products/ product-detail/ 3 checkout/ 4
31. 1 features/ 2 products/ container/ 3 presentational/ 4 5 ... 6 product-detail/ 7 checkout/
32. 1 features/ 2 products/ 3 container/ 4 products/ 5 presentational/ 6 product/ 7 product-category/ 8 service/ 9 products.service.ts
33. OWNERSHIP
34. LOCALIZE WHEN POSSIBLE
35. GLOBALIZE WHEN NEEDED
36. 1 features/ 2 product-detail/ 3 container/ 4 presentational/ 5 ...
37. 1 product-detail/ 2 container/ 3 product-detail/ 4 presentational/ 5 add-to-cart-button/ 6 product-image/ 7 product-info/ 8 service/ 9 product-detail.service.ts
38. /products/:id features/ products/ product-detail/
39. /products/:id features/ products/ product-detail/
40. products/ → product listing → service product-detail/ → detail page → image → product info → add-to-cart → service
41. URL NAVIGATION CONTEXT
42. CODE STRUCTURE OWNERSHIP BOUNDARIES
43. STRONG ARCHITECTURAL SIGNAL
44. ROUTE HIERARCHY INFLUENCES ARCHITECTURE
45. ROUTE HIERARCHY INFLUENCES ARCHITECTURE IT DOES NOT DICTATE 1:1 FOLDER HIERARCHY
46. STRONG ARCHITECTURAL SIGNAL
47. NAVIGATION BOUNDARIES FEATURE BOUNDARIES
48. FEATURE BOUNDARIES LAZY LOADING BOUNDARIES
49. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 { path: 'products', loadComponent: () => import('...').then((c) => c.ProductsComponent), }, { path: 'products/:id', loadComponent: () => import('...').then((c) => c.ProductDetailComponent), }, { path: 'checkout', loadComponent: () => import('...').then((c) => c.CheckoutComponent), }
50. 1 { path: 'checkout', 2 providers: [ 3 4 provideState({ name: featureKey, reducer: featureReducer }), 5 provideEffects(FeatureEffects), ], 6 children: [...] 7 8 }
51. 1 { 2 products: { 3 ... }, 4 product-detail: { 5 6 ... 7 }, 8 checkout: { 9 ... 10 } 11 }
52. A FEATURE COMES WITH ITS ROUTES
53. 1 // features/checkout/checkout.routes.ts 2 3 export const checkoutRoutes: Routes = [ 4 { path: '', component: CheckoutComponent }, 5 { path: 'address', component: AddressComponent }, 6 { path: 'payment', component: PaymentComponent }, 7 { path: 'summary', component: SummaryComponent }, 8 ];
54. 1 // features/checkout/checkout.routes.ts 2 3 export const checkoutRoutes: Routes = [ 4 { path: '', component: CheckoutComponent }, 5 { path: 'address', component: AddressComponent }, 6 { path: 'payment', component: PaymentComponent }, 7 { path: 'summary', component: SummaryComponent }, 8 ];
55. 1 // features/checkout/checkout.routes.ts 2 3 export const checkoutRoutes: Routes = [ 4 { path: '', component: CheckoutComponent }, 5 { path: 'address', component: AddressComponent }, 6 { path: 'payment', component: PaymentComponent }, 7 { path: 'summary', component: SummaryComponent }, 8 ];
56. 1 // app.routes.ts 2 3 { 4 path: 'checkout', 5 loadChildren: () => 6 import('./features/checkout').then((m) => m.checkoutRoutes), 7 }
57. 1 // app.routes.ts 2 3 { 4 path: 'checkout', 5 loadChildren: () => 6 import('./features/checkout').then((m) => m.checkoutRoutes), 7 }
58. THE APP KNOWS THE ENTRY POINT NOTHING ELSE
59. WHEN DOES A FEATURE SPLIT?
60. 1 features/ 2 checkout/ 3 checkout.routes.ts 4 container/ 5 checkout/ 6 address/ 7 payment/ 8 payment-method/ 9 credit-card/ 10 paypal/ summary/ 11 12 confirmation/ 13 presentational/ 14 ... 23 folders
61. 1 features/ 2 checkout/ 3 checkout.routes.ts 4 container/ 5 checkout/ 6 address/ 7 payment/ 8 payment-method/ 9 credit-card/ 10 paypal/ 11 summary/ 12 confirmation/ 13 presentational/ 14 ... 23 folders
62. 1 features/ 2 checkout/ 3 checkout.routes.ts 4 container/ 5 checkout/ 6 address/ 7 payment/ 8 payment-method/ 9 credit-card/ 10 paypal/ summary/ 11 12 confirmation/ 13 presentational/ 14 ... 23 folders
63. 1 features/ 2 checkout/ 3 checkout.routes.ts 4 container/ 5 checkout/ 6 address/ 7 payment/ 8 payment-method/ 9 credit-card/ 10 paypal/ 11 summary/ 12 confirmation/ 13 presentational/ 14 ... 23 folders
64. ONE LEVEL UP
65. 1 features/ 2 checkout/ 3 checkout.routes.ts 4 main/ 5 container/ 6 presentational/ 7 ... 8 payment/ 9 payment.routes.ts container/ 10 presentational/ 11 12 ...
66. 1 features/ 2 checkout/ 3 checkout.routes.ts 4 main/ 5 container/ 6 presentational/ 7 ... 8 payment/ 9 payment.routes.ts 10 container/ 11 presentational/ 12 ...
67. 1 features/ 2 checkout/ 3 checkout.routes.ts 4 main/ 5 container/ 6 presentational/ 7 ... 8 payment/ 9 payment.routes.ts container/ 10 presentational/ 11 12 ...
68. 1 features/ 2 checkout/ 3 checkout.routes.ts 4 main/ 5 container/ 6 presentational/ 7 ... 8 payment/ 9 payment.routes.ts 10 container/ 11 presentational/ 12 ...
69. FEATURE NEVER TALKS SIDEWAYS
71. WHAT GOES IN THERE?
72. LET'S LOOK AT THE APP
73. 1 2 3 4 5 6 7 @Component({ selector: 'app-header', templateUrl: './header.component.html', }) export class HeaderComponent { cartProductsCount = input.required<number>(); }
74. 1 2 3 4 5 6 7 @Component({ selector: 'app-header', templateUrl: './header.component.html', }) export class HeaderComponent { cartProductsCount = input.required<number>(); }
75. 1 2 3 4 5 6 7 <!-- features/shell/container/shell/shell.component.html --> <app-header [cartProductsCount]="store.cartProductsCount()" /> <div class="content"> <router-outlet /> </div>
76. 1 2 3 4 5 6 7 <!-- features/shell/container/shell/shell.component.html --> <app-header [cartProductsCount]="store.cartProductsCount()" /> <div class="content"> <router-outlet /> </div>
77. 1 2 3 4 5 6 7 <!-- features/shell/container/shell/shell.component.html --> <app-header [cartProductsCount]="store.cartProductsCount()" /> <div class="content"> <router-outlet /> </div>
78. ABOVE THE OUTLET ABOVE EVERY FEATURE
79. WHERE DOES IT LIVE?
80. 1 features/ 2 products/ 3 cart.service.ts container/ 4 5 presentational/ 6 7 product-detail/ cart.service.ts 8 9 container/ 10 presentational/ 11 12 checkout/ 13 cart.service.ts container/ 14 15 presentational/ ? ? ?
81. 1 features/ 2 products/ 3 cart.service.ts 4 container/ 5 presentational/ 6 7 product-detail/ 8 cart.service.ts 9 container/ 10 presentational/ 11 12 checkout/ 13 cart.service.ts 14 container/ 15 presentational/ ? ? ?
82. 1 features/ 2 products/ 3 cart.service.ts 4 container/ 5 presentational/ 6 7 product-detail/ cart.service.ts 8 9 container/ 10 presentational/ 11 12 checkout/ 13 cart.service.ts 14 container/ 15 presentational/ ? ? ?
83. 1 features/ 2 products/ 3 cart.service.ts 4 container/ 5 presentational/ 6 7 product-detail/ cart.service.ts 8 9 container/ 10 presentational/ 11 12 checkout/ 13 cart.service.ts 14 container/ 15 presentational/ ? ? ?
84. GONE ON THE NEXT ROUTE
85. OR IT TALKS SIDEWAYS
86. 1 features/ 2 shell/ products/ 3 4 product-detail/ 5 checkout/ 6 7 shared/ 8 store/ 9 global-checkout.store.ts services/ 10 11 checkout.service.ts 12 models/ product.models.ts 13
87. 1 features/ 2 shell/ 3 products/ 4 product-detail/ 5 checkout/ 6 7 shared/ 8 store/ 9 global-checkout.store.ts 10 services/ 11 checkout.service.ts 12 models/ 13 product.models.ts
88. 1 features/ 2 shell/ 3 products/ 4 product-detail/ 5 checkout/ 6 7 shared/ 8 store/ 9 global-checkout.store.ts 10 services/ 11 checkout.service.ts 12 models/ 13 product.models.ts
89. 1 features/ 2 shell/ 3 products/ 4 product-detail/ 5 checkout/ 6 7 shared/ 8 store/ 9 global-checkout.store.ts services/ 10 11 checkout.service.ts 12 models/ 13 product.models.ts
90. 1 features/ 2 shell/ 3 products/ 4 product-detail/ 5 checkout/ 6 7 shared/ 8 store/ 9 global-checkout.store.ts services/ 10 11 checkout.service.ts 12 models/ product.models.ts 13
91. SHARED IS DERIVED NOT DECLARED
92. WHEN SHARED MAKES SENSE
93. 1 MORE THAN ONE ROUTE NEEDS IT
94. 2 IT SURVIVES NAVIGATION
95. 1 2 3 4 5 6 7 8 9 10 @Component({ selector: 'app-product-detail', imports: [RouterLink, ProductImageComponent, ProductInfoComponent], templateUrl: './product-detail.component.html', styleUrl: './product-detail.component.scss', providers: [ProductDetailStore] }) export class ProductDetailComponent implements OnInit { // ... }
96. 1 2 3 4 5 6 7 8 9 10 @Component({ selector: 'app-product-detail', imports: [RouterLink, ProductImageComponent, ProductInfoComponent], templateUrl: './product-detail.component.html', styleUrl: './product-detail.component.scss', providers: [ProductDetailStore] }) export class ProductDetailComponent implements OnInit { // ... }
97. WHEN IT DOES NOT MAKE SENSE
98. WE MIGHT NEED IT LATER
99. THEY LOOK SIMILAR
100. IT'S A UTIL
101. 1 shared/ 2 utils/ 3 helpers/ 4 common/ 5 misc/ 6 lib/ 7 date-utils.ts string-utils.ts 8 9 array-utils.ts 10 utils.ts 11 utils2.ts
102. 1 shared/ 2 utils/ 3 helpers/ 4 common/ 5 misc/ 6 lib/ 7 date-utils.ts 8 string-utils.ts 9 array-utils.ts 10 utils.ts 11 utils2.ts
103. 1 shared/ 2 utils/ 3 helpers/ 4 common/ 5 misc/ 6 lib/ 7 date-utils.ts 8 string-utils.ts 9 array-utils.ts 10 utils.ts 11 utils2.ts
104. 1 shared/ 2 utils/ 3 helpers/ 4 common/ 5 misc/ 6 lib/ 7 date-utils.ts 8 string-utils.ts 9 array-utils.ts 10 utils.ts 11 utils2.ts
105. 1 shared/ 2 utils/ 3 helpers/ 4 common/ 5 misc/ 6 lib/ 7 date-utils.ts 8 string-utils.ts 9 array-utils.ts 10 utils.ts 11 utils2.ts
106. 1 shared/ 2 utils/ 3 helpers/ 4 common/ 5 misc/ 6 lib/ 7 date-utils.ts 8 string-utils.ts 9 array-utils.ts 10 utils.ts 11 utils2.ts
107. 1 shared/ 2 utils/ 3 helpers/ 4 common/ 5 misc/ 6 lib/ 7 date-utils.ts string-utils.ts 8 9 array-utils.ts 10 utils.ts 11 utils2.ts
108. SHARED HAS GRAVITY NOTHING EVER LEAVES
109. IT IS OKAY TO DUPLICATE
110. ABSTRACT WHEN NEEDED
111. SHARED SHOULD HAVE AN OWNER
112. THE DELETE TEST
113. ┌───────────────────────────────────────────────────────┐ │ Shell Cart (3) │ └───────────────────────────┬───────────────────────────┘ │ ┌────────────────────┼────────────────────┐ ▼ ▼ ▼ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Product │ │ Product │ │ Checkout │ │ │ │ Detail │ │ │ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ │ ▼ │ │ ┌─────────────┐ │ └────────────▶│ Shared │◀────────────┘ │ cart · 3 │ └─────────────┘
114. KNOW WHAT LIVES WHERE STAY CONSISTENT
115. WHERE DOES THIS GO?
116. DECIDE ONCE NOT PER PR
117. ROUTES ARE YOUR WAY IN
118. one route ──▶ features/<route>/ container/presentational/... too many routes? many routes ──▶ shared/ no route ──▶ the shell ──▶ one level up
119. STRONG ARCHITECTURAL SIGNAL
120. THANK YOU github.com/FabianGosebrink/sample-ngrx-webstore-app Tomorrow:StateIs Everywhere