Refactoring verstaubter Angular‑Komponenten mithilfe von KI

Im Workshop „Refactoring verstaubter Angular-Komponenten mithilfe von KI“ zeige ich, wie sich gewachsene, schwer wartbare Angular-Komponenten systematisch modernisieren lassen. Ausgangspunkt sind typische Legacy-Symptome wie überladene Dateien, unklare Zuständigkeiten, veraltete Angular-APIs und fehlende Typisierung. Gemeinsam erarbeiten wir einen klaren Blueprint für sauberes Refactoring mit Clean-Code-Prinzipien, TypeScript Best Practices und modernem Angular. Dabei geht es nicht um blindes „Vibe Coding“, sondern um kontrollierte, nachvollziehbare Modernisierung mit KI als Assistenz. Im Fokus stehen bessere Struktur, weniger Komplexität, präzisere Typen und eine wartbare Komponentenarchitektur. Anhand eines konkreten Praxisbeispiels wird gezeigt, wie KI den Refactoring-Prozess sinnvoll beschleunigen kann, ohne die architektonische Verantwortung aus der Hand zu geben. Der Workshop richtet sich an Angular-Entwickler:innen, die bestehende Frontends zukunftsfähig machen möchten.

Transcript

1. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer Refactoring verstaubter Angular-Komponenten mithilfe von KI J Alexander Thalhammer · ANGULARarchitects.io h"ps://LXT.dev
2. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 2 Good news! No Vibe Coding 🎉 Blueprint 🤙 Praxis-Beispiel 🤓
3. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer • Über Jahre kommen Features, Sonderfälle und Workarounds hinzu • Verantwortlichkeiten verschwimmen zwischen UI, State und Business-Logik • Code-Lesbarkeit sinkt und Änderungen werden riskanter • Teams gewöhnen sich an schlechten Code statt ihn zu hinterfragen 0.1 Das Problem: Warum viele Angular- Komponenten zu Monstern werden 3
4. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer • Alte Angular Patterns, die nicht modernisiert wurden (*ngIf, @Input(), ngClass …) • 400 bis 800 (oder noch mehr) LoC in einer einzelnen Datei • Viele Lifecycle Hooks (ngOnChanges) und schwer nachvollziehbare Seiteneffekte • Unklare Symbol-Benennung, AI-generierter Code und fehlende Struktur • Komplexe View-Templates (.html) mit zu viel Logik • Unaufgeräumte Stylesheets (.scss) mit viel Redundanz 0.2 Typische Symptome verstaubter Komponenten 4
5. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer • Hohe mentale Last bei jeder Anpassung • Fehleranfällige Änderungen und Regressionen • Langsame Entwicklung trotz erfahrener Teams • Schwieriges Onboarding neuer Entwickler:innen 0.3 Was kosten solche Komponenten 5
6. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer • Eine klare Vorstellung für moderne, saubere Angular Komponenten • inkl. Clean Code-, TypeScript-, Angular-Best-PracUces • Dann modernisieren wir systemaUsch: APIs, Life Cycles • Eine wiederholbare Modernisierungs- und Refactoringstrategie à Blueprint • KI nutzen damit Refactoring schneller geht und Spaß macht J 0.4 Was wir in dem Workshop erreichen wollen 6
7. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer • Kleine, klar fokussierte Komponenten mit einer erkennbaren Hauptverantwortung • Signale, computed state und schlanke Templates ersetzen implizite Seiteneffekte • Regeln aus Style Guide, ESLint und Teamkonventionen machen Qualität reproduzierbar • KI beschleunigt Umbauten, aber die Architekturentscheidungen bleiben menschlich 0.5 Wie gute Angular Komponenten aussehen 7
8. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 8 Agenda 1. Setup IDE & KI 🚀 2. Guardrails für gutes KI-Refactoring 3. Modern Angular, Angular Migrations & Angular Best Practices 4. Blueprint & Praxisbeispiel
9. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer Wie behandeln hier nicht, wie man KI nutzt, sondern ich möchte euch zeigen • wie saubere Angular-Komponenten aussehen • wie wir verstaubte oder gar dreckige Komponenten sauber machen • ihr bekommt einen Blueprint zur Modernisierung & zum Refactoring Ziel des Workshops 9
10. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 10
11. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 11 • Alexander Thalhammer aus Graz, AT, EU (est. 1983) • Angular So+ware Tree GmbH (est. 2019) • Web Dev seit 25 Jahren • Seit 2017 Angular Dev • Seot 2021 Angular Evangelist, Coach & Consultant • Teil der Angular Architects • Seit ein paar Monaten heavy AI User • What can you do? 🤷 Hi, it's me à @LX_T https://LXT.dev
12. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 12 @LX_T à meine Lieblingsthemen Performance 🚀 Accessibility ♿ Best Practices 📈 Refactoring 🤖
13. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 13 • I consider myself an Angular guru 🧑🏫 • But not yet an AI senior (who is?) • à gerne Feedback (bzw. KriUk oder Anmerkungen!) • Der Workshop läu_ noch unter experiementell • Alle Slides und die Übungsanleitung (noch!) handgemacht • Und es sind zu viele Slides für 3h :-P Disclaimer(s)
14. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 14 Teil 1 – Setup IDE & KI 🚀
15. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 15 • Zuerst richten wir Prettier, ESLint und IDE ein sodass jedes Ergebnis denselben Qualitätsrahmen hat • Danach bekommt die KI Instruktionen über • AGENTS.md • MCP • .aiignore • Schließlich noch ein paar Tipps für AI Agents 1.0 Agenda Teil 1
16. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 16 1.1 Essential I: Prettier { "bracketSameLine": true, "printWidth": 120, // or 140 "singleQuote": true } { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnPaste": true, "editor.formatOnSave": true, "prettier.documentSelectors": ["**/*.{css,html,js,md,scss,ts}"] } pnpm i -D prettier
17. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 17 Demo: Prettier
18. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 18 • Der Linter prüft unsere Best Practices konkret ab • Standardsätze verwenden für JS, TS, Angular sowie Angular A11y • Wichtige zusätzliche Regeln sind explizite Types und max 400 LoC • Dient als wichtige Checkliste für sowohl Devs 🤓 als auch KI 🤓 1.2 Essential II: ESLint
19. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 19 Demo: ESLint
20. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 20 1.3 Welche IDE nehmen?
21. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 21 • VS Code punktet mit Plugin-Ökosystem und leichter MCP-Konfiguration • WebStorm punktet mit starker Angular- und Refactoring-Unterstützung • Cursor hatte als erste volle KI-Integration • IDE ist Geschmacksache, aber Formatter, Linter und KI-Kontext sollten sauber vereinheitlicht sein 1.4 IDE Vergleich
22. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 22 • Achtung oppinionated: Mein Lieblingssetup! • IMHO beste KI-Integration unter allen IDEs • Wahl des LLMs eher nebensächlich • Claude Sonnet 4.6 oder Opus 4.6 (deep thinking) • Gemini 3.1 Pro oder • GPT 5.4 oder 5.3-codex 1.5 KI Options I: WebStorm mit Junie
23. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 23 Demo: WebStorm mit Junie
24. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 24 • Claude Code ist ein Refactoring Agent erster Klasse • Funkioniert sehr gut in VS Code, derzeit populärste Option!? • Alternativen • Gemini CLI oder • Codex Plugin • GitHub Copilot (might be a bit outdated) 1.6 OpUon II: VS Code mit Claude Code
25. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 25 Demo: VS Code mit Claude Code Plugin
26. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 26
27. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 27 • Aterna\ven zu WebStorm und VS Code • Cursor • Windsurf • Who will win the race? • Nobody knows J 1.7 Option III & IV: Cursor oder Windsurf
28. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 28 • Hier stehen Regeln für die KI "AGENTS.md" oder spezifisch "CLAUDE.md" • Architekturentscheidungen, Angular-Version, modernes Angular, No-Gos und Refactoring-Prinzipien • Wirken in Kombination mit Angular MCP • Manche verwenden auch "SKILLS.md", aber ich bin skeptisch 1.8 AGENTS.md à AI instrucUons
29. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 29 • Angular MCP bringt aktuelle Dokumentation und Angular-Wissen direkt in den Agentenfluss • Nx MCP liefert Monorepo-Kontext, Tasks, Projektgraph und AI-Hilfen für Workspace-Strukturen • Figma MCP ergänzt Design-Kontext, Komponenten und Variablen für UI-nahe Refactorings • Zusammen entsteht aus einem Sprachmodell ein besser informierter Architektur-Assistent 1.9 MCP Config
30. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 30 • Hier kommt alles rein, was die KI nicht angreifen soll • node_modules • cache • coverage • dist … 1.10 .aiignoreà AI ignore like .gitignore
31. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 31
32. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 32 Demo: AGENTS.md, MCP Config & .aiignore
33. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 33 • Gute Prompts starten mit Beobachtung, Ziel und Randbedingungen • Spec: Je besser die Spezifikation (von Anfang an – nicht iterativ), desto besser das Ergebnis • Scope: welcher Kontext, welche Datei, welcher gewünschte Output • Prüfung: zum Beispiel ESLint-konform, alle Tests müssen validieren • Abfolge: • 1. Do a planing and ask me clarification questions (Claude is good at planning!) • 2. Implement it 1.11 Agent Prompting in der IDE
34. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 34 • Umbau-Nutzen: weniger Komplexität, klarere Zuständigkeit oder modern • Kommantere: Bestehende Kommentare und Domänen werden nicht gelöscht • Reviews: Kein Rewrite ohne Zwischenschritte, die sich lesen und prüfen lassen • Ich persönlich behandle (derzeit noch) alles vom Agent wie die Arbeit eines Juniors, das heißt ich prüfe alle gemachten Änderungen vor Commit 1.12 AI Guardrails
35. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 35 • preUerrc.json & eslint.config.js • Choose your weapon of choice • WebStorm mit Junie, VS Code mit Claude Code oder Cursor oder Windsurf • AGENTS.md, MCP, .aiignore • Agent Promp\ng & AI Guardrails Als nächstes kümmern wir uns um weitere, spezifischere Guardrails Teil 1 Zusammenfassung
36. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 36 Teil 2 – Guardrails für gutes KI-Refactoring
37. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 37 • Clean Code Principles • Struktur • Funktionen • Typisierung 2.0 Agenda Teil 2
38. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 38 • Schlechter Code ist nicht nur für Menschen teuer, sondern auch für KI-Agenten schwerer zu erfassen • Gute Namen, kleine Funktionen und klare Typen reduzieren Missverständnisse und Halluzinationen 2.1 Warum Clean Code für KI?
39. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 39 • Jedes Feld und jede Funk\on und sollte sich durch den Namen selbst erklären und eine klare Rolle im Lesefluss der Komponente haben • Die Symbolnamen tragen Bedeutung, Typen machen Verträge explizit und kleine Einheiten begrenzen den Scope bzw. den Context 2.2 Clean Code Principles I - Naming
40. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 40 • KISS: Lesbarkeit vor Cleverness, Kommentare sollten in den meisten Fällen nicht notwendig sein • und natürlich DRY: • gemeinsame Logik in Services, Direktiven, Pipes, Utils oder Sub-Komponenten 2.3 Clean Code Principles II – KISS & DRY
41. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 41 • Single Responsibility: Jeder Building Block hat eine klare Aufgabe • Rule of One: Jedes Ding bekommt seine eigene Datei • private, readonly und const bevorzugen • Max. ~400 LoC pro Datei • complexity beschränkt die Komplexität (auch in View-Templates) • sort-imports und prefer-const bringen Übersicht 2.4 Clean Code Principles III
42. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 42 • Angular-spezifische Properties gruppieren statt wild verteilen • Abhängigkeiten, Inputs, Outputs, Signals und Methoden klar ordnen • Zusammengehörige Dinge nah beieinander halten • Die Komponente soll von oben nach unten lesbar sein 2.5 Struktur statt Zufall
43. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 43 • decorator (@Component) • class (extends & implements) • members • injects • input • model • output • queries • signals • computed • other members • methods • staCc • constructor • other methods 2.6 Struktur statt Zufall – Vorschlag
44. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 44 • Große Event-Handler mischen häufig Validierung, Mapping, State-Update und UI-Nebenwirkungen • Ein gutes Refactoring trennt diese Schritte in kleine, benannte Funktionen mit klarer Absicht • Benennungen wie buildRequest, validateInput oder updateSelection erklären den Code fast selbst • Die KI ist hier besonders stark, wenn sie zuerst den Ablauf beschreiben und dann schneiden darf 2.7 FunkUonen verkleinern & präzisieren
45. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 45 • Strict Typing - any vermeiden • Returntyp • Parametertyp • einfach alles hat 'nen Typ J • Der erste Hebel in Legacy-Code ist oft das Ersetzen unscharfer Typen durch explizite Typen (oder Interfaces) • Meine Guidelines bevorzugen unknown vor any und types vor interfaces • Auch kleine Typenextraktionen reduzieren mentale Last • Komponente wird lesbarer, durch präzise benannte & typisierte In- und Outputs 2.8 Typen als Sicherheitsnetz
46. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 46 2.9 Vorher vs Nachher – Naming & Typing items: any[] = []; sel: any; save(data: any) { const x = this.items.find( (i) => i.id === data.id ); if (x) { this.sel = x; } } type OrderItem = { id: string; label: string; }; // put in another file J protected readonly items: OrderItem[] = []; protected selectedItem: OrderItem | null = null; protected selectItem(item: OrderItem): void { const selectedItem = this.items.find( (currentItem) => currentItem.id === item.id ); if (!selectedItem) { return; } this.selectedItem = selectedItem; }
47. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 47 • Clean Code reduziert mentale Last für Menschen und KI • Klare Namen und präzise Typen machen Refactorings sicherer • Kleine Komponenten und Funktionen machen Änderungen beherrschbar • Gute Typisierung und Datenbindung hilft ebenfalls Jetzt, wo Struktur, Typen & Lesefluss stimmen, modernisieren wir Angular Teil 2 Zusammenfassung
48. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 48 Teil 3 – Modern Angular, Angular Migrations & Angular Best Practices
49. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 49 • Modern Angular Speedrun • Security & Updates • Angular Migrations (imho obligatory!) • Testing & Ökosystem • Angular Coding Style Guide • Angular Best Practices ESLint config 3.0 Agenda Teil 3
50. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 50 • inject() • Standalone • Control Flow • Reac\vity mit Signals und dem Gamechanger computed() • DataBinding mit input, output & model, sowie signal queries & ressource API 3.1 Modern Angular I
51. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 51 • Ersetze all lifecycle hooks mit • constructor() – besonders für Subscriptions mit takeUntilDestroyed • effect(), afterNextRender(), afterEveryRender() und afterRenderEffect() • ChangeDetection.OnPush & zoneless • SignalStore (nur wenn Du ihn wirklich brauchst!) • SignalForms (Forms endlich richtig gemacht!) 3.2 Modern Angular II
52. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 52 • CSP Policies • Trusted Types Setup • Alles Aktualisieren, insbesondere 3rd Party Pakete 3.3 Security
53. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 53 • mindestens 2x pro Jahr (Major), besser alle 2 Monate (Minor) • mit ng update bzw. nx migrate latest • alle andere NPM-Pakete entsprechend mitnehmen, doch das alleine ist nicht genug 3.4 Updates
54. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 54 3.5 Angular MigraUons (opt-in is a must!) standalone control flow build w/ esbuild & vite lazy-loaded routes mit loadComponent signal inputs, outputs & queries inject() & cleanup imports & self- closing tags & ngClass & ngStyle router & common
55. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 55 Showcase: Angular Migrations https://angular.dev/reference/migrations
56. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 56 • e2e Tests mit Playwright à für mich das Wich\gste • Unit Tests mit Vitest, eventuell Analog für Tooling • UI Component Doku mit Storybook • alles andere wenn möglich migrieren à natürlich mit KI J 3.6 Testing
57. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 57 • Unbedingt PNPM statt NPM / yarn • Optional Stylelint wenn man SCSS auch Linten möchte • Optional Nx für größere Projekte/Libraries/Monorepo • Optional Component Libraries bzw. Design Systeme • Angular Material (sehr eigen, schwer zu customizen) • oder ZardUI (modern, lean, basiert auf shadcn) • à super wenn es brauchbaren Figma MCP gibt 3.7 Ökosystem
58. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 58 • One concept per file and inject() • Group Angular-specific proper\es before methods • Keep components and direc\ves focused on presenta\on • Avoid overly complex logic in templates • Use protected on class members … only used by … template • Use readonly for proper\es that shouldn't change 3.8 Official Angular Coding Style Guide (Excerpt)
59. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 59 Showcase: Angular v20 Style Guide https://angular.dev/style-guide
60. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 60 • suffix observables with $ • prefer using the AsyncPipe, use the takeUntilDestroyed() operator if subscribing manually • keep constructors and lifecycle hooks simple and clean (basically only call methods, except one-liners) • group components, directives, pipes & services like this • … 3.9 LXT's Angular Coding Style Guide (Excerpt)
61. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 61 Showcase: My Coding Style Guide https://github.com/L-X-T/ng-b357/blob/main/style-guide/style-guide.md
62. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 62 • '@angular-eslint/no-empty-lifecycle-method' à better no lifecycle at all • '@angular-eslint/prefer-on-push-component-change-detection' • '@angular-eslint/prefer-output-readonly' • '@angular-eslint/prefer-signals' • '@angular-eslint/prefer-standalone' 3.10 Angular ESLint Best Practices .ts
63. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 63 • '@angular-eslint/template/attributes-order' • '@angular-eslint/template/button-has-type' • '@angular-eslint/template/prefer-control-flow' • '@angular-eslint/template/prefer-ngsrc' • '@angular-eslint/template/prefer-self-closing-tags' 3.11 Angular ESLint Best Practices .html
64. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 64 • Angular unbedingt up2date halten um Sicherheit und moderne Features zu gewährleisten à auch die Migrations mitnehmen à KI hilft J • Angular Coding Style Guide befolgen à KI braucht Angular MCP • Angular ESLint Regeln scharf schalten à KI braucht extra Hinweis Teil 3 Zusammenfassung
65. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 65 Teil 4 – Blueprint & Praxisbeispiel
66. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 66 1. Analyse 2. Entschlacken 3. NG Update 4. Modernisieren 5. Typisierung 6. Refactoring 7. Review 4 Die 7 Schritte-Vorgehensweise (Blueprint)
67. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 67 Teil 4 – Praxis: Refactoring einer (sehr) verstaubten Angular-Komponente https://github.com/L-X-T/ng-days-refactoring-ai
68. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer Let AI do the hard work to improve & modernize our Angular workspaces!
69. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 69
70. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer What will you refactor?
71. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 71 Questions & Feedback Bitte gebt mir euer Feedback in der App <3
72. • Textmasterformat bearbeiten • Zweite Ebene Alexander Thalhammer 72 [X] @LX_T [web] https://LXT.dev Thank you for the attention Workshops and Consulting https://angulararchitects.io