Boa noite, professor!
Terminei de implementar o conteúdo do vídeo 03 da aula 04, mas quando executo a aplicação só aparece o caminho do template que apareceria na rota.
Segue abaixo o código:
/ AppModule /
import 'rxjs/add/operator/map';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FotoModule } from './foto/foto.module';
import { HttpModule } from '@angular/http';
import { PainelModule } from './painel/painel.module';
import { CadastroComponent } from './cadastro/cadastro.component';
import { ListagemComponent } from './listagem/listagem.component';
import { routing } from './app.routes';
@NgModule ({
imports: [
BrowserModule,
FotoModule,
HttpModule,
PainelModule,
routing ], //Imports da aplicação
declarations: [
AppComponent,
CadastroComponent,
ListagemComponent ], // O que a aplicação contém, todos os componentes que fizerem parte do módulo
bootstrap: [ AppComponent ]
})
export class AppModule { }
/ AppRoutes /
import { RouterModule, Routes } from "@angular/router";
import { ListagemComponent } from "./listagem/listagem.component";
import { CadastroComponent } from "./cadastro/cadastro.component";
const appRoutes: Routes = [
{ path: '', component: ListagemComponent },
{ path: 'cadastro', component: CadastroComponent },
{ path: '**', redirectTo: '' }
]
export const routing = RouterModule.forRoot(appRoutes);
/ ListagemComponent /
import { Component, Input } from "@angular/core";
import { Http } from "@angular/http";
@Component({
moduleId: module.id,
selector: 'listagem',
template: './listagem.component.html'
})
export class ListagemComponent {
fotos : Object[] = [];
constructor (http: Http) {
http.get('v1/fotos')
.map(res => res.json())
.subscribe(
fotos => {
this.fotos = fotos;
console.log(this.fotos);
}, erro => console.log(erro));
}
}
/ Listagem Component.html /
<div class="jumbotron">
<h1 class="text-center">Alurapic</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<form>
<div class="input-group">
<span class="input-group-btn">
<a [routerLink]="['/cadastro']" class="btn btn-primary">
Nova foto
</a>
s
</span>
</div>
</form>
</div> <!-- fim col-md-12 -->
</div> <!-- fim row -->
<br>
<div class="row">
<painel *ngFor="let foto of fotos" titulo="{{foto.titulo}}"
class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<foto url="{{foto.url}}" titulo="{{foto.titulo}}"></foto>
</painel>
</div>
</div>
Ao carregar o localhost:3000 só aparece escrito './listagem.component.html' Já conferi a digitação e as rotas, mas ainda não encontrei o erro.
Desde já, agradeço!