Kevin Powell - Community•3w ago

Angular and nest.js help

Hello. I've been developing for eight months. Right now I'm working on a project that uses Angular for the frontend, and nest.js. for the backend. As far as API requests go, I've got a get request, and a post request... here's the relevant code:

//hymns.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { HymnsModel } from '../models/hymns.model';

@Injectable({
  providedIn: 'root'
})
export class HymnsService {
  private apiUrl = 'http://localhost:3000/hymns';

  constructor(private _httpClient: HttpClient){}

  addHymn(hymn: HymnsModel): Observable<any>{
    return this._httpClient.post<any>(this.apiUrl, hymn);
  }
  getAllHymns(): Observable<HymnsModel[]>{
    return this._httpClient.get<HymnsModel[]>(this.apiUrl);
  }
}

//hymns.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { HymnsModel } from '../models/hymns.model';

@Injectable({
  providedIn: 'root'
})
export class HymnsService {
  private apiUrl = 'http://localhost:3000/hymns';

  constructor(private _httpClient: HttpClient){}

  addHymn(hymn: HymnsModel): Observable<any>{
    return this._httpClient.post<any>(this.apiUrl, hymn);
  }
  getAllHymns(): Observable<HymnsModel[]>{
    return this._httpClient.get<HymnsModel[]>(this.apiUrl);
  }
}

and

//admin-dashboard.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HymnsService } from '../services/hymns.service';
import { HymnsModel } from '../models/hymns.model';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-admin-dashboard',
  standalone: true,
  imports: [CommonModule, FormsModule, HttpClientModule],
  templateUrl: './admin-dashboard.component.html',
  styleUrl: './admin-dashboard.component.css'
})
export class AdminDashboardComponent {
  hymn: HymnsModel = {id: NaN, title: '', author: '', description: '', content: ''};

  constructor(private hymnService: HymnsService){}

  addHymn(): void{
    this.hymnService.addHymn(this.hymn).subscribe(() => {
      console.log('Hymn added successfully');
    })
  }
}

//admin-dashboard.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HymnsService } from '../services/hymns.service';
import { HymnsModel } from '../models/hymns.model';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-admin-dashboard',
  standalone: true,
  imports: [CommonModule, FormsModule, HttpClientModule],
  templateUrl: './admin-dashboard.component.html',
  styleUrl: './admin-dashboard.component.css'
})
export class AdminDashboardComponent {
  hymn: HymnsModel = {id: NaN, title: '', author: '', description: '', content: ''};

  constructor(private hymnService: HymnsService){}

  addHymn(): void{
    this.hymnService.addHymn(this.hymn).subscribe(() => {
      console.log('Hymn added successfully');
    })
  }
}

2 Replies

Ben•3w ago

and

//home.component.ts
import { Component, OnInit } from '@angular/core';
import { HymnsModel } from '../models/hymns.model';
import { HymnsService } from '../services/hymns.service';
import { NgFor } from '@angular/common';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [NgFor],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent implements OnInit {
  hymns: HymnsModel[] = [];

  constructor(private _hymnsService: HymnsService){}

  ngOnInit(): void {
    this._hymnsService.getAllHymns().subscribe( hymns => {
      this.hymns = hymns;
    })
  }
}

//home.component.ts
import { Component, OnInit } from '@angular/core';
import { HymnsModel } from '../models/hymns.model';
import { HymnsService } from '../services/hymns.service';
import { NgFor } from '@angular/common';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [NgFor],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent implements OnInit {
  hymns: HymnsModel[] = [];

  constructor(private _hymnsService: HymnsService){}

  ngOnInit(): void {
    this._hymnsService.getAllHymns().subscribe( hymns => {
      this.hymns = hymns;
    })
  }
}

I'm getting this error:

Ben•3w ago

Gaming

Programming

Angular and nest.js help