Труба 'асинхронная' не найдена

Я пытаюсь создать простой блог с Angular 2 и Firebase, и у меня возникают проблемы с использованием async pipe в компоненте. Я получаю сообщение об ошибке в консоли.

zone.js: 344 Необработанное отклонение обещаний: ошибки анализа шаблона: Не удалось найти асинхронную трубку ( "

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

" ): BlogComponent @6: 3; Zone:; Задача: Promise.then; Значение: Ошибка: Ошибки анализа шаблона: (...) Ошибка: ошибки анализа шаблона: Не удалось найти асинхронную трубку ("

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;
      });
    });
  }
}

Проблема возникает только тогда, когда я пытаюсь использовать async в файле blog.component.html. Он работает, если я пытаюсь напечатать имя пользователя в файле app.component.html. Должен ли я вводить AsyncPipe в blog.module.ts? Как я могу заставить async работать в blog.component.ts?

Ответ 1

@NgModule.declarations не наследуются дочерними модулями. Если вам нужны трубы, директивы, компоненты из модуля, модуль должен быть импортирован в ваш функциональный модуль.

Модуль со всеми сердечниковыми трубами CommonModule от @angular/common

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

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

Причина, по которой он работает в app.component, заключается в том, что вы скорее всего импортируете BrowserModule в AppModule. BrowserModule re-exports CommonModule, поэтому, импортируя BrowserModule, он также импортирует CommonModule.

Также стоит отметить, что CommonModule также имеет основные директивы, такие как ngFor и ngIf. Поэтому, если у вас есть функциональный модуль, который их использует, вам также потребуется импортировать CommonModule в этот модуль.

Ответ 2

Если вы обновились до Angular 6 или 7, убедитесь, что в вашем файле tsconfig.ts отключите enableIvy в angularCompilerOptions

например:

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

Это решило мою проблему, может быть, это сэкономит кому-то еще время.

Ответ 3

Вы также можете получить ту же ошибку, если вы используете несколько модулей в вашем 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 {}

Затем, если вы сгенерируете компонент с помощью команды:

ng generate component example

Он добавляется в первый модуль вместо второго:

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 {}

Который создаст такую же ошибку! Перемещение компонента в AppModule исправит это.

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

Ответ 4

В моем случае это была опечатка. Я написал aysnc вместо async