angular – recebo código 404 num PUT mas em GET funciona normalmente: {body: {…}, url: “api/modes/1”, headers: HttpHeaders, status: 404, statusText: “Not Found”}


Estou estudando Angular e no momento vou seguir para utilização de TDF mas antes disso estou preparando methods de CRUD para então poder trabalhar com TDF em cima destes methods, até então estou passando por problemas de request e não entendo o que estou fazendo de errado, quando faço um GET utilizando a Url “api/modes” ou “api/modes/1” a requisição e bem sucedida, mas ao tentar fazer um put utilizando do endereço “api/modes/1” e me retornado um erro 404 {body: {…}, url: “api/modes/1”, headers: HttpHeaders, status: 404, statusText: “Not Found”}

Estou utilizando:

  • Angular 9.1.8
  • Angular in-memory-web-api 0.11.0

#mode.service.ts

import { HttpHeaders, HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from "@angular/core";

import { Observable, of } from 'rxjs';

import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

import { Mode } from "./mode.model";

@Injectable()

export class ModeService {
  public modeUrl = "api/modes";

  public constructor(private http: HttpClient) {}

  public getModes(): Observable<Mode()> {

    return this.http.get<Mode()>(this.modeUrl)
      .pipe(
        catchError(this.handleErrors)
      )

  }
  
  public getMode(id: number): Observable<Mode> {
    let url = `${this.modeUrl}/${id}`;

    return this.http.get<Mode>(url)
      .pipe(
        catchError(this.handleErrors)
      )
  }

  public updateMode(mode: Mode): Observable<Mode> {
    let url = `${this.modeUrl}/${mode.id}`;
    let body = JSON.stringify(mode);
    let headers = new HttpHeaders({'Content-type': 'application/json'});
    
    return this.http.put<Mode>(url, body, {headers: headers} )
      .pipe(
        catchError(this.handleErrors)
      )

  }

  private handleErrors(error: HttpErrorResponse) {
    console.log("SALVANDO O ERRO NUM ARQUIVO DE LOG - DETALHES DO ERRO => ", error);
    return throwError(error);
  }

}

#mode-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';

// import "rxjs/add/operator/switchMap";
import { switchMap } from 'rxjs/operators';

import { Mode } from '../shared/mode.model';
import { ModeService } from '../shared/mode.service';

@Component({
  selector: 'mode-detail',
  templateUrl: './mode-detail.component.html'
})

export class ModeDetailComponent implements OnInit {
  public mode: Mode;

  public constructor (
    private modeService: ModeService,
    private route: ActivatedRoute,
    private location: Location
  ) {}

  public ngOnInit() {
    this.route.params.pipe(switchMap(
        (params: Params) => this.modeService.getMode(+params('id'))))
      .subscribe(
        mode => this.mode = mode,
        error => alert("Ocorreu um erro no servidor, tente mais tarde.")
      );
  }

  public updateMode() {
    if (!this.mode.name) {
      alert("O módulo deve ter um nome")
    } else {
      this.modeService.updateMode(this.mode)
        .subscribe(
          () => alert("Módulo atualizado com sucesso!"),
          () => alert("Ocorreu um erro no servidor, tente mais tarde.")
        )
    }
  }  

  public goBack() {
    this.location.back();
  }
}

#mode-detail.component.html

<h1 class="page-header font-weight-black text-secondary">Módulo {{ mode?.name }}</h1>
<br>
<div class="container-fluid bg-light shadow rounded ">

  <br>
  <div class="form-row" *ngIf="mode">
    <div class="form-group col-lg-12">
      <label for="name" class="col-sm-2 control-label text-body">Nome</label>
      <div class="col-sm-12">
        <input ((ngModel))="mode.name" type="text" class="form-control text-muted" placeholder="Nome">
      </div>
    </div>
    <div class="form-group col-lg-12">
      <div class="col-sm-12 text-right">
        <button class="btn btn-default text-secondary" (click)="goBack()">Voltar</button>
        <button type="submit" class="btn btn-primary btn-medium text-light" (click)="updateMode()">Salvar</button>
      </div>
    </div>

  </div>
  <br>

</div>

Error Console

inserir a descrição da imagem aqui