Не распознаётся импорт для json-pipe, что делать?

Question

[Evgen Bolat]

Всем доброго времени суток! Начал изучать Angular, и не понимаю, по какой причине typescript продолжается ругаться, что jsonPipe нет
Прикладываю код app.component.html, где сама ошибка (No pipe found with name 'json'. ngtsc(-998004))

<app-profile-card></app-profile-card>

<pre>
  {{ profiles | json }}
</pre>

А вот код app.component.ts

import { Component, NgModule, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ProfileCardComponent } from "./common-ui/profile-card/profile-card.component";
import { ProfileService } from './data/services/profile.service'
import { JsonPipe } from '@angular/common';
import { CommonModule } from '@angular/common';
@Component({
    selector: 'app-root',
    standalone: true,
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
    imports: [RouterOutlet, ProfileCardComponent]
})
export class AppComponent {
  profileService = inject(ProfileService)
  profiles: any = []

  constructor(){
    this.profileService.getTestAccounts().
    subscribe(value => {
      this.profiles = value
    })
  }
}

Причём два последних импорта он помечает как неиспользуемые, хотя по ответам на аналогичные проблемы советуют их импортнуть.
Буду признателен, как новичок, за помощь!
ng версии 18.0.3

Answer 1

[Evgen Bolat]

Нашёл, куда на самом деле импорт необходимо делать.

В app.components.ts

import { Component, NgModule, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ProfileCardComponent } from "./common-ui/profile-card/profile-card.component";
import { ProfileService } from './data/services/profile.service'
import {JsonPipe } from '@angular/common';
@Component({
    selector: 'app-root',
    standalone: true,
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
    imports: [RouterOutlet, ProfileCardComponent, JsonPipe] //вот здесь
})
export class AppComponent {
  profileService = inject(ProfileService)
  profiles: any = []

  constructor(){
    this.profileService.getTestAccounts().
    subscribe(value => {
      this.profiles = value
    })
  }
}