asynchronous - La tubería ''asíncrona'' no se pudo encontrar en el componente Angular2

firebase angular 5

Question

Estoy tratando de construir un blog simple con Angular 2 y Firebase y estoy teniendo problemas al usar el tubo asíncrono en el componente. Me sale el error en la consola.

zone.js: 344Unhandled Rechazo de promesa: errores de análisis de plantilla: no se pudo encontrar el conducto ''async'' ("

[ERROR ->] {{(blog.user | async) ?. first_name}}

"): BlogComponent @ 6: 3; Zone:; Tarea: Promise.then; Valor: Error: Errores de análisis de la plantilla: (...) Error: Errores de análisis de la plantilla: No se pudo encontrar la tubería ''async'' ("

blog.component.ts

import {Component, Input} from "@angular/core";

@Component({
  selector: ''blog-component'',
  templateUrl: ''./blog.component.html'',
  styleUrls: [''./blog.component.css''],
})

export class BlogComponent {
  @Input() blog;
}

blog.component.html

<h1 class="article-title">{{ blog.title }}</h1>

<p>{{ (blog.user | async)?.first_name }}</p>

app.component.ts

import { Component } from ''@angular/core'';
import { BlogService } from "./services/services.module";

@Component({
  selector: ''app-root'',
  templateUrl: ''./app.component.html'',
  styleUrls: [''./app.component.css'']
})

export class AppComponent {
  constructor(private blogService: BlogService) {}
  articles = this.blogService.getAllArticles();
}

app.component.html

<article *ngFor="let article of articles | async">
<blog-component [blog]="article"></blog-component>
</article>

blog.service.ts

import {Injectable} from "@angular/core";
import {AngularFire} from "angularfire2";
import {Observable} from "rxjs";
import "rxjs/add/operator/map";


@Injectable()
export class BlogService {

  constructor(private af: AngularFire) { }

  getAllArticles(): Observable<any[]> {
    return this.af.database.list(''articles'', {
      query: {
        orderByKey: true,
        limitToLast: 10
      }
    }).map((articles) => {
      return articles.map((article) => {
        article.user = this.af.database.object(`/users/${article.user_id}`);
        return article;
      });
    });
  }
}

El problema surge solo cuando trato de usar async en el archivo blog.component.html. Funciona si intento imprimir el nombre de usuario en el archivo app.component.html. ¿Debo inyectar AsyncPipe en blog.module.ts? ¿Cómo puedo hacer que async funcione en blog.component.ts?

Answer 1

Si ha actualizado a Angular 6 o 7, asegúrese de que en su tsconfig.ts desactive enableIvy en angularCompilerOptions

p.ej:

angularCompilerOptions: {
enableIvy : false; // default is true
}

Eso solucionó mi problema, puede ser que también le ahorrará tiempo a otra persona.

Answer 2

También puede obtener el mismo error si está utilizando varios módulos en su app.module.ts

import { MatCardModule } from ''@angular/material'';
import { AppComponent } from ''./app.component'';

// module 1
@NgModule({ exports: [MatCardModule] })
export class MaterialModule {}

// module 2
@NgModule({
    imports: [MaterialModule]
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Entonces si generas un componente usando el comando:

ng generate component example

Se agrega al primer módulo, en lugar del segundo:

import { MatCardModule } from ''@angular/material'';
import { AppComponent } from ''./app.component'';
import { ExampleComponent } from ''./example/example.component'';

// module 1
@NgModule({ exports: [MatCardModule], declarations: [ExampleComponent] })
export class MaterialModule {}

// module 2
@NgModule({
    imports: [MaterialModule]
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Que creará el mismo error! Mover el componente a AppModule lo arreglará.

@NgModule({
    imports: [MaterialModule]
    declarations: [AppComponent, ExampleComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Answer 3

@NgModule.declarations no es heredado por módulos secundarios. Si necesita tuberías, directivas, componentes de un módulo, el módulo debe importarse a su módulo de características.

El módulo con todos los tubos centrales es CommonModule de @angular/common

import { CommonModule } from ''@angular/common'';

@NgModule({
  imports: [ CommonModule ]
})
class BlogModule {}

La razón por la que funciona en el app.component es que es muy probable que BrowserModule importando BrowserModule en AppModule . BrowserModule reexporta CommonModule , por lo que al importar BrowserModule , es como importar también CommonModule .

También vale la pena señalar que CommonModule tiene las directivas centrales, como ngFor y ngIf . Por lo tanto, si tiene un módulo de funciones que los utiliza, también deberá importar el módulo CommonModule en ese módulo.