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

zone.js: 344 Отклонение необработанного обещания: Ошибки синтаксического анализа шаблона: Канал async не может быть найден ("

[ОШИБКА ->] {{(blog.user | async) ?. first_name}}

"): BlogComponent@6: 3; Зона:; Задача: Promise.then; Значение: Ошибка: Ошибки синтаксического анализа шаблона: (…) Ошибка: Ошибки синтаксического анализа шаблона: Канал async не может быть найден ("

blog.component.ts

импорт {Component, Input} из "@ angular / core";

@Компонент({
  селектор: 'блог-компонент',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css'],
})

export class BlogComponent {
  @Input () блог;
}

blog.component.html

{{blog.title}}

{{(blog.user | async) ?. first_name}}

app.component.ts

импорт {Component} из '@ angular / core';
импортировать {BlogService} из "./services/services.module";

@Компонент({
  селектор: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  конструктор (частный blogService: BlogService) {}
  article = this.blogService.getAllArticles ();
}

app.component.html

blog.service.ts

импорт {Injectable} из "@ angular / core";
импортировать {AngularFire} из "angularfire2";
import {Observable} из "rxjs";
import "rxjs / add / operator / map";

@Injectable ()
export class BlogService {
  конструктор (частный af: AngularFire) {}

  getAllArticles (): Observable  {
    return this.af.database.list ('статьи', {
      запрос: {
        orderByKey: правда,
        limitToLast: 10
      }
    }). map ((статьи) => {
      return article.map ((article) => {
        article.user = this.af.database.object (`/ users / $ {article.user_id}`);
        возврат статьи;
      });
    });
  }
}

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

Ответы (12)

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

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

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

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

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

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

При добавлении нового компонента в Angular 9 мне пришлось перезапустить сервер разработки, возможно, также из-за HMR:

ng serve --hmr

Без этого приложение просто не загрузило все зависимости и выдало эту ошибку.

Если вы попробовали все вышеупомянутые ответы, но он не работает, просто выполните npm run start, он будет работать, В моем случае эта ошибка возникла после некоторой проблемы с компиляцией.

Если компонент на загружаемом вами маршруте не объявлен (с помощью объявлений: []), вы также получите этот тип ошибки.

В моем случае вход в канал был нулевым. Поэтому в случае вопроса убедитесь, что blog.user in

{{(blog.user | async) ?. first_name}}

не равно null .

Component you're trying to load is not declared in the declarations array then you will get this type of error, in my case this was shipping component, like mentioned below:

enter image description here

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

например:

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

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

Я столкнулся с этой проблемой, когда пытался использовать асинхронный конвейер в компоненте, используемом в качестве диалогового окна. Я решил это, объявив компонент в непосредственном модуле (я использовал ленивую загрузку). Модуль приложения, если его нет.

Если вы получаете это в оптимизированной производственной сборке, это могло быть из-за тряски дерева, особенно если вы используете sideEffects: false. Теперь это рекомендуемая настройка в Angular 10 через ng new --strict.

Еще предстоит выяснить, как исправить мой проект, но установка значения true исправила это для меня на данный момент.

Я обнаруживал ту же проблему несколько раз при одновременном изменении нескольких операций импорта.

Мое приложение снова работало нормально, без изменения кода, но с перезапуском ng start. Один из сюрпризов кодирования допоздна.

Обычно это сводит меня с ума, поскольку я проверял весь импорт, и ответ «Общего модуля» обычно имеет смысл, но на всякий случай, если кто-то обнаружит ту же глупую ситуацию, с которой я столкнулся, теперь вы знаете, что делать.

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

редактировать: я работал над своим собственным проектом и заметил, что эта ошибка может возникнуть, когда код имеет любую ошибку сборки, например, незакрытый тег html, например <метка> foo <метка>. После этого единственный известный мне способ - это просто перезагрузить сервер. Это раздражает, и так быть не должно.


Я получил эту ошибку, когда у меня была пустая (фактически закомментированная) реализация функции в моем компоненте

в html:

дюйм. Ts

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

2022 WebDevInsider