title: can't-configure-ngx-ui-loader in angular
body: <p>I don't why the ngx-ui-loader is not working. I followed the installation guide on  <a href="https://tdev.app/ngx-ui-loader" rel="nofollow noreferrer">https://tdev.app/ngx-ui-loader</a></p>
  
  <p>My appModule</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule, LOCALE_ID } from '@angular/core';
  import { registerLocaleData } from '@angular/common';
  import localePt from '@angular/common/locales/pt';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  
  import { AppRoutingModule } from './app-routing.module';
  import { NgxUiLoaderModule,
    NgxUiLoaderConfig,
    NgxUiLoaderHttpModule,
    SPINNER,
    POSITION,
    PB_DIRECTION } from 'ngx-ui-loader';
  import { AppComponent } from './app.component';
  
  // modulos
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  // import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
  // import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  import { CookieService } from 'ngx-cookie-service';
  import { ToastrModule } from 'ngx-toastr';
  
  import { CoreModule } from './core/core.module';
  import { AngularMaterialModule } from './shared/angular-material.module';
  import { SharedModule } from './shared/shared.module';
  
  
  //components
  
  // serviços
  import { LoaderService } from './components/loader/loader.service';
  import { RequestInterceptor } from './core/auth/request.interceptor';
  
  
  ///em teste
  import { StoreModule } from '@ngrx/store';
  import { filterReducer, integrationsReducer } from './reducers';
  //import { reducers, metaReducers } from './reducers';
  import { StoreDevtoolsModule } from '@ngrx/store-devtools';
  import { environment } from '../environments/environment';
  import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
  import {TranslateHttpLoader} from '@ngx-translate/http-loader';
  
  import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
  import { filterLogReducer } from './reducers/filter-logs.reducer';
  import { instanceLoginReducer } from './reducers/instance-login.reducer';
  
  
  const ngxUiLoaderConfig: NgxUiLoaderConfig = {
    fgsColor: 'red',
    fgsPosition: POSITION.bottomCenter,
    fgsSize: 40,
    // fgsType: SPINNER.rectangleBounce, // background spinner type
    fgsType: SPINNER.chasingDots, // foreground spinner type
    pbDirection: PB_DIRECTION.leftToRight, // progress bar direction
    pbThickness: 5 // progress bar thickness
  };
  
  registerLocaleData(localePt, 'pt-BR');
  
  export function HttpLoaderFactory(httpClient: HttpClient) {
    return new TranslateHttpLoader(httpClient);
  }
  
  @NgModule({
    declarations: [ AppComponent ],
    imports: [
      CoreModule,
      BrowserModule,
      HttpClientModule,
      BrowserAnimationsModule,
      ToastrModule.forRoot(),
      AppRoutingModule,
      AngularMaterialModule,
      SharedModule,
      NgbModule,
      StoreModule.forRoot({
        filterLogs: filterLogReducer,
        filter: filterReducer,
        integrations: integrationsReducer,
        instanceLogin: instanceLoginReducer
      }),
      StoreDevtoolsModule.instrument({ maxAge: 5, logOnly: environment.production }),
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      }),
      NgxMaterialTimepickerModule.setLocale('pt-BR') ,
      NgxUiLoaderModule.forRoot(ngxUiLoaderConfig),
      NgxUiLoaderHttpModule
    ],
    exports: [
  
    ],
    providers: [
      CookieService,
      LoaderService,
      { provide: HTTP_INTERCEPTORS, useClass: RequestInterceptor, multi: true },
      //{ provide: MAT_DATE_LOCALE, useValue: 'pt-BR' },
      { provide: LOCALE_ID, useValue: 'pt-BR' },
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>my appComponent.html</p>
  
  <pre><code>&lt;ngx-ui-loader&gt;&lt;/ngx-ui-loader&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>The component where I'm trying to use it</p>
  
  <pre><code>constructor(
          private messageLogService: MessageLogService
          private ngxService: NgxUiLoaderService
      ){}
  
  
  searchMessageLog(filterMessageLog?: SearchFilterMessageLog, page?) {
          debugger
          this.ngxService.start();
          this.messageLogService.getMessageLogDetails(filterMessageLog, page)
              .subscribe(
                  (data: HttpResponse&lt;any&gt;) =&gt; {
                      this.messageLogs = this.getMessageLogConfiguredForTable(data.body['result'])
                      this.pagination = this.newPaginationService.configurePagination(data.body)
                  },
                  this.utilsService.showAlertRequestError
              ).add(()=&gt;{
                  this.ngxService.stop()
              })
      }
  </code></pre>
  
  <p>I tried to do what is on the post below, no success although</p>
  
  <p><a href="https://stackoverflow.com/questions/54920614/cant-configure-ngx-ui-loader-from-app-module-ts-file?answertab=active#tab-top">Can&#39;t configure ngx-ui-loader from app.module.ts file</a></p>
  
  <p>Any idea where I'm going wrong?</p>