Angular 2 中的 JSON 管道不起作用答案

【问题标题】：JSON pipe in Angular 2 is not workingAngular 2 中的 JSON 管道不起作用
【发布时间】：2017-03-16 07:38:04
【问题描述】：

当我尝试通过 JSON 管道传输数据时，控制台中出现以下错误：

Unhandled Promise rejection: Template parse errors:
The pipe 'json' could not be found (...

我做错了什么？

【问题讨论】：

标签： json angular typescript

【解决方案1】：

您很可能忘记导入 CommonModule：

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


@NgModule({
    ...
    imports: [ CommonModule ]
    ...
})

如 cmets 中所述，请在您使用 json 管道的模块中执行此操作。

【讨论】：

对于上下文，这需要在声明使用 json 管道的组件的模块中完成。
对于 Angular 9：确保您的组件已在模块的声明中注册。

【解决方案2】：

在我的例子中添加了CommonModule，但该组件不是任何模块声明的一部分

（我正在使用ContainerRef动态创建组件）

【讨论】：

@WasifKhalil 我将组件添加到它的模块声明中，如果你没有；没有将它添加到 app.moudle 声明中

【解决方案3】：

你的组件的父模块应该是这样的。

import {NgModule} from '@angular/core';
import {AuditTrailFilterComponent} from './components/audit-trail-filter/audit-trail-filter.component';

import {CommonModule} from '@angular/common'; <-- This is important !!!!

@NgModule({
  imports: [
    CommonModule, <-- This is important !!!!
  ],
  declarations: [AuditTrailFilterComponent],
  exports: [
    AuditTrailFilterComponent
  ]
})
export class AuditTrailModule {
}

【讨论】：

感谢您的帖子“父母”的第二个字。经过数小时的奋斗，那是我需要的灯泡时刻！

【解决方案4】：

如果您在 Lazy module 中声明您的组件并尝试将该组件添加到未导致该模块被加载的路由，也会发生这种情况。

例如。我刚刚遇到了这个错误：

children: [

     {
         path: 'editor',
         loadChildren: () => from(import(/* webpackChunkName: "editor" */ '../editor/editor.module').then(m => m.EditorModule))
     },

     { 
         path: 'multi-preview',
         component: MultiPreviewerComponent    // declared in Editor.module (lazy loaded)
     }
]

【讨论】：