typescript - NG0204-fel vid användning av ActivatedRoute i Angular-projekt

Jag stöter på detta ActivatedRoute-fel när jag kör ng serve-kommandot på mitt Angular-projekt:

Error: NG0204: Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?).
    at getUndecoratedInjectableFactory (core.mjs:9296:15)
    at injectableDefOrInjectorDefFactory (core.mjs:9286:16)
    at providerToFactory (core.mjs:9332:52)
    at providerToRecord (core.mjs:9316:25)
    at R3Injector.processProvider (core.mjs:9213:24)
    at core.mjs:9041:59
    at forEachSingleProvider (core.mjs:9387:13)
    at forEachSingleProvider (core.mjs:9384:13)
    at new R3Injector (core.mjs:9041:9)
    at createInjectorWithoutInjectorInstances (core.mjs:10612:12)
(

Ärligt talat, jag vet inte vad som hände. Allt var bra igår. Sedan uppdaterade jag Angular och detta händer just nu. IDE:n visar inget fel

import { Routes, RouterModule, ActivatedRoute } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    PropertyCardComponent,
    PropertyListComponent,
    NavBarComponent,
    AddPropertyComponent,
    PropertyDetailsComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule,
    FormsModule
  ],
  providers: [ActivatedRoute],
  bootstrap: [AppComponent]

Jag har bett ChatGPT om råd men kan fortfarande inte reparera det. Det borde lista på path: '' en lista över egenskaper, men istället får jag ett fel med parametrarna som anges ovan

Svar #1

Din modulerkläring kommer att behöva

• Deklarera routes och berätta för RouterModule hur man konfigurerar rutten genom att skicka rutterna till RouterModule.forRoot(routes)
• Ta bort ActivatedRoute från providers, om du inte tillhandahåller en anpassad implementation av ActivatedRoute.

@NgModule({
  declarations: [
    AppComponent,
    PropertyCardComponent,
    PropertyListComponent,
    NavBarComponent,
    AddPropertyComponent,
    PropertyDetailsComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    // Add RouterModule with routes list
    RouterModule.forRoot(routes),
    FormsModule
  ],
  //Remove this 
  // providers: [ActivatedRoute],
  bootstrap: [AppComponent]

}) export class AppModule{}

Dina routes kan deklareras på följande sätt:

export const routes: Routes = [{
 path: '', 
 component: AppComponent
}]

Och din AppComponent måste injicera ActivatedRoute som i följande exempel:

@Component({selector: 'app-root', template: ``}) 
export class AppComponent {
  constructor(private route: ActivatedRoute){}
}