can't-configure-ngx-ui-loader in angular

I don't why the ngx-ui-loader is not working. I followed the installation guide on https://tdev.app/ngx-ui-loader

My appModule

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 { }


my appComponent.html

<ngx-ui-loader></ngx-ui-loader>
<router-outlet></router-outlet>


The component where I'm trying to use it

constructor(
private messageLogService: MessageLogService
private ngxService: NgxUiLoaderService
){}


searchMessageLog(filterMessageLog?: SearchFilterMessageLog, page?) {
debugger
this.ngxService.start();
this.messageLogService.getMessageLogDetails(filterMessageLog, page)
.subscribe(
(data: HttpResponse<any>) => {
this.messageLogs = this.getMessageLogConfiguredForTable(data.body['result'])
this.pagination = this.newPaginationService.configurePagination(data.body)
},
this.utilsService.showAlertRequestError
).add(()=>{
this.ngxService.stop()
})
}


I tried to do what is on the post below, no success although

Can't configure ngx-ui-loader from app.module.ts file

Any idea where I'm going wrong?

Continue reading...