Angularでパイプ+jsonを使ってログ出力する際に「NG8004: No pipe found with name ‘json’.」

2024年7月10日

今回はAngularを使っているときにでパイプ+jsonを使ってログ出力する際に「NG8004: No pipe found with name 'json’.」とエラーが出たときの対処法についてご紹介いたします。

Angularのバージョンは18.0.6です。

Contents [hide]

Angularでパイプ+jsonを使ってログ出力する際に「NG8004: No pipe found with name 'json’.」
- スタンドアロンコンポーネントの場合
- モジュールベースのコンポーネントの場合
終わりに

Angularでパイプ+jsonを使ってログ出力する際に「NG8004: No pipe found with name 'json’.」

結論から言うと、エラーが出る原因はAngularのCommonModuleをインポートしていないことが原因です。
AngularのCommonModuleをインポートしていないと、HTML上で
{{ testObject | json }}
などを使ってログ出力しようとしたときに表題のようなエラーが出てしまいます。

モジュールのインポート方法としては、スタンドアロンコンポーネントの場合とモジュールベースのコンポーネントの場合に分けられますが、それぞれ次のような書き方になるでしょう。

スタンドアロンコンポーネントの場合

app.component.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div>
      <p>{{ myObject | json }}</p>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myObject = { name: 'Angular', version: 18 };
}

import { Component } from '@angular/core';

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

@Component({

selector: 'app-root',

standalone: true,

imports: [CommonModule],

template: `

<div>

<p>{{ myObject | json }}</p>

</div>

styleUrls: ['./app.component.css']

})

export class AppComponent {

myObject = { name: 'Angular', version: 18 };

}

モジュールベースのコンポーネントの場合

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }