我的 Angular 应用程序在 app.component.ts 文件中出现错误

Question

I have finished my Angular app which is connected to my API, but there is one problem I can't seem solve, HttpClient won't import because it has 'no exported' member. I have tried various things and I tried to export the httpclient in the http file.

Here is my app.component.ts file

import { HttpClient } from './services/http.service';
import { Snake } from './_interfaces/snake.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public snake: Snake[];

  constructor(private http: HttpClient){}

  public getSnake = () => { 
    let route: string = 'http://localhost:5000/api/snake';
    this.http.getData(route) 
   .subscribe((result) => {
      this.snake = result as Snake[];
    },
    (error) => {
      console.error(error);
    });
  }
 }

Here is my App Module file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http'; 
import  {httpService} from './http.service'

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  providers: [httpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is my http service file

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';


@Injectable()
export class httpService
 {

  constructor(private http: HttpClient) { 

  }

  public getRoute():Observable<any>{
    return this.http.get('url');
  }

 }

I'm not too sure about the syntax or how to make sure that the app component file can import http, this is my first Angular app.

Answer 1

Please update update your service to look something like this.

import { HttpClient } from "@angular/common/http";

    @Injectable()
    export class httpService
     {

      constructor(private http: HttpClient) { 

      }

      public getRoute():Observable<any>{
        return this.http.get('url');
      }

     }

Then import your service in your app module and include in your providers after that try accessing in component file