NullInjectorError: StaticInjectorError on NgxSpinnerService; NullInjectorError: No provider for t! while trying hosting in firebase

Question

I am trying to host my app in firebase everything works fine in localhost but when I successfully host app in firebase at firebase domain, it shows:

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

I tried to insert providing ngxModule and ngxSpinnerService in providers array but still I have same problems.

My code: 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();
})
                      
}
                    
 }

It works fine in localhost with no any error. But when I successfully host at firebase, it shows such error and app doesn't work.

I tried importing NgxSpinnerService in providers array in appmodule.ts but still it shows error in hosting. view error here

Must read - https://github.com/angular/angular-cli/issues/4752 — Prashant Pimpale, May 02 '20 at 06:07
Plus this:https://github.com/angular/angularfire/issues/1942 — Prashant Pimpale, May 02 '20 at 06:08

score 6 · Answer 1 · answered May 15 '20 at 09:29

6

I faced the same issue. The solution is to use the same versions of ngx-spinner and angular, e.g. I used angular 8.0.0 together with ngx-spinner 9.0.2. Consequently, I had to downgrade the ngx-spinner version to 8.0.0 to match the version of angular.

answered May 15 '20 at 09:29

Szymon

81
7

you would have provided the install command for ngx-version based on the versions of angular – Blaze Nov 12 '20 at 13:06
You can simply change its version in the package.json and then run npm install – Szymon Nov 13 '20 at 14:11

score -1 · Answer 2 · answered Oct 07 '20 at 14:24

-1

Check your current version and then install ngx spinner module by npm install ngx-spinner@(version similar to your current angular version) you can check the similarity of 2 versions in ngx spinner web site

answered Oct 07 '20 at 14:24

Gopu ck

1
1

score -1 · Answer 3 · answered Oct 29 '20 at 20:58

-1

You Have to import NgxSpinnerService as provider in your App.module

import { NgxSpinnerModule, NgxSpinnerService } from "ngx-spinner";

       providers:[
        NgxSpinnerService
      ],
        imports: [
         NgxSpinnerModule
       ]

answered Oct 29 '20 at 20:58

Jorge Mejia

1,073
8
27

NullInjectorError: StaticInjectorError on NgxSpinnerService; NullInjectorError: No provider for t! while trying hosting in firebase

3 Answers3