typescript - Hvordan løser man at en hvilken som helst komponent ikke er et kjent element i ngrx angular?

1. Prøvde selvstendig strategi og også @ngModules, men kanskje jeg mangler noe i app.component.html eller i app.component.ts.

2. Alt på min side er helt i orden ifølge VScode og Angular-støtteutvidelsen.

3. Problemet ser ut til å være relatert til at Angular-kompilatoren ikke gjenkjenner ReadDeleteComponent når den erklæres i AppModule.

   Jeg vet ikke, jeg er virkelig forvirret. Eksperter, hjelp meg!

Building...✘ [ERROR] NG8001: 'app-read-delete' is not a known element:
1. If 'app-read-delete' is an Angular component, then verify that it is part of this module.
2. If 'app-read-delete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

    src/app/app.component.html:3:4:
      3 │     <app-read-delete></app-read-delete>
        ╵     ~~~~~~~~~~~~~~~~~

  Error occurs in the template of component AppComponent.

    src/app/app.component.ts:5:15:
      5 │   templateUrl: './app.component.html',
        ╵                ~~~~~~~~~~~~~~~~~~~~~~
Application bundle generation failed. [2.311 seconds]
Watch mode enabled. Watching for file changes...

Her er min src/app/app.component.html

<app-read-delete></app-read-delete>
-----------------

Her er min src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ngrx-store-hello-world';
}

her er min src/app/app.module.ts

// app.module.ts
import { StoreModule } from "@ngrx/store";
import { heroReducer } from "./heroes/reducers/hero-reducer";
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { ReadDeleteModule } from "./heroes/components/read-delete/read-delete.module";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReadDeleteModule, // Import the module only once
    StoreModule.forRoot(
      { heroes: heroReducer }
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

her er min src/app/heroes/components/read.delete.component.ts

// src/app/heroes/components/read-delete.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-read-delete',
  templateUrl: './read-delete.component.html',
  styleUrls: ['./read-delete.component.scss'],
})

export class ReadDeleteComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Endelig her er read-delete-module.ts som brukes til å eksportere read-deleteComponent.

// src/app/shared/read-delete.module.ts
import { NgModule } from '@angular/core';
import { ReadDeleteComponent } from './read-delete.component';

@NgModule({
  declarations: [ReadDeleteComponent],
  exports: [ReadDeleteComponent]
})
export class ReadDeleteModule { }

Jeg har også prøvd frittstående komponenter, men den samme feilen oppstår fortsatt.

Angular CLI: 17.0.5
Node: 20.9.0
Package Manager: npm 10.1.0
OS: darwin x64