파이프 'async'를 찾을 수 없습니다.

파이프 'async'를 찾을 수 없습니다.

Angular 2와 Firebase로 간단한 블로그를 구축하려고 하는데 구성 요소에서 비동기 파이프를 사용하는 데 문제가 있습니다.콘솔에 오류가 있습니다.

zone.js:344 처리되지 않은 약속 거부:템플릿 구문 분석 오류:파이프 'async'를 찾을 수 없습니다(").

[ERROR ->]{(blog.user | 비동기)?이름_이름 }}

": BlogComponent@6:3; 영역:; 작업: 약속.값: 오류:템플릿 구문 분석 오류: (…) 오류:템플릿 구문 분석 오류:파이프 '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.vmdk

<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.vmdk

<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에 비동기 파이프를 주입해야 합니까?blog.component.ts에서 비동기 작업을 수행하려면 어떻게 해야 합니까?

@NgModule.declarations하위 모듈에 상속되지 않습니다.모듈에서 파이프, 지침, 구성 요소가 필요한 경우 모듈을 피쳐 모듈로 가져와야 합니다.

된 모듈은 "Core Pipe"입니다.CommonModule@angular/common

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

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

에서 app.component이 가장 입니다.BrowserModuleAppModule.BrowserModuleCommonModule그래서 수입함으로써.BrowserModule수입하는 것과 같습니다.CommonModule.

또한 주목할 가치가 있습니다.CommonModule핵심지가있습다니들, 예를어지와 .ngFor그리고.ngIf따라서 이러한 기능을 사용하는 기능 모듈이 있는 경우에는CommonModule모듈로 이동합니다.

되지 않은 을 통해)declarations:[]그러면 이러한 유형의 오류도 표시됩니다.

Angular 9에 새 구성 요소를 추가할 때 HMR 때문에 개발 서버를 다시 시작해야 했습니다.

ng serve --hmr

이것이 없으면 응용 프로그램은 모든 종속성을 로드하지 않고 이 오류를 발생시킵니다.

로드하려는 구성 요소가 선언 배열에 선언되지 않은 경우 다음과 같이 이러한 유형의 오류가 발생합니다. 제 경우 이 구성 요소는 배송 중이었습니다.

위에서 언급한 모든 답변을 시도했지만 작동하지 않는 경우에는 그냥 수행하십시오.npm run start작동할 것입니다. 저의 경우 컴파일 문제가 발생한 후 이 오류가 발생했습니다.

Angular 6 또는 7로 업그레이드한 경우 tsconfig.ts에서 enable을 해제해야 합니다.Ivy in angular Compiler 옵션

예:

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

그것으로 제 문제가 해결되었습니다. 다른 사람도 시간을 절약할 수 있을 것입니다.

한 번에 여러 개의 수입품을 변경할 때 가끔 같은 문제를 발견했습니다.

시작했습니다.ng start늦게까지 코딩하는 것의 놀라운 점 중 하나.

일반적으로 이것은 제가 모든 수입품을 확인하고 있었기 때문에 저를 미치게 합니다. 그리고 "공통 모듈"의 대답은 보통 말이 되지만, 누군가 제가 직면한 것과 같은 어리석은 상황을 발견할 경우, 이제 여러분은 무엇을 해야 할지 알게 되었습니다.

제 경우에는 파이프에 대한 입력이 null이었습니다.그래서 질문의 경우에는 다음 사항을 확인합니다.blog.user<p>{{ (blog.user | async)?.first_name }}</p>이 아닙니다. 입니다.

편집: 나는 나만의 프로젝트를 해왔고, 나는 코드에 어떠한 종류의 빌드 오류가 있을 때 이 오류가 발생할 수 있다는 것을 알아차렸습니다. 예를 들어, html 태그는 닫히지 않았습니다.<label>foo<label>그 후에, 제가 아는 유일한 방법은 서버 전체를 재설정하는 것입니다.그것은 짜증나고 그렇게 되어서는 안 됩니다.

---

구성 요소에 빈(실제 주석이 달린) 함수 구현이 있을 때 이 오류가 발생했습니다.

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

.ts로

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

기본 이유:

파이프다.async는 내에서에서 .CommonModule 때 이 합니다.CommonModule구성 요소를 가져오는 모듈 또는 구성 요소 자체(독립 실행형 모드인 경우).

고급:

각도가로 인해 사전 하지 "찾을 수 없습니다"라는메시지가 .CommonModule.

이 경우 모든 모듈을 강제로 사전 로드하여 코드를 다음과 같이 변경할 수 있습니다.

// Probably in app-routing.module.ts

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

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

그런 다음 페이지를 다시 로드합니다. 문제가 해결되지 않으면 각도가 경로 종속성을 제대로 해결할 수 없음을 의미할 가능성이 높습니다.예를 들어 모듈이 경로를 가져오지만 다른 모듈 자체가 경로를 가져오도록 할 수 있습니다.

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

최적화된 프로덕션 빌드에서 이 기능을 사용하는 경우 트리 흔들림이 원인일 수 있습니다.sideEffects: false이것은 이제 각도 10에서 권장되는 설정입니다.ng new --strict.

아직 제 프로젝트를 어떻게 수정해야 할지는 모르지만, 현재로서는 사실로 설정하는 것이 저를 위해 수정되었습니다.

이전 답변이 좋습니다(기억해야 함).declarations:[]하지만 시계를 다시 시작해야 합니다(CMD를 사용하는 경우에만 해당).npm-run webpack-development -- -- progress --watch.

대화 상자로 사용되는 구성 요소에서 비동기 파이프를 사용하려고 할 때 이 문제가 발생했습니다.저는 즉시 모듈에 구성 요소를 선언하여 이 문제를 해결했습니다(저는 게으른 로딩을 사용했습니다).그렇지 않은 경우 앱 모듈.

또한 구성 요소가 선언된 모듈을 가져오는지 확인합니다.

나처럼 독립적인 구성요소를 개발한다면,

나는 실종되었습니다.

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

언급URL : https://stackoverflow.com/questions/39625321/the-pipe-async-could-not-be-found