Ошибка NG8002: невозможно привязать к «ngSrc», поскольку это неизвестное свойство «img»

Я попытался использовать директиву NgOptimizedImage. Я использую Angular 18. Моя проблема в том, что изображение не отображается, всегда возникает следующая ошибка

X [ERROR] NG8002: Can't bind to 'ngSrc' since it isn't a known property of 'img'. [plugin angular-compiler]

В родительском модуле я импортировал NgOptimizedImage. Вот мой код:

<div class = "awards-content">
        <div class = "awards-screen">
            <div  class = "align-awards text-primary">
                <h4 class = "label-title">Awards...</h4>
            </div>
            <div>
                <p>
                <span class = "text-primary">
                    <a class = "spacer"
                      href = "https://github.com/lkovari/LKovariHome/blob/master/src/app/layout-pages/awards/awards.component.ts">
                      <img [src] = "githubLogoPath" width = "16" height = "16" alt = "githubLogoPath">
                    </a>Technical notes:</span> under CONSTRUCTION, will use ngOptimizedImage directive</p>
            </div>
            <div class = "image-content">
                <ul>
                    @for (imageDescriptor of imageDescriptors; track imageDescriptor.id) {
                        <li class = "text-primary">  {{ imageDescriptor.alt }}
                            <img
                                class = "img-responsive"
                                [ngSrc] = "imageDescriptor.fileName" 
                                [width] = "imageDescriptor.width"
                                [height] = "imageDescriptor.height"
                                [alt] = "imageDescriptor.alt"
                                ngSrcset = "200w, 400w, 600w, 800w, 1000w, 1200w, 1600w, 2000w, 3000w">
                        </li>            
                    }
                </ul>
            </div>            
        </div>
</div>

ТС:

import { Component, OnInit } from '@angular/core';
import { ImageDescriptor } from './models/image-descriptor.interface';

@Component({
  selector: 'app-awards',
  templateUrl: './awards.component.html',
  styleUrls: ['./awards.component.scss']
})
export class AwardsComponent implements OnInit {
  githubLogoPath: string;
  public years: number;
  imageDescriptors: ImageDescriptor[] = [
    { id : 1, fileName: 'assets/images/2022Q2LeaderboardWinnerGT50.png', width: 434, height: 640, alt: 'Leaderboard winner Q2 of 2022' },
    { id : 2, fileName: 'assets/images/2021Q4CaughtAtYourBest.png', width: 791, height: 916, alt: 'Caught at your best Q4 2021' },
    { id : 3, fileName: 'assets/images/2018CertificateOfRecognition20years.png', width: 800, height: 583, alt: '20 years of service' },
    { id : 4, fileName: 'assets/images/2016Q4CaughtAtYourBest.png', width: 1280, height: 983, alt: 'Caught at your best Q4 2016' },
    { id : 5, fileName: 'assets/images/2015Q4CaughtAtYourBest.png', width: 1280, height: 913, alt: 'Caught at your best Q4 2015' },
    { id : 6, fileName: 'assets/images/icagile-cert2014.png', width: 800, height: 583, alt: 'IcAgile course Certificate' },
    { id : 7, fileName: 'assets/images/AmkaiStockOptions1050A.png', width: 1199, height: 913, alt: 'Stock Option Series A' }
  ]

  constructor() { }

  ngOnInit() {
    const date = new Date();
    this.years = date.getFullYear();
    this.githubLogoPath = 'assets/logos/GitHub-Mark-32px.png';
  }

}

Если у кого-то есть идеи, я буду признателен.