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?