Не удается разрешить все параметры компонента

Question

У меня есть следующий сервис:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PersonService {

  constructor(private httpService: HttpClient) { }

  getPeople() {
    // return this.httpService.get(url)
    return 'plzz work';
  }
}

И в своем компоненте я внедряю его в конструктор следующим образом:

import { Component, EventEmitter, Output } from '@angular/core';
import { PersonService } from 'src/app/person.service';

@Component({
  selector: 'app-searchbox',
  templateUrl: './searchbox.component.html',
  styleUrls: ['./searchbox.component.scss']
})
export class SearchboxComponent {
  constructor(personService: PersonService) {}

  searchValue: string = '';
  searchType: string = '';

  @Output() searchExecuted = new EventEmitter<SearchCriteria>();
  search() {
    this.searchExecuted.emit({
      searchValue: this.searchValue,
      searchType: this.searchType
    });
  }

}

Но по какой-то причине я получаю синтаксисошибка.Я следовал руководству Angular по сервисам и прочим вещам, поэтому не верю, что есть синтаксическая ошибка.

Вот ошибка, которую я получаю:

compiler.js:2175 Uncaught Error: Can't resolve all parameters for SearchboxComponent: (?).
    at syntaxError (compiler.js:2175)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:20399)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:20294)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:19923)
    at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:19786)
    at compiler.js:25829
    at Array.forEach (<anonymous>)
    at compiler.js:25828
    at Array.forEach (<anonymous>)

Здесь находится модуль, в котором я устанавливаю службу как личную службу:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { PersonService } from './person.service';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    CoreModule,
    BrowserAnimationsModule
  ],
  exports: [
    SharedModule,
    CoreModule
  ],
  providers: [PersonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

На самом деле вам нужно добавить HttpCilentModule к вашему app.module.ts

import { HttpClientModule } from '@angular/common/http';   
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; 
import { CoreModule } from './core/core.module';
import { PersonService } from './person.service'; 
import { SharedModule } from './shared/shared.module';

@NgModule({ 
    declarations: [ AppComponent ], 
    imports: [ BrowserModule, AppRoutingModule, SharedModule, CoreModule, HttpClientModule, BrowserAnimationsModule ],
    exports: [ SharedModule, CoreModule ],
    providers: [PersonService], 
    bootstrap: [AppComponent] }) 
export class AppModule { }

Answer 2

Я уже сталкивался с подобной проблемой, попробуйте добавить спецификатор доступа перед службой в конструкторе

constructor(private personService: PersonService) {}

Answer 3

Я заметил, что вы используете атрибут provideIn в декораторе @Injectable (), поэтому вы должны использовать версию 6 или выше.Если это так, вам не нужно добавлять службу в @ngModule, я считаю, что оба могут вызвать проблемы.Попробуйте удалить ссылку из @ngModule, а также сделать вашу ссылку на personService в searchboxComponent частной.