Труба 'асинхронная' не найдена
Я пытаюсь создать простой блог с 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