Angular 2의 JSON 파이프가 작동하지 않습니다.

Angular 2의 JSON 파이프가 작동하지 않습니다.

JSON 파이프를 통해 데이터를 파이프로 연결하려고 하면 콘솔에서 다음 오류가 발생합니다.

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

내가 뭘 잘못하고 있는 거지?

아마도 당신은 가져오는 것을 잊어버렸을 것입니다.CommonModule:

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


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

설명에 명시된 대로 사용 중인 모듈에서 이 작업을 수행합니다.json파이프를 피우다

내 경우에는CommonModule추가되었지만 구성 요소가 모듈 선언의 일부가 아닙니다.

(을(를) 사용하여 동적으로 구성 요소를 만들고 있었습니다.ContainerRef)

구성 요소의 상위 모듈은 다음과 같아야 합니다.

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

Lazy 모듈에서 구성 요소를 선언하고 해당 모듈이 로드되지 않은 경로에 구성 요소를 추가하려고 할 경우에도 이 문제가 발생할 수 있습니다.

예. 방금 다음과 같은 오류가 발생했습니다.

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

나를 위해.

app.module.ts의 공급자 아래에 추가해야 했습니다.

@NgModule({
    providers: [
        { provide: JsonPipe },  <-- This is important !!!!

언급URL : https://stackoverflow.com/questions/40389309/json-pipe-in-angular-2-is-not-working