Problem at angular5 with Httpclient

Question

I’m trying to do a requisicao with angular5 for learning purposes and I’m not with you, follow the console log and source code.

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[InvestimentosService]: 
  StaticInjectorError[InvestimentosService]: 
    NullInjectorError: No provider for InvestimentosService!
Error: StaticInjectorError[InvestimentosService]: 
  StaticInjectorError[InvestimentosService]: 
    NullInjectorError: No provider for InvestimentosService!
    at _NullInjector.get (core.js:923)
    at resolveToken (core.js:1211)
    at tryResolveToken (core.js:1153)
    at StaticInjector.get (core.js:1024)
    at resolveToken (core.js:1211)
    at tryResolveToken (core.js:1153)
    at StaticInjector.get (core.js:1024)
    at resolveNgModuleDep (core.js:10585)
    at NgModuleRef_.get (core.js:11806)
    at resolveNgModuleDep (core.js:10585)
    at _NullInjector.get (core.js:923)
    at resolveToken (core.js:1211)
    at tryResolveToken (core.js:1153)
    at StaticInjector.get (core.js:1024)
    at resolveToken (core.js:1211)
    at tryResolveToken (core.js:1153)
    at StaticInjector.get (core.js:1024)
    at resolveNgModuleDep (core.js:10585)
    at NgModuleRef_.get (core.js:11806)
    at resolveNgModuleDep (core.js:10585)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4620)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at ZoneTask.invokeTask [as invoke] (zone.js:503)
    at invokeTask (zone.js:1540)

Follows codes

investments.componentts.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
import { InvestimentosService } from './investimentos.services'
import { Investimentos } from './investimentos.model'
// import 'rxjs/add/observable/from'
// import { Observable } from "rxjs/Observable";


@Component({
  selector: 'app-investimentos',
  templateUrl: './investimentos.component.html',
  styleUrls: ['./investimentos.component.css']
})
export class InvestimentosComponent implements OnInit {

  Form: FormGroup
  namberPattern = /^[+-]?([0-9]*[.])?[0-9]+$/
  porcentagemDoSeuSELICAno: number
  porcentagemDoSeuSELICMes: number
  // valordoJurosSelic:number
  arSelics: any[] = []
  arCdis: any[] = []
  arPoupancas: any[] = []
  taxas: Investimentos

  constructor(private fb: FormBuilder, private investimentosService: InvestimentosService) { }


  ngOnInit() {
    this.investimentosService.taxas()
    .subscribe(taxas => this.taxas = taxas)
  }
}

investments.modelts.

export interface Investimentos {
    selic: string
    cdi: string
}

investments.services.ts

import { Injectable } from '@angular/core'
import { HttpClient,HttpParams } from '@angular/common/http'
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch'
import { Investimentos } from "./investimentos.model"


@Injectable()
export class InvestimentosService {
    constructor(private http: HttpClient) { }

    taxas(): Observable<Investimentos> {

        return this.http.get<Investimentos>('http://localhost:8080/aeua/cora/particular/all/backend/index.php')
    }
}

Answer 1

You need to register the class module InvestimentosService as a Provider.

Explaining:

All classes using the decorator @Injectable() need to be registered in the angular providers list so that it can do the dependency injection. To do this, go into the file *.module.ts (the same file that is importing your Component) and include your service on the providers side, e.g..:

@NgModule({
  declarations: [
     InvestimentosComponent
  ],

  providers: [
   InvestimentosService // <-- referência do seu service
  ]
})