NullInjectorError:NgxSpinnerService上的StaticInjectorError;Nul

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，但它仍然显示托管错误。此处查看错误

Answer 1

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

Answer 2

检查您的当前版本，然后通过npm安装ngx微调器模块install ngx spinner@(版本与您当前的角度版本相似(您可以在ngx微调程序网站中检查两个版本的相似性

Answer 3

您必须在App.module 中导入NgxSpinnerService作为提供程序

import { NgxSpinnerModule, NgxSpinnerService } from "ngx-spinner";
providers:[
NgxSpinnerService
],
imports: [
NgxSpinnerModule
]