Ошибка: StaticInjectorError (DynamicTestModule) Angular 5 Карма Жасмин 2.8.0

Question

Мое приложение работает нормально, но пока я пытаюсь выполнить модульное тестирование, я получаю ниже упомянутую ошибку:

Ошибка: StaticInjectorError (DynamicTestModule) [AppComponent -> FinanceserviceService]: StaticInjectorError (Платформа: core) [AppComponent -> FinanceserviceService]: NullInjectorError: Нет поставщика для FinanceserviceService!

Мои коды указаны ниже:

financeservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';

@Injectable()
export class FinanceserviceService {

  constructor(private _http: HttpClient) { }
  finData() {
    return this._http.get("./assets/data.json")
      .map(result => result);
  }
}

test.spec.ts

import { TestBed, inject,async,ComponentFixture } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { FinanceserviceService } from './financeservice.service';
import { AppComponent } from './XXXX.component';
import { SliderModule  } from 'angular-image-slider';
import { CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA } from '@angular/core';
import 'rxjs/add/operator/map';


describe('FinanceserviceService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [FinanceserviceService],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
        NO_ERRORS_SCHEMA
      ]
    });
  });

  it(`should create`, async(inject([HttpTestingController, FinanceserviceService],
    (httpClient: HttpTestingController, financeservice: FinanceserviceService) => {
      expect(financeservice).toBeTruthy();
  })));

});

*. Component.ts

import { Component } from '@angular/core';
import { FinanceserviceService } from './financeservice.service';
import { Chart } from 'chart.js';


constructor(private _fin: FinanceserviceService){
  }

  ngOnInit() {

    this._fin.finData()
      .subscribe(res => {

        let Fmax = res['list'].map(res => res.main.temp_max);
        let Fmin = res['list'].map(res => res.main.temp_min);
        let alldates = res['list'].map(res => res.dt)

        let FDates = []
        alldates.forEach((res) => {
            let jsdate = new Date(res * 1000)
            FDates.push(jsdate.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }))
        })

        this.chart=new Chart('canvas',{
          type: 'line',
          data: {
            labels: FDates,
            datasets: [
              { 
                data: Fmax,
                borderColor: "#3cba9f",
                fill: false
              },
              { 
                data: Fmin,
                borderColor: "#ffcc00",
                fill: false
              },
            ]
          },
          options: {
            legend: {
              display: false
            },
            scales: {
              xAxes: [{
                display: true
              }],
              yAxes: [{
                display: true
              }],
            }
          }

        })

      })
  }

*. Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FinanceserviceService } from './financeservice.service';
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './XXX.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SliderModule } from 'angular-image-slider';
import { CommonModule } from '@angular/common';
import { NO_ERRORS_SCHEMA } from '@angular/core';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    SliderModule,
  ],
  schemas: [NO_ERRORS_SCHEMA],
  providers: [FinanceserviceService],
  bootstrap: [AppComponent]
})

export class AppModule { }

Пожалуйста, помогите