8
respostas

Problemas com declaração de função anônima

Olá, estou fazendo o curso de Angular 2 e, quando estava seguindo conforme o video do exercício 3, o navegador me apresentou o seguinte erro:

(index):20 Error: SyntaxError: Unexpected token <
        at eval (<anonymous>)
        at Object.eval (http://localhost:3000/app/app.module.js:16:14)
        at eval (http://localhost:3000/app/app.module.js:32:4)
        at eval (http://localhost:3000/app/app.module.js:33:3)
    Evaluating http://localhost:3000/@angular/Http
    Evaluating http://localhost:3000/app/app.module.js
    Evaluating http://localhost:3000/app/main.js
    Error loading http://localhost:3000/app/main.js(anonymous function) @ (index):20ZoneDelegate.invoke @ zone.js:192Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357ZoneTask.invoke @ zone.js:297

Tentei copiar e colar o código apresentado no exercício, mas não resolveu. Parece talvez ser algo relacionado a Arrow Function.

8 respostas

Pode colocar o trecho do seu código aqui?

// app.component.ts
import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: './app.component.html'
})
export class AppComponent {

    fotos: Object[] = [];

    constructor(http: Http) {

        http.get('v1/fotos')
            .map(res => res.json())
            .subscribe(
                fotos => this.fotos = fotos,
                erro => console.log(erro)
            );
    }
}
//app.module.ts
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';

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

Também estou com o mesmo problema. Conseguiu descobrir qual era o problema?

Anderson, não consegui descobrir o problema não

O problema parece ser no template de vocês. Podem ficar tranquilos, vários alunos já passaram dessa parte sem problema. A gente descobre.

Matheus, só me deixa claro qual capítulo e qual vídeo.Matheus, já me passa o template de app.component.html.

Esse problema acontece quando o System.js, carregador de módulos não encontra um módulo.

No caso de vocês dois, quando fizeram as alterações, fizeram com o compilador do TypeScript rodando em background? Se isso não for feito, os arquivos não serão compilados e vocês terão problemas.

Outro ponto é o local onde vocês salvaram o arquivo. O VSCODE que eu recomendo usar (alguém usou algum editor diferente desse?) costuma indicar quando o caminho do import aponta para um arquivo que não existe.

Então..usaram ou não usaram o VSCODE? Se não usaram, qual ideia usaram?

Em suma, ou é o template ou é arquivo fora do lugar.Mas o VSCode teria que avisar isso.....

Como disse, mais de 1000 alunos passaram dessa parte sem problema, é por isso que vamos descobrir o que esta acontecendo no código de vocês. Mas eu preciso de retorno. informações...:)

Achei o problema no código de vocês. Realmente era problema no carregamento do módulo, mas muito sutil. Inclusive eu custei a detectar o problema.

O problema é o import do serviço HTTP!

Veja no seu código como você fez isso em app.module.ts:

import {HttpModule} from  '@angular/Http';

Você colocou Http, o correto é em minúsculo.

import {HttpModule} from  '@angular/http';

Essa correção resolve o problema. :)

Parece que o compilador do TypeScript fez vista grossa para esse erro, misturando caixa alta e caixa baixa. Em teoria, era para ele ter pego esse problema logo de cara.

Boa continuar os estudos meus alunos!

No meu caso foi só reiniciar o tsc:

➜ client npm start

> client@1.0.0 start 
/Caminho/completo/alurapic/client
> npm run tsc:w


> client@1.0.0 tsc:w 
/Caminho/completo/alurapic/client
> tsc -w