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

Construtor do AppComponent não está sendo chamado.

Quando estou implementando o código da Aula 2 (injeção de parâmetro http pelo construtor), percebi que o código dentro do construtor não está sendo chamado.

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    moduleId: module.id,
    selector: 'app',
    //templateUrl: './app.component.html'
    template: `
        <div class="jumbotron">
            <h1 class="text-center">Alurapic</h1>
        </div>
        <div class="container">
            <foto url="img/leao.jpg" titulo="Leão"></foto>
            <ul>
                <li *ngFor="let msg of messages">{{msg}}</li>
            </ul>
            <foto *ngFor="let foto of fotos" url="{{foto.url}}" titulo="{{foto.titulo}}"></foto>
        </div>
    `
})
export class AppComponent {

    fotos : Object[];
    messages = [ 'One', 'Two', 'Three', 'Whatever' ];

    construtor(@Inject(Http) http) {

        this.messages = [ 'One', 'Two' ];

        console.info('Initializing AppComponent...');

        http.get('/v1/fotos')
            .map(res => {
                return res.json()
            })
            .subscribe(
                fotos => { 
                    this.fotos = fotos;
                    console.info(this.fotos);
                },
                erro => console.error('problema')
            );
    }
}

Coloquei o template inline apenas para facilitar o debugging.

Acredito que meu módulo está sendo declarado corretamente:

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 'rxjs/add/operator/map';


@NgModule({
    imports: [ BrowserModule, FotoModule, HttpModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

A parte do container está renderizada desta forma, contudo:

<div class="container">
<foto titulo="Leão" url="img/leao.jpg" ng-reflect-url="img/leao.jpg" ng-reflect-titulo="Leão">
   <img class="img-responsive center-block" ng-reflect-src="img/leao.jpg" src="img/leao.jpg" ng-reflect-alt="Leão" alt="Leão">
</foto>
<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Whatever</li>
</ul>
</div>

Ou seja, o construtor do AppComponent não está sendo carregado, pois se estivesse, a lista teria apenas os valores "One" e "Two". Não há também nenhum log no console.

Meu ambiente é o Node v6.10.3, Ubuntu 16.04.

1 resposta
solução!

Encontrei o problema. Cometi um erro bobo, um typo em:

constructor(@Inject(Http) http) {
    //...
}

Faltou um "c" no constructor. Agora o código funciona como deveria.