Component-First Architecture with Angular Standalone Components

on YouTube ↗17m

" summary

Defines a Component‑First Architecture where UI is driven by standalone: true components that import their own directives and providers, use bootstrapApplication and provideRouter in main.ts, and remove NgModule indirection. Testing simplifies to importing the component into TestBed. NX generators scaffold apps, lazy‑loaded libraries and components with the nx generators flags that auto‑insert route constants. Recommends local state with ngrx component store and using provideIn or component metadata to avoid unexpected multiple provider instances.

AI-written summary · about

" chapters (9)

1. 0:00Introduction to Standalone
2. 1:10Components vs NGModules
3. 2:24Using and Loading Components
4. 2:58Routing in Standalone
5. 4:07Testing and Bootstrapping
6. 5:32Component-First Architecture
7. 7:04Architecture Benefits
8. 9:04Routing and State Management
9. 10:49NX Tooling and Conclusion

" related talks

• 18mAngular's Future w/out NgModules Architectures w/Standalone ComponentsManfred Steyer · ng-conf 2022
• 18mStandalone Components: The MotivationPawel Kozlowski · ng-conf 2022
• 18mStandalone Components The MotivationPawel Kozlowski · ng-conf 2022
• 32mLightweight Architectures with Angular's Latest InnovationsManfred Steyer · NG-BE 2023
• 36m"Standalone" APIs: A Component-focused AngularPawel Kozwolski · DevReach 2022
• 34mScalable Angular ArchitectureBartosz Pietrucha · RuhrJS 2018
• 25mAngular Architecture: From Patterns to ImplementationTodd Motto · NG-BE 2017
• 36mThe Era Of Standalone ApisAristeidis Bampakos · Angularday 2023