NullInjectorError: StaticInjectorError on NgxSpinnerService; NullInjectorError: Нет поставщика для t! при попытке хостинга в firebase

Question

Я пытаюсь разместить свое приложение в firebase, все отлично работает в localhost, но когда я успешно размещаю приложение в firebase в домене firebase, он показывает:

NullInjectorError: StaticInjectorError(wo)[class{constructor(t,e) at SpinnerService at content is not loaded.

Я пытался вставьте ngxModule и ngxSpinnerService в массив провайдеров, но у меня все те же проблемы.

Мой код: app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule,FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {NgxPaginationModule} from 'ngx-pagination';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HttpClientModule } from '@angular/common/http';
import { AnimeComponent } from './anime/anime.component';
import { NgxSpinnerModule, NgxSpinnerService } from "ngx-spinner";
import { CharacterComponent } from './character/character.component';
import { NotfoundComponent } from './notfound/notfound.component';
import { AppFirebaseModule } from './app-firebase/app-firebase/app-firebase.module';
import { AnimeService } from './services/anime.service';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AnimeComponent,
CharacterComponent,
NotfoundComponent
],
imports: [
CommonModule,
NgxPaginationModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
BrowserModule,
HttpClientModule,
NgxSpinnerModule,
AppRoutingModule,
//i tried adding in imports array.
AppFirebaseModule,
],

 //i added NgxSpinnerService in providers array like here:
providers: [NgxSpinnerService,AnimeService],
bootstrap: [AppComponent]
})
export class AppModule { }        
//And  at other bunch of  component i have this:
I have this at animecomponent:
import { Component, OnInit } from '@angular/core';
import { ActivatedRouteSnapshot, ActivatedRoute } from '@angular/router';
import { AnimeService } from './../services/anime.service';
import { Animedetail } from './../model/animedetail';
import { Character } from './../model/character';
import { NgxSpinnerService } from "ngx-spinner";
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-anime',
templateUrl: './anime.component.html',
styleUrls: ['./anime.component.css']
})
export class AnimeComponent implements OnInit {
animeDetail:Animedetail;
page;
id:number;
genres:[];
studios:[];
adaptation:[];
sequel:[];
sideStory:[];
opening_themes:[]
ending_themes:[];
character:Character[];
showPagination:boolean = true;
 constructor(
 private activatedRoute:ActivatedRoute,
 private animeService:AnimeService,
 private spinner:NgxSpinnerService,
) { }

ngOnInit() {
this.spinner.show();
this.id = this.activatedRoute.snapshot.params.id;
this.animeService.getAnimeDetail(this.id).subscribe((data:Animedetail) =>{
this.animeDetail = data;
this.genres = data.genres;
this.studios = data.studios;
this.adaptation = data.related.Adaptation;
this.sequel = data.related['Sequel'];
this.sideStory = data.related['Side story'];
this.opening_themes = data.opening_themes;
this.ending_themes = data.ending_themes;
})

this.animeService.getCharacters(this.id).subscribe((data:Character)=>{
// console.log(data)
this.character = data.characters;
this.spinner.hide();
})

}

 }

Работает хорошо в localhost без каких-либо ошибок. Но когда я успешно размещаю на firebase, он показывает такую ​​ошибку, и приложение не работает.

Я попытался импортировать NgxSpinnerService в массиве провайдеров в appmodule.ts, но все равно он показывает ошибку в хостинге. ошибка просмотра здесь