Getting error while while implementing the ngx-spinner using Angular8

Question

I am getting the following error while implementing the ngx-spinner in my application.

Error::

ERROR NullInjectorError: StaticInjectorError(AppModule)[NgxSpinnerComponent -> NgxSpinnerService]: 
  StaticInjectorError(Platform: core)[NgxSpinnerComponent -> NgxSpinnerService]: 
    NullInjectorError: No provider for NgxSpinnerService!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:4200/main.43124f86d80c92a84b74.js:15749:25)

I am explaining my code below.

report.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ReportsRoutingModule } from './reports-routing.module';
import { ReportsComponent } from './reports.component';
import { HeaderComponent } from './header/header.component';
import { SidenavComponent } from './sidenav/sidenav.component';
import { HomeComponent } from './home/home.component';

import { MatSidenavModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatBadgeModule } from '@angular/material/badge';
import { MatDialogModule } from '@angular/material/dialog';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatMenuModule } from '@angular/material/menu';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTableModule } from '@angular/material/table';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatPaginatorModule } from '@angular/material/paginator';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { OrdersComponent } from './orders/orders.component';
import { PivotOrdersComponent } from './pivot-orders/pivot-orders.component';
import {MatExpansionModule} from '@angular/material'
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { FilterPipe } from './filter.pipe';
import {MatSortModule} from '@angular/material/sort';
//import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
import { NgxSpinnerModule } from "ngx-spinner";

@NgModule({
  declarations: [ReportsComponent, HeaderComponent, SidenavComponent, HomeComponent, OrdersComponent, PivotOrdersComponent,FilterPipe],
  imports: [
    CommonModule,
    ReportsRoutingModule,
    MatSidenavModule,
    MatInputModule,
    MatExpansionModule,
    MatToolbarModule,
    MatMenuModule,
    MatIconModule,
    MatCheckboxModule,
    MatTabsModule,
    MatTableModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatSnackBarModule,
    MatListModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatFormFieldModule,
    MatGridListModule,
    MatSelectModule,
    MatDialogModule,
    MatBadgeModule,
    MatCardModule,
    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatButtonModule,
    MatCardModule,
    MatGridListModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatIconModule,
    MatDialogModule,
    MatButtonModule,
    MatPaginatorModule,
    NgxMatSelectSearchModule,
    MatSortModule,
    NgxSpinnerModule
   // NgxDaterangepickerMd.forRoot()
  ]
})
export class ReportsModule { }

Inside app I have one report module so I am implementing here. I am explaining my componet below.

report/home/home.componet.html:

<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="default" type="ball-spin-clockwise">  
                        <p style="color: white">Please Wait. </p>  
</ngx-spinner>

report/home/home.component.ts:

import { NgxSpinnerService } from "ngx-spinner";

So here Inside home component I am using this module but its throwing this error in my production build. Can anybody please help me to resolve this error ?

Answer 1

downgrade the ngx-spinner version to 8.0.0 to match the version of angular.