Refactors Angular components following project standards and SOLID principles—one component per file, single level of abstraction, reactive composition, and encapsulated navigation. Use when refactoring Angular code, reviewing components, or when the user asks for refactoring help.
./references/SOLID.md for referenceKeep the same level of abstraction in components.
constructor() {
afterNextRender(() => {
this.route.paramMap
.pipe(
map(paramMap => paramMap.get('id')),
switchMap(id => {
if (!id) {
this.navigateToNotFound();
return EMPTY;
}
this.loading.set(true);
this.book.set(null);
return this.api.getBook(id);
}),
tap({
next: data => {
this.book.set(data);
this.loading.set(false);
},
error: err => {
this.loading.set(false);
if (err?.status === 404) {
this.navigateToNotFound();
return;
}
this.errorHandler.handleError(err);
}
})
takeUntilDestroyed(this.destroyRef)
)
.subscribe();
});
}
constructor() {
afterNextRender(() => this.loadBookDetails());
}
private loadBookDetails() {
/* ... implementation details ... */
}
ErrorHandler).afterNextRender hook for subscriptions instead.Prefer reactive composition over manual imperative loading. Refactor to a single reactive pipeline:
this.route.paramMap
.pipe(
map(paramMap => paramMap.get('id')),
switchMap(id => this.api.getBook(id))
)
.subscribe(/* update book, loading, error */);
This reduces imperative state resets (e.g. book.set(null), error.set(null)) scattered across methods.
Wrap navigation calls in private methods like navigateToNotFound() and navigateToList() to: