Solucionado (ver solução)
Solucionado
(ver solução)
10
respostas

Erro ao utilizar o pipe async

Boa noite Professor, Por favor, poderia me ajudar no erro apresentado(Não encontrei na vídeo aula o momento em que foi implementado o *ngIf do header.component.html):

compiler.js:215 Uncaught Error: Template parse errors:
The pipe 'async' could not be found ("
        <a class="navbar-brand">ALURAPIC</a>

        <div *[ERROR ->]ngIf="(user$ | async) as user; else login">
            <i class="fa fa-user-circle"></i>
         "): ng:///CoreModule/HeaderComponent.html@4:14
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("
        <a class="navbar-brand">ALURAPIC</a>

        <div [ERROR ->]*ngIf="(user$ | async) as user; else login">
            <i class="fa fa-user-circle"></i>
        "): ng:///CoreModule/HeaderComponent.html@4:13
Can't bind to 'ngIfElse' since it isn't a known property of 'div'. ("
        <a class="navbar-brand">ALURAPIC</a>

        <div [ERROR ->]*ngIf="(user$ | async) as user; else login">
            <i class="fa fa-user-circle"></i>
        "): ng:///CoreModule/HeaderComponent.html@4:13
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
        <a class="navbar-brand">ALURAPIC</a>

        [ERROR ->]<div *ngIf="(user$ | async) as user; else login">
            <i class="fa fa-user-circle"></i>
   "): ng:///CoreModule/HeaderComponent.html@4:8
Property binding ngIfElse not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
        <a class="navbar-brand">ALURAPIC</a>

        [ERROR ->]<div *ngIf="(user$ | async) as user; else login">
            <i class="fa fa-user-circle"></i>
   "): ng:///CoreModule/HeaderComponent.html@4:8
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
    at compiler.js:22639
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
    at compiler.js:22549
    at Object.then (compiler.js:206)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)
10 respostas

Boa noite. Você importou o CommonModule no CoreModule?

Importei

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { CommonModule } from '@angular/common';

@NgModule({
    declarations: [HeaderComponent],
    exports: [HeaderComponent, CommonModule]
})
export class CoreModule { }

O CommonModule é um módulo, precisa estar em imports e não exports.

solução!

O correto é

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { CommonModule } from '@angular/common';

@NgModule({
    declarations: [HeaderComponent],
    exports: [HeaderComponent],
    imports:[CommonModule]
})
export class CoreModule { }

E parabéns por estar se dedicando aos estudos de madrugada!

Claro, desculpe a falta de atenção, ajustei e funcionou. Muito Obrigado.

Obrigado Professor.

Vi que você fez os cursos de Angular 2!

Esse curso que você está fazendo é de Angular 6 (parte 2).

Depois confere o de angular 6 parte 1

https://cursos.alura.com.br/course/angular-fundamentos

Sim, é que estava fazendo o outro curso de Angular 2 (https://cursos.alura.com.br/career/programador-angular2), mas ele saiu do ar quando iria fazer a parte 2, como que li o conteúdo dos dois cursos e aparentemente eram iguais decidi começar a parte 2 do angular 6, mas com certeza vou conferir a parte 1

A parte 1 do curso de Angular 6 tem muita mudança da parte 1 de Angular 2.

Por favor, faça a parte 1 do curso de Angular 6. Sério, caso contrário você terá mais dificuldade com a parte 2.

Por mais que eu aborde assuntos parecidos eu organizo a aplicação de uma maneira completamente diferente e abordo recursos que não tinha no de Angular 2.

Estarei fazendo a parte 1 do Angular 6. Obrigado pela dica.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software