Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Erro: GET http://localhost:4200/endereco/flavio/photos 404 (Not Found)

Olá, estou enfrentando problemas ao tentar mostrar as fotos da API através da rota, antes estava funcionando agora não mais...

Meu arquivo de rotas:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { PhotoListComponent } from './photos/photo-list/photo-list.component';
import { PhotoFormComponent } from './photos/photo-form/photo-form.component';
import { NotFoundComponent } from './errors/not-found/not-found.component';

const routes: Routes = [
    {path: 'user/:userName', component: PhotoListComponent},
    {path: 'p/add', component: PhotoFormComponent},
    {path: '**', component: NotFoundComponent}   // para qualquer view inexistente carregue PhotoListComponent
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)    // tudo a partir do caminho raiz
    ],
    exports:[
        RouterModule
    ]
})
export class AppRoutingModule {  }

Meu Component que lista as fotos

import { Component, OnInit } from '@angular/core';
import { PhotoService } from '../photo/photo.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-photo-list',
  templateUrl: './photo-list.component.html',
  styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit {

  photos: any[] = [];   // tipo any significa qualquer

  /* Quando o AppComponent for inicializado o método construtor será sempre inicializado */
  constructor(
    private photoService: PhotoService,
    private activatedRoute: ActivatedRoute
    ) { }

  ngOnInit(): void {
    const userName = this.activatedRoute.snapshot.params.userName;  // coletando dado da rota
    this.photoService
      .listFromUser(userName)
      .subscribe(photos => {    // photos => funciona como uma funcao!
        console.log(photos[0].description);
        this.photos = photos;
      });   // o método observable nos notifica sobre os dados recebidos ao fazer a  inscricao
  }

}

Minha view

<animal-photo 
  *ngFor="let photo of photos"
  [url]="photo.url"
  [description]="photo.description">
</animal-photo>
2 respostas

Olá, Rafael

O seu código está correto, aparentemente o que está errado é a url que você está tentando acessar. Ela não existe, por isso devolve um 404(not found), se você observar as rotas que foram definidas não existe um path "/endereco/flavio/photos". Tente acessar "user/flavio", vale a pena se atentar também ao localhost, pois a rota "flavio/photos" é um get para a api usando a porta 3000 e retorna um json de fotos e nossa aplicação usa a porta 4200.

solução!

Olá Leonardo, acabei achando o erro, ELE ESTAVA NO SERVICE Acabei colocando meu endereço como uma palavra (string chamada 'endereco' ao invés de colocar a variável "endereco":

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

import { Photo } from "./photos";

const endereco = 'http://localhost:3000';

@Injectable({
    providedIn:"root"
})
export class PhotoService {

    private http: HttpClient;

    constructor(http: HttpClient) {
        this.http = http;
    }

    listFromUser(userName: string) {
        return this.http.get<Photo[]>('endereco' + '/' + userName +'/photos');   // retorna dados do tipo Photo
    }

}

Bastou tirar as aspas de endereco!

Obrigado pela ajuda!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software