Boost your organization's Angular developer experience with custom Nx generators Angular Tiny Conf Shemu 2024

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

Workspace overview Nrwl Airlines Boost your organization's Angular developer experience with custom Nx generators

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

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

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

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

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

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

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

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

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

Angular library generator options • Name • Domain • Library type Boost your organization's Angular developer experience with custom Nx generators

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

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

Angular application generator options • Name • Domain Boost your organization's Angular developer experience with custom Nx generators

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

Demo Custom Nx generators for Nrwl Airlines Boost your organization's Angular developer experience with custom Nx generators

Thank you for your attention Boost your organization's Angular developer experience with custom Nx generators