Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

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.