Leverage Nx Library thesis in Angular Architecture

1. Confidential Customized for Lorem Ipsum LLC Version 1.0
Leverage library thesis
Hoa Nguyen (Rin)
in Architecture
Front-end Developer

2. Agenda
01
What is Nx?
Next generation build system with
first class monorepo support and
powerful integrations
02
Angular State
Angular latest version tends to
remove NgModule entirely
03
What is the problem?
No official documentation for project structure.
ch-web-frontend “Spaghetti” structure
04
Refactoring Demo
Demo refactoring wallet feature
05
Tips & Discussion
My thought about respective library
type of Angular common concepts

3. What is ?
nx.dev - Smart, Fast and Extensible Build System
First class monorepo support and powerful integrations.
Powerful
Command ine
Code Editor
Integration
Visualize
Architecture
Caching
Mechanism
Awesome monorepo
documentation
🤩

4. Angular State
● Officially expose Standalone APIs and move away from NgModule
● Directive composition API
● Better stack traces
● Improvements in the experimental esbuild support
● Release MDC-based components to stable
● And more for better DX and performance
🚀v15
✅

5. What is the problem?
● No official document for detail structuring app.
● Face with “spaghetti” project structure
Questions:
🧐 How do you know which one is page or component?
🧐 Can we apply Nx library thesis into this module?

6. Refactoring Demo
Talk is cheap, show me code 🤪

7. Tips & Discussion
feature ui utility
data-access
Component as Page Comp as Section
Comp as shared UI
route config
guards folder
Comp as Dialog
Store
API TypeScript Model
constants folder
API services
directives folder
pipes folder

8. References 📒
● https://nx.dev/more-concepts
● https://blog.angular.io/angular-v15-is-now-available-df7be7f2f4c8
More presentation is coming if you love 🫰
● How to structure an UI component library?
● How many ways to manage Angular State?

9. Leverage library thesis
Hoa Nguyen (Rin)
in Architecture
Front-end Developer
Thank you!