找不到管道“异步”

我正在尝试用 Angular 2和 Firebase 构建一个简单的 blog，我在组件中使用异步管道时遇到了问题。我在控制台中得到错误。

拒绝未处理的承诺: 模板解析错误: 无法找到管道’异步’(”

[ ERROR-> ]{{(blog.user | sync) ? . first _ name }}

值: 错误: 模板解析错误: (...)错误: 模板解析错误: 无法找到管道’异步’(”

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

博客. 组件. html

<h1 class="article-title">{{ blog.title }}</h1>
<p>{{ (blog.user | async)?.first_name }}</p>

应用程序组件

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

只有在我尝试在 blog.Component. html 文件中使用异步时才会出现问题。如果我尝试在 app.Component. html 文件中打印用户名，它就会工作。我是否应该在 blog.module.ts 中注入 AsyncPipe？如何使异步在 blog.Component. ts 中工作？

130592 次浏览
小开
最佳答案

子模块不继承 @NgModule.declarations。如果您需要来自模块的管道、指令和组件，则应该将该模块导入到特性模块中。

包含所有核心管道的模块是 @angular/common中的 CommonModule

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


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

它在 app.component中工作的原因是因为您很可能将 BrowserModule导入到 AppModule中。BrowserModule重新导出 CommonModule，所以通过导入 BrowserModule，就像导入 CommonModule一样。

值得注意的是，CommonModule也有核心指令，比如 ngFor和 ngIf。因此，如果您有一个使用这些特性的功能模块，您还需要将 CommonModule导入到该模块中。

小开

如果在 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 {}
小开

如果您已经升级到角度6或7，请确保在 Tsconfig.ts中关闭 AngularCompilerOptions

例如:

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

这解决了我的问题，也许也能节省别人的时间。

小开

在 Angular 9中添加新组件时，我不得不重新启动开发服务器，这可能也是因为 HMR:

ng serve --hmr

如果不这样做，应用程序就不会加载所有的依赖项并发出此错误。

小开

在同时更改多个导入时，我发现了同样的问题。

我的应用程序再次工作正常，没有改变任何代码，但重新启动 ng start。编码到很晚的惊喜之一。

通常这会让我抓狂，因为我正在检查所有的导入，而“公共模块”的答案通常是有意义的，但只是为了以防有人发现同样愚蠢的情况下，我所面临的，现在你知道该怎么做。

小开

如果你尝试了以上提到的所有答案，但这是不工作的方法，只要做 npm run start它会工作, 在我的例子中，在一些编译问题之后出现了这个错误。

小开

如果加载路由上的组件没有声明(通过 declarations:[]) ，那么也会得到这种类型的错误。

小开

如果你在一个优化的生产构建中得到了这一点，这可能是由于树摇晃，特别是如果你使用 sideEffects: false。这现在是一个鼓励设置在角10通过 ng new --strict。

仍然没有找到如何修复我的项目 ，但是现在把它设置为 true 修复了它。

小开

在我的例子中，管道的输入为空。 因此，在这个问题的情况下，确保 <p>\{\{ (blog.user | async)?.first_name }}</p>中的 blog.user不为空。

小开

Edit : 我一直在做我自己的项目，并且我注意到当代码具有 任何类型的构建错误时，可能会发生这种错误，例如未关闭的 html 标记，如 <label>foo<label>。在那之后，我唯一知道的方法就是重置整个服务器。这很烦人，不应该是这样的。

当我的组件中有一个空的(实际上是注释的)函数实现时，我得到了这个错误

Html: <div (click)="onClickFoo()">

在

onClickFoo() {
// this.router.navigate([...])
}
小开

你试图加载的组件没有在声明数组中声明，那么你会得到这种类型的错误，在我的例子中，这是运送组件，如下所述:

enter image description here

小开

当我试图在用作对话框的组件中使用异步管道时遇到了这个问题。我通过在即时模块中声明组件来解决这个问题(我使用了延迟加载)。应用程序模块，如果你不是。

小开

以前的答案是好的(记住做 declarations:[]) ，但也记住 重新启动你的手表(只有当你使用 CMD npm-run webpack-development -- -- progress --watch。

小开

另外，确保您正在导入组件声明所在的模块。

小开

如果你像我一样在开发一个独立的组件,

我失踪了

@Component({
...
imports: [AsyncPipe]
})
小开

基本原因:

管道 async是从 CommonModule导出的，当您忘记在导入组件的模块或组件本身中导入 CommonModule时(如果您处于 独立的模式) ，您将得到这个错误。

高级一级:

现在，如果由于某种原因，angle 无法正确地预加载 CommonModule，您可能还会得到“管道异步未找到”。

为了检查是否是这种情况，您可以强制 Angular 预加载所有模块，修改您的代码如下:

// Probably in app-routing.module.ts


import { RouterModule, PreloadAllModules } from '@angular/router';


RouterModule.forRoot([
], {
// Add this property to your main router module
preloadingStrategy: PreloadAllModules
})

然后重新加载页面，如果问题消失了，这很可能意味着角度不能正确地解决路由依赖关系。例如，您可以让一个模块导入它的路由，但是也导入另一个模块本身导入它的路由。


提交答案