From c83eea70a0a0a04e7d3d4271c994d5fe75cbafab Mon Sep 17 00:00:00 2001 From: Ferdinand Malcher Date: Tue, 10 Mar 2026 09:16:04 +0100 Subject: [PATCH 1/5] WIP --- blog/2025-11-angular21/README.md | 2 +- blog/2026-05-angular22/README.md | 53 ++++++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 blog/2026-05-angular22/README.md diff --git a/blog/2025-11-angular21/README.md b/blog/2025-11-angular21/README.md index a24272f8..a8c4b03a 100644 --- a/blog/2025-11-angular21/README.md +++ b/blog/2025-11-angular21/README.md @@ -15,7 +15,7 @@ keywords: - Karma language: de header: angular21.jpg -sticky: true +sticky: false isUpdatePost: true --- diff --git a/blog/2026-05-angular22/README.md b/blog/2026-05-angular22/README.md new file mode 100644 index 00000000..cc1965c9 --- /dev/null +++ b/blog/2026-05-angular22/README.md @@ -0,0 +1,53 @@ +--- +title: 'Angular 22 ist da!' +author: Angular Buch Team +mail: team@angular-buch.com +published: 2026-15-18 +lastModified: 2026-05-18 +keywords: + - Angular + - Angular 22 +language: de +header: angular22.jpg +sticky: true +hidden: true +isUpdatePost: true +--- + + +Im [Angular-Blog](TODO) findest du die offiziellen Informationen zum neuen Release. +Um ein bestehendes Projekt auf Angular 22 zu migrieren, kannst du den Befehl `ng update` verwenden, siehe [Angular Update Guide](https://angular.dev/update-guide). + + + +## TODO: Versionen von TypeScript und Node.js + +Die folgenden Versionen von TypeScript und Node.js sind für Angular 21 notwendig: + +- TypeScript: >=5.9.0 <6.0.0 +- Node.js: ^20.19.0 || ^22.12.0 || ^24.0.0 + +Ausführliche Infos zu den unterstützten Versionen findest du in der [Angular-Dokumentation](https://angular.dev/reference/versions). + + + +## Sonstiges + +Im Changelog von [Angular](https://github.com/angular/angular/releases) und der [Angular CLI](https://github.com/angular/angular-cli/releases) findest du stets alle Detailinformationen zur aktuellen Entwicklung des Frameworks. +Einige interessante Aspekte haben wir hier zusammengetragen: + +- **TODO:** TODO (siehe [PR]()). +- **TODO:** TODO (siehe [Commit]()). + +
+ + +Wir wünschen dir viel Spaß beim Entwickeln mit Angular 22! +Hast du Fragen zur neuen Version von Angular oder zu unserem Buch? Schreibe uns! + +**Viel Spaß wünschen +Ferdinand, Danny und Johannes** + +
+ +**Titelbild:** TODO. Foto von Ferdinand Malcher From a1790160fa457f92f1009b7386df5e2669b469bb Mon Sep 17 00:00:00 2001 From: Ferdinand Malcher Date: Tue, 10 Mar 2026 09:16:39 +0100 Subject: [PATCH 2/5] date --- blog/2026-05-angular22/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blog/2026-05-angular22/README.md b/blog/2026-05-angular22/README.md index cc1965c9..c104f8ab 100644 --- a/blog/2026-05-angular22/README.md +++ b/blog/2026-05-angular22/README.md @@ -2,7 +2,7 @@ title: 'Angular 22 ist da!' author: Angular Buch Team mail: team@angular-buch.com -published: 2026-15-18 +published: 2026-05-18 lastModified: 2026-05-18 keywords: - Angular From e98287789d9438101d920231ffa282401bc39c91 Mon Sep 17 00:00:00 2001 From: Ferdinand Malcher Date: Sat, 9 May 2026 08:56:33 +0200 Subject: [PATCH 3/5] service-decorator --- blog/2026-05-angular22/README.md | 44 ++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/blog/2026-05-angular22/README.md b/blog/2026-05-angular22/README.md index c104f8ab..f5ea6f81 100644 --- a/blog/2026-05-angular22/README.md +++ b/blog/2026-05-angular22/README.md @@ -30,6 +30,50 @@ Die folgenden Versionen von TypeScript und Node.js sind für Angular 21 notwendi Ausführliche Infos zu den unterstützten Versionen findest du in der [Angular-Dokumentation](https://angular.dev/reference/versions). +## Der neue Decorator `@Service()` + +Mit Angular 22 wurde der neue Decorator `@Service()` eingeführt. +Er ist die moderne und ergonomische Alternative zum etablierten Decorator `@Injectable()` mit der Einstellung `providedIn: 'root'`. + +Da das Klassennamen-Suffix `Service` [mit Angular 20 weggefallen ist](/blog/2025-05-angular20), ist der neue Decorator aus unserer Sicht eine sinnvolle Ergänzung. +So ist auf den ersten Blick erkennbar, dass es sich bei einer Klasse um einen Service handelt. + +Der Decorator kann in den meisten Fällen direkt ersetzt werden: + +```ts +// VORHER +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class BookStore {} +``` + +```ts +// NACHHER +import { Service } from '@angular/core'; + +@Service() +export class BookStore {} +``` + +Die Angular CLI generiert Services mit `ng generate service` nun ebenfalls standardmäßig mit dem neuen Decorator. +Um beim Generieren den älteren Decorator `@Injectable()` zu erhalten, können wir das Flag `--injectable` verwenden. + +```bash +# mit Decorator `@Service()` +ng g service book-store + +# mit Decorator `@Injectable()` +ng g service book-store --injectable +``` + +Der Decorator `@Injectable()` wird also zunächst nicht abgeschafft, sodass bestehende Anwendungen nicht sofort migriert werden müssen. +Wir empfehlen dennoch, neue Services sofort mit dem neuen Decorator auszustatten. + + + ## Sonstiges From 4abd25eac91b8a43fb03f26862bca3bd7f57bf44 Mon Sep 17 00:00:00 2001 From: Ferdinand Malcher Date: Sun, 10 May 2026 20:08:32 +0200 Subject: [PATCH 4/5] Update README.md Co-authored-by: Johannes Hoppe --- blog/2026-05-angular22/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blog/2026-05-angular22/README.md b/blog/2026-05-angular22/README.md index f5ea6f81..d9538996 100644 --- a/blog/2026-05-angular22/README.md +++ b/blog/2026-05-angular22/README.md @@ -70,7 +70,7 @@ ng g service book-store --injectable ``` Der Decorator `@Injectable()` wird also zunächst nicht abgeschafft, sodass bestehende Anwendungen nicht sofort migriert werden müssen. -Wir empfehlen dennoch, neue Services sofort mit dem neuen Decorator auszustatten. +Wir empfehlen dennoch, neue Services mit dem neuen Decorator auszustatten – die Syntax ist kürzer und es sieht auch ein wenig schicker aus. From c0c769e77b1cd504e20b8da39e2ee7dc8f8cf278 Mon Sep 17 00:00:00 2001 From: Ferdinand Malcher Date: Sun, 10 May 2026 20:09:00 +0200 Subject: [PATCH 5/5] Update README.md Co-authored-by: Johannes Hoppe --- blog/2026-05-angular22/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/blog/2026-05-angular22/README.md b/blog/2026-05-angular22/README.md index d9538996..8a76c694 100644 --- a/blog/2026-05-angular22/README.md +++ b/blog/2026-05-angular22/README.md @@ -69,7 +69,8 @@ ng g service book-store ng g service book-store --injectable ``` -Der Decorator `@Injectable()` wird also zunächst nicht abgeschafft, sodass bestehende Anwendungen nicht sofort migriert werden müssen. +Der neue `@Service()` Decorator sieht keine Konfigurationsmöglichkeiten vor, daher wird für spezielle Fälle (etwa `providedIn: 'platform'`) weiterhin `@Injectable()` benötigt. +Wir müssen demzufolge nicht befürchten, dass `@Injectable()` in naher Zukunft "deprecated" wird. Wir empfehlen dennoch, neue Services mit dem neuen Decorator auszustatten – die Syntax ist kürzer und es sieht auch ein wenig schicker aus.