Boost your organization's Angular developer experience with custom Nx generators

Nx Champion Lars Gyrup Brink Nielsen demonstrates how to implement custom Nx generators that comply with workspace-wide architectural decisions and naming conventions in your Angular repo.

Presented at Angular Tiny Conf Shemu 2024
Recording: https://www.youtube.com/live/nVcerb1tOUA?si=dyxAjnmWUdnlafBr
Sample repo: https://github.com/LayZeeDK/nx-angular-library-generator

Transcript

1. Boost your organization's Angular developer experience with custom Nx generators Angular Tiny Conf Shemu 2024
2. Lars Gyrup Brink Nielsen Co-organizer of AarhusJS Co-founder of This is Learning Open-source maintainer Published author GitHub Star Microsoft MVP Nx Champion Angular Hero of Education
3. Workspace overview Nrwl Airlines Boost your organization's Angular developer experience with custom Nx generators
4. Domains Boost your organization's Angular developer experience with custom Nx generators
5. Applications Boost your organization's Angular developer experience with custom Nx generators
6. Library type constraints Boost your organization's Angular developer experience with custom Nx generators
7. Library project structure nrwl-airlines └── libs ├── booking │ ├── data-access │ ├── feature-flight-search │ ├── feature-passenger-info │ └── feature-shell ├── check-in │ ├── data-access │ └── feature-shell ├── seatmap │ ├── data-access │ └── feature-seat-listing └── shared ├── data-access ├── ui-buttons └── util-formatting Nrwl Airlines Boost your organization's Angular developer experience with custom Nx generators
8. Library project configuration { "name": "booking-feature-flight-search", "$schema": "(...)/nx/schemas/project-schema.json", "sourceRoot": "libs/booking/feature-flight-search/src", "prefix": "booking", "projectType": "library", "tags": ["domain:booking", "type:feature"], "targets": { /. (...) } } Nrwl Airlines Boost your organization's Angular developer experience with custom Nx generators
9. Application project structure nrwl-airlines └── apps ├── booking │ ├── booking-desktop │ ├── booking-desktop-e2e │ ├── booking-mobile │ └── booking-mobile-e2e └── check-in ├── check-in-desktop ├── check-in-desktop-e2e ├── check-in-mobile └── check-in-mobile-e2e Nrwl Airlines Boost your organization's Angular developer experience with custom Nx generators
10. Application project configuration { "name": "booking-booking-desktop-app", "$schema": "(...)/nx/schemas/project-schema.json", "projectType": "application", "prefix": "nrwl-airlines", "sourceRoot": "apps/booking/booking-desktop-app/src", "tags": ["domain:booking", "type:app"], "targets": { /. (...) } } Nrwl Airlines Boost your organization's Angular developer experience with custom Nx generators
11. Custom Nx generators Nrwl Airlines Boost your organization's Angular developer experience with custom Nx generators
12. nx g @nrwl-airlines/nx:angular-library flight-search --domain=booking --type=feature Angular library generator Boost your organization's Angular developer experience with custom Nx generators
13. Angular library generator options • Name • Domain • Library type Boost your organization's Angular developer experience with custom Nx generators
14. Angular library generator features • Project and import paths • Project tags • Strict compiler settings • Library type prefix • Domain grouping folder • Unnamed library support • Feature and UI libraries • Sass styles • Standalone component • Selector prefix • OnPush change detection • Display as block element Boost your organization's Angular developer experience with custom Nx generators
15. nx g @nrwl-airlines/nx:angular-application booking-desktop -.domain=booking Angular application generator Boost your organization's Angular developer experience with custom Nx generators
16. Angular application generator options • Name • Domain Boost your organization's Angular developer experience with custom Nx generators
17. Angular application generator features • Project and import paths • Project tags • Strict compiler settings • Domain grouping folder • Standalone components • Sass styles Boost your organization's Angular developer experience with custom Nx generators
18. Demo Custom Nx generators for Nrwl Airlines Boost your organization's Angular developer experience with custom Nx generators
19. Thank you for your attention Boost your organization's Angular developer experience with custom Nx generators