Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Unhandled Promise rejection: Template parse errors

Referente ao curso Angular 2: webapps ainda mais poderosas parte 1

por Vinicius Dantas e Melo
| 70k xp | 5 posts

Flávio, depois que fiz as alterações no arquivo listagem.component.html inserindo a linha | filtroPorTitulo:textoProcurado.value a página deixou de funcionar e apresenta os erros abaixo:

 Template parse errors:
The pipe 'filtroPorTitulo' could not be found ("
    <br>
    <div class="row">
        <painel [ERROR ->]*ngFor="let foto of fotos | filtroPorTitulo:textoProcurado.value" titulo="{{ foto.titulo | uppercase "): ListagemComponent@22:16 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
The pipe 'filtroPorTitulo' could not be found ("
    <br>
    <div class="row">
        <painel [ERROR ->]*ngFor="let foto of fotos | filtroPorTitulo:textoProcurado.value" titulo="{{ foto.titulo | uppercase "): ListagemComponent@22:16
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21)
    at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53)
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85)
    at Set.forEach (native)
    at compile (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49)
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28)
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:85:43)
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:451:57
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47) Error: Template parse errors:
The pipe 'filtroPorTitulo' could not be found ("
    <br>
    <div class="row">
        <painel [ERROR ->]*ngFor="let foto of fotos | filtroPorTitulo:textoProcurado.value" titulo="{{ foto.titulo | uppercase "): ListagemComponent@22:16
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21)
    at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53)
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85)
    at Set.forEach (native)
    at compile (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49)
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28)
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:85:43)
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:451:57
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47)

Como resolvo isso?

5 respostas
por Vinicius Dantas e Melo
| 70k xp | 5 posts

Ah, além disso, o vscode deixou sublinhado o trecho do código: module.id, em todos os arquivos *.component.ts

por SÉRGIO RICARDO DE JESUS SIMÕES
| 190k xp | 56 posts
ANALISTA DE SISTEMAS

Mesmo problema aqui. Basta remover o trecho com "| filtroPorTitulo: textoProcurado.value" e a aplicação volta a funcionar sem problemas.

Já verifiquei o foto.pipes.ts, e está tudo correto. E no foto.module.ts o FiltroPorTitulo está sendo importado normalmente.

por SÉRGIO RICARDO DE JESUS SIMÕES
| 190k xp | 56 posts
ANALISTA DE SISTEMAS

Bom dia. E ai pessoal, não consigo avançar no curso sem resolver esse bug. Alguém poderia ajudar ?

solução!
por Vinicius Dantas e Melo
| 70k xp | 5 posts

Encontrei o erro. Foi um erro de digitação no campo name: 'filtroPorTitulo' no arquivo fotos.pipes.ts

por SÉRGIO RICARDO DE JESUS SIMÕES
| 190k xp | 56 posts
ANALISTA DE SISTEMAS

Vinicius

Apesar da mensagem de erro ser igual a sua, parece que a causa do meu problema é outra. A propriedade name está correta, então deve ser outra coisa.

Vou postar aqui os códigos para ver se alguém identifica o problema:

foto.pipes.ts

import { Pipe } from '@angular/core';

@Pipe({
    name: 'filtroPorTitulo'
})
export class FiltroPorTitulo {
    transform(fotos, digitado) {
        console.log(fotos);
        console.log(digitado);
    }
}

foto.module.ts

import { NgModule } from '@angular/core';
import { FotoComponent } from './foto.component';
import { FiltroPorTitulo } from './foto.pipes';

@NgModule({
    declarations: [ FotoComponent, FiltroPorTitulo ],
    exports: [ FotoComponent, FiltroPorTitulo ]
})
export class FotoModule {

}

listagem.component.html

<div class="jumbotrom">
    <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>
                    </span>
                    <input #textoProcurado class="form-control" placeholder="Filtrar pelo título da foto"/>
                </div> 
            </form>
        </div> <!-- fim col-md-12 -->
        <br>
        <div class="row">
            <painel *ngFor="let foto of fotos | filtroPorTitulo:textoProcurado.value" titulo="{{foto.titulo | uppercase}}" class="col-md-2">
                <foto url="{{foto.url}}" titulo="{{foto.titulo}}"></foto>
            </painel>
        </div>
    </div>
</div>