Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Só aparece escrito na tela o caminho do template indicado na rota ao executar a aplicação

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!

1 resposta
solução!

Acabei de encontrar o erro. Estava escrevendo 'template' ao invés de 'templateUrl' no component. rs