De fato, o erro se origina em ListagemComponent:
import { Component, Input } from '@angular/core';
import { FotoService } from '../foto/foto.service';
import { FotoComponent } from '../foto/foto.component';
@Component({
moduleId: module.id,
selector: 'listagem',
templateUrl: './listagem.component.html'
})
export class ListagemComponent {
fotos: FotoComponent[] = [];
constructor(service: FotoService) { //definir o tipo no construtor implicitamente chama @Inject(tipo)
service
.lista()
.map(res => res.json())
.subscribe(fotos => {
this.fotos = fotos;
console.log(this.fotos);
}, err => console.log(err));
}
}
Na linha que contém
.map(res => res.json())
O VSCode mostra
[ts] Property 'json' does not exist on type 'FotoComponent[]'.
E o log completo:
TypeError: res.json is not a function
at MapSubscriber.eval [as project] (http://localhost:3000/app/listagem/listagem.component.js:19:46)
at MapSubscriber._next (http://localhost:3000/node_modules/rxjs/operator/map.js:77:35)
at MapSubscriber.Subscriber.next (http://localhost:3000/node_modules/rxjs/Subscriber.js:89:18)
at MapSubscriber._next (http://localhost:3000/node_modules/rxjs/operator/map.js:83:26)
at MapSubscriber.Subscriber.next (http://localhost:3000/node_modules/rxjs/Subscriber.js:89:18)
at XMLHttpRequest.onLoad (http://localhost:3000/node_modules/@angular/http/bundles/http.umd.js:1497:42)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37)
at Object.onInvokeTask (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6233:41)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:224:42)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47)
Mas pode deixar, que identifiquei o problema; na verdade, ocorreu depois que implementei o lista() em FotoService:
lista(): Observable<FotoComponent[]> { //Observable possui o metodo subscribe() -- é o equivalente no Angular2 às Promises
return this.http
.get(this.url)
.map(res => res.json());
}
Ou seja, ListagemComponent não deveria nem ter a chamada
.map(res => res.json())
Perdo-me pelo erro bobo e pergunta pior ainda. Tenho bastante experiência com desenvolvimento (em outras linguagens, que não JavaScript), sei da necessidade de explicitar contexto, obviamente, mas caí na armadilha de fazer a pergunta "in a hurry", pois estava em cima da hora de sair para um compromisso.
És um ótimo professor, só tenho a agradecer a paciência com este dinossauro da TI que tenta aprender esses frameworks modernosos JavaScript que tendem a se multiplicar ad infinitum :-)