Rainer Hahnekamp 5. März 2025 Basta Qualität mit Angular Werkzeuge und Prozesse 

About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff ● Rainer Hahnekamp ANGULARarchitects.io NgRx Team (Trusted Collaborator) ● Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality 

No content

RainerHahnekamp Why tooling when I use the Angular CLI? 

RainerHahnekamp What about Nx? 

RainerHahnekamp Code Guidelines ● ESLint ○ Angular-ESLint ○ Unused Imports ● Prettier ● Husky 

RainerHahnekamp ESLint ● Stay with pre-defined configs ● Switch to flat config ● Angular-ESLint ○ Ensure that templates and TypeScript are parseable ● Enable automatic fix in IDE ● Easy to write your own Rules ● Check libs for accompanying rules ○ RxJS ○ NgRx ○ Cypress ○ Playwright ○ Storybook ● Run as Git Hook 

RainerHahnekamp MVP: Define Plugin export default { plugins: { custom: { rules: { 'capitalized-classes': { create(context) { return { ClassDeclaration(node) { context.report({node, message: "This is a class"}) } }; } } } } } } 

RainerHahnekamp MVP: Activate Plugin export default { plugins: { custom: { rules: { 'capitalized-classes': { create(context) { return { ClassDeclaration(node) { if (node.id.name.match(/^[a-z]/)) { context.report({node, message: "This is a class"}) } } // ... 

RainerHahnekamp https://typescript-eslint.io/play 

RainerHahnekamp Prettier ● Understands Angular templates ● No internal discussions "use as is" ● Don't use ESLint Plugin ● Use IDE Integration 

RainerHahnekamp Husky ● Automatic Git Hooks ● Common Use Cases ○ ESLint ○ Prettier ○ Tests ○ Commit Messages ● Combine with lint-staged ● Careful with long-running Hooks 

RainerHahnekamp Quality ● SonarQube ● Detective ● Sheriff 

RainerHahnekamp SonarQube ● CI-embeddable ● "Quality Gates" ● Improvements incrementally ○ "New Code" approach ● Code Coverage requires manual config ● Support for common CI ● ESLint plugin 

RainerHahnekamp Detective ● Analysis Tool ● Based on Forensics ● Finds Files which are always changed together ● Indicators for ○ Poor Modules ○ High Coupling 

RainerHahnekamp Sheriff ● Module Encapsulation ● Dependency Rules ● ESLint & CLI Mode ● Framework Agnostic 

RainerHahnekamp Miscellaneous ● Sentry ● Renovate Bot ● Playwright 

RainerHahnekamp Sentry ● Collects Errors ○ Groups them into Categories ○ Prioritization ● Supports Sourcemaps ● Integration to Ticket System ● Tracing ● Support for further Metrics 

RainerHahnekamp Release Management ● Documentation ○ Storybook ○ Docusaurus ○ TypeScript ● Conventional Commits ● Nx Release 

RainerHahnekamp Storybook ● Started as Widget Gallery ● Interactive Documentation ● Supports Testing ○ Visual Regression ○ A11y Testing ○ other types… ● Standard Tool 

RainerHahnekamp Commitlint ● Standardized Commit Message ● Contains information about impact of change (none, fix, feat, breaking) ● Optional Scope ● Format: ○ [type](scope?): message description 

RainerHahnekamp Commitlint Versioning Rules ● Major Change ○ Every type with an ! ○ Description starting with BREAKING CHANGE ● Minor Change ○ Type feat ● Fix ○ Type fix ● None ○ build, chore, ci, docs, perf, refactor, style, test 

RainerHahnekamp Nx Release ● Automatization ○ Version ○ ChangeLog ○ Publish ● Version Features ○ Automatic Versioning with Commitlint ○ Manual Versioning ● Release Groups ○ Release multiple packages together 

RainerHahnekamp Initial Steps: Pre-Built Check { "release": { "version": { "preVersionCommand": "npx nx run-many -t build" } } } 

RainerHahnekamp Initial Steps: Automatic Version Numbers { "release": { "version": { "preVersionCommand": "npx nx run-many -t build", "conventionalCommits": true } } } 

RainerHahnekamp Important Release commands ● npx nx release --first-release ● # define version npx nx release 1.0.0 ● # increase only version and create ChangeLog npx nx release -–skip-publish ● npx nx release version ● npx nx release changelog ● npx nx release publish