angular - 尝试在 Firebase 中托管时出现 NullInjectorError : StaticInjectorError on NgxSpinnerService; NullInjectorError: No provider for t!

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 上成功托管时，它显示了这样的错误并且应用程序不起作用。
我尝试在 appmodule.ts 中的 providers 数组中导入 NgxSpinnerService 但它仍然显示托管错误。 view error here

Answer 1

我遇到了同样的问题。解决方案是使用相同版本的 ngx-spinner 和 angular，例如我将 angular 8.0.0 与 ngx-spinner 9.0.2 一起使用。因此，我不得不将 ngx-spinner 版本降级到 8.0.0 以匹配 angular 的版本。