Angular - Tour of Heroes.не могу получить данные через API
Не судите строго, я изучаю Angular/node.js только второй день.
Сейчас я реализую тестовый проект из документации Angular - Tour of Heroes. Дошел до последнего, шестого пункта в создании приложения, где нужно реализовать передачу данных через http.
В документации предлагается сделать это с помощью эмулирующего api модуля - In-memory Web API, но я захотел сделать эту реализацию без эмуляции, написал небольшой сервер(так же делаю это впервые, не судите строго)):
import express from 'express';
import router from "./routers.js";
const app = express();
/*app.use(express.json())*/
app.use('/api', router);
const port = process.env.PORT || 4300;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
})
Сервер работает исправно, при get-запросе, отдает мне массив музыкантов, который я потом использую на фронтенд-стороне:
let data = [
{id: 1, name: 'Егор Летов', description: 'Гражданская оборона', path: '/assets/img/musican/Letov.jpg'},
{id: 2, name: 'Михаил Горшенёв', description: 'Король и Шут', path: '/assets/img/musican/gorschok.jpg'},
{id: 3, name: 'Глеб Самойлов', description: 'Агата Кристи', path: '/assets/img/musican/samoylof.jpg'},
{id: 4, name: 'Джимми Пейдж', description: 'Led Zeppelin', path: '/assets/img/musican/Page.jpg'},
{id: 5, name: 'Ричи Блэкмор', description: 'Deep Purple', path: '/assets/img/musican/richi-bljekmor.jpg'},
{id: 6, name: 'Мик Джаггер', description: 'The Rolling Stones', path: '/assets/img/musican/djagger.jpg'},
{id: 7, name: 'Пол Маккартни', description: 'The Beatles', path: '/assets/img/musican/PoulMac.jpg'},
{id: 8, name: 'Лиам Галлахер', description: 'Oasis', path: '/assets/img/musican/Liam.jpg'},
];
export default data;
Теперь переходим к сути проблемы, - внутри сервиса musican-service.ts реализованы следующие два метода(взяты полностью из руководства на сайте Angular):
getMusicans(): Observable<IMusican[]>{
return this.http.get<IMusican[]>(this.musicanUrl)
.pipe(
tap(_ => this.log('выбираем музыкантов')),
catchError(this.handleError<IMusican[]>('getMusicans', []))
);
}
getMusican(id: number): Observable<IMusican>{
const url = this.musicanUrl;
return this.http.get<IMusican>(url).pipe(
tap(_ => this.log(`fetched hero id=${id}`)),
catchError(this.handleError<IMusican>(`getHero id=${id}`))
);
}
Первый метод по запросу получает вышеуказанный массив и выводит его на сайте, с ним все хорошо, а вот второй метод не работает. Второй метод отвечает за страницу с подробным описанием музыкантов, но возвращает он просто объект Observable и на сайте в итоге я получаю следующий вид:
Что мне нужно сделать с этим методом, чтобы он выводил данные корректно?
Что только я уже не перепробовал, ничего не выходит, помогите пожалуйста новичку)
На всяких случай приложу ссылку на репозиторий с проектом: https://github.com/JavNikTool/AngularDecision
Спасибо большое за внимание!