I've been grappling with error handling in Angular. I attempted to handle errors within a service, but I'm uncertain if that's the correct approach.
@Injectable({
providedIn: 'root',
})
export class CaseListService {
public constructor(private httpClient: HttpClient, private router: Router) {}
private get baseUrl() {
return environment.apiBaseUrl || '/api';
}
public getCaseList(): Observable<CaseListModel[]> {
return this.httpClient.get(this.baseUrl + '/cases').pipe(
map((response) => response as Array<CaseListModel>),
catchError((err: any) => {
if (err.status) {
console.log('Service temporarily unavailable' + err.status);
this.router.navigate(['/unavailable']);
}
return throwError(err.statusText);
})
);
}
}
Here is my component.ts where I am utilizing the service:
@Component({
selector: 'app-case-list',
templateUrl: './case-list.component.html',
styleUrls: ['./case-list.component.css'],
})
export class CaseListComponent implements OnInit {
title = 'List of cases';
readonly CaseList$: Observable<CaseListModel[]>;
constructor(private caseListService: CaseListService) {
this.CaseList$ = caseListService.getCaseList();
}
displayedColumns: string[] = ['ID', 'name', 'actions'];
dataSource = this.caseListService.getCaseList();
ngOnInit(): void {}
}
When I disabled the backend and tested it, all I got was a frontend display with empty data. The redirection didn't work, and there were no logs in the console either. What could be the issue here?