title: Exception when trying to implement Spinner
body: <p>I'm following the instructions at <a href="https://www.npmjs.com/package/ngx-spinner" rel="nofollow noreferrer">https://www.npmjs.com/package/ngx-spinner</a> to implement a spinner within my application but obviously I am doing something wrong.</p>
  
  <p>Here is my typescript module. Everything is working properly, however I'm not seeing any spinner even though I am showing it in ngOnInit and hiding it in the callback for getFacilities. (I know these methods are executing because I am getting the data displayed to the page.)</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { NgxSpinnerService } from "ngx-spinner";
  import { Portfolio} from '../models/Portfolio';
  import { Facility } from '../models/Facility';
  import 'rxjs/add/operator/map';
  
  
  @Component({
      selector: 'app-member-component',
      templateUrl: './member.component.html'
  })
  export class MemberComponent {
  
      constructor(private http: HttpClient, private spinner: NgxSpinnerService ) { }
  
      public SelectedPortfolio: Portfolio = new Portfolio;
      public Portfolios: Portfolio[] = [] ;
  
      public SelectedFacility: Facility = new Facility;
      public Facilities: Facility[] = [];
  
      public UILock: boolean;
  
      ngOnInit() {
  
          // call the method on initial load of page to bind dropdown   
  
          this.spinner.show();
          this.UILock = true;
  
          this.SelectedPortfolio.name = "Select Portfolio";
          this.SelectedPortfolio.id = 0;
  
          this.SelectedFacility.name = "&lt;No Portfolio Selected&gt;";
          this.SelectedFacility.id = 0;
  
          this.getPortfolios();
      }
  
      public selectPortfolio(portfolio: Portfolio) {
  
          this.SelectedPortfolio = portfolio;
  
          this.getFacilities();
      }
  
      public selectFacility(facility: Facility) {
  
          this.SelectedFacility = facility;
      }
  
      private getPortfolios() {
  
          this.UILock = true;
  
          this.http.get&lt;Portfolio[]&gt;('https://localhost:44319/api/portfolio').subscribe((portfolios: Portfolio[]): void =&gt;
            {
              this.Portfolios = portfolios;
              this.selectPortfolio(portfolios[0]);
            }
          );
      }
  
      private getFacilities() {
  
          this.http.get&lt;Portfolio[]&gt;('https://localhost:44319/api/portfolio/' + this.SelectedPortfolio.id).subscribe((facilities: Facility[]): void =&gt;
              {
                this.Facilities = facilities;
                this.selectFacility(facilities[0]);
                this.UILock = false;
                this.spinner.hide();
              }
          );
      }
  }
  </code></pre>
  
  <p>As soon as I add the following to my html template, all hell breaks loose.</p>
  
  <pre><code>&lt;ngx-spinner bdColor="rgba(51,51,51,0.8)"
               size="medium"
               color="#fff"
               type="ball-scale-multiple"&gt;
    &lt;p style="font-size: 20px; color: white"&gt;Loading...&lt;/p&gt;
  &lt;/ngx-spinner&gt;
  </code></pre>
  
  <p>The page does not load and I see the following exceptions:</p>
  
  <pre><code>ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[NgxSpinnerComponent -&gt; ChangeDetectorRef]: 
    StaticInjectorError(Platform: core)[NgxSpinnerComponent -&gt; ChangeDetectorRef]: 
      NullInjectorError: No provider for ChangeDetectorRef!
  NullInjectorError: StaticInjectorError(AppModule)[NgxSpinnerComponent -&gt; ChangeDetectorRef]: 
    StaticInjectorError(Platform: core)[NgxSpinnerComponent -&gt; ChangeDetectorRef]: 
      NullInjectorError: No provider for ChangeDetectorRef!
      at NullInjector.get (core.js:1354)
      at resolveToken (core.js:1681)
      at tryResolveToken (core.js:1607)
      at StaticInjector.get (core.js:1470)
      at resolveToken (core.js:1681)
      at tryResolveToken (core.js:1607)
      at StaticInjector.get (core.js:1470)
      at resolveNgModuleDep (core.js:23104)
      at NgModuleRef_.get (core.js:24192)
      at resolveDep (core.js:24722)
      at resolvePromise (zone-evergreen.js:797)
      at resolvePromise (zone-evergreen.js:754)
      at zone-evergreen.js:858
      at ZoneDelegate.invokeTask (zone-evergreen.js:391)
      at Object.onInvokeTask (core.js:30873)
      at ZoneDelegate.invokeTask (zone-evergreen.js:390)
      at Zone.runTask (zone-evergreen.js:168)
      at drainMicroTaskQueue (zone-evergreen.js:559)
  </code></pre>
  
  <p>Here is my app.module.ts:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { RouterModule } from '@angular/router';
  import { NgxSpinnerModule } from "ngx-spinner";
  
  import { AppComponent } from './app.component';
  import { NavMenuComponent } from './nav-menu/nav-menu.component';
  import { HomeComponent } from './home/home.component';
  import { ApiAuthorizationModule } from 'src/api-authorization/api-authorization.module';
  import { AuthorizeGuard } from 'src/api-authorization/authorize.guard';
  import { AuthorizeInterceptor } from 'src/api-authorization/authorize.interceptor';
  import { MemberComponent } from './member/member.component';
  
  @NgModule({
      declarations: [
          AppComponent,
          NavMenuComponent,
          HomeComponent,
          MemberComponent,
      ],
      imports: [
          BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
          HttpClientModule,
          FormsModule,
          ApiAuthorizationModule,
          NgxSpinnerModule,
          RouterModule.forRoot([
              { path: '', component: HomeComponent, pathMatch: 'full' },
              { path: 'member', component: MemberComponent, canActivate: [AuthorizeGuard] },
          ])
      ],
      providers: [
          { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Thank you for your advice!</p>
  
  <p>Perhaps my package.json is relevant?</p>
  
  <pre><code>{
    "name": "cashflow",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "build:ssr": "ng run Cashflow:server:dev",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "8.0.0",
      "@angular/common": "8.0.0",
      "@angular/compiler": "8.0.0",
      "@angular/core": "8.0.0",
      "@angular/forms": "8.0.0",
      "@angular/platform-browser": "8.0.0",
      "@angular/platform-browser-dynamic": "8.0.0",
      "@angular/platform-server": "8.0.0",
      "@angular/router": "8.0.0",
      "@nguniversal/module-map-ngfactory-loader": "8.0.0-rc.1",
      "aspnet-prerendering": "^3.0.1",
      "bootstrap": "^4.3.1",
      "core-js": "^2.6.5",
      "jquery": "3.4.1",
      "oidc-client": "^1.9.0",
      "popper.js": "^1.14.3",
      "rxjs": "^6.4.0",
      "zone.js": "~0.9.1"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "^0.800.6",
      "@angular/cli": "8.0.6",
      "@angular/compiler-cli": "8.0.0",
      "@angular/language-service": "8.0.0",
      "@types/jasmine": "~3.3.9",
      "@types/jasminewd2": "~2.0.6",
      "@types/node": "~11.10.5",
      "codelyzer": "^5.0.1",
      "jasmine-core": "~3.3.0",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "^4.0.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.5",
      "karma-jasmine": "~2.0.1",
      "karma-jasmine-html-reporter": "^1.4.0",
      "typescript": "3.4.5"
    },
    "optionalDependencies": {
      "node-sass": "^4.9.3",
      "protractor": "~5.4.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1"
    }
  }
  </code></pre>