Issue
I am running Angular 17 projects with standalone components. I want to add a service where i will start and stop the ngx-ui-loader ( https://www.npmjs.com/package/ngx-ui-loader). I can't do normal module where i will provide in root ngxui loader like in older versions, so i am wondering if this can work in Angular17? When loader is directly called and imported in a standalone component it works.
Current implementation is not working..
Service code:
import { Injectable, inject } from '@angular/core';
import { NgxUiLoaderService } from 'ngx-ui-loader';
@Injectable({
providedIn: 'root',
})
export class LoaderService {
// ngxLoader = inject(NgxUiLoaderService);
ngxLoader = inject(NgxUiLoaderService);
startLoader() {
console.error('start');
console.error(this.ngxLoader);
this.ngxLoader.start();
}
stopLoader() {
this.ngxLoader.stop();
}
loaderConfig =
{
"bgsColor": "red",
"bgsOpacity": 0.5,
"bgsPosition": "bottom-right",
"bgsSize": 60,
"bgsType": "ball-spin-clockwise",
"blur": 5,
"delay": 0,
"fastFadeOut": true,
"fgsColor": "red",
"fgsPosition": "center-center",
"fgsSize": 60,
"fgsType": "ball-spin-clockwise",
"gap": 24,
"logoPosition": "center-center",
"logoSize": 120,
"logoUrl": "",
"masterLoaderId": "master",
"overlayBorderRadius": "0",
"overlayColor": "rgba(40, 40, 40, 0.8)",
"pbColor": "red",
"pbDirection": "ltr",
"pbThickness": 3,
"hasProgressBar": true,
"text": "",
"textColor": "#FFFFFF",
"textPosition": "center-center",
"maxTime": -1,
"minTime": 300
}
}
AppComponent.ts
`import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './components/navbar/navbar.component';
import { NgxUiLoaderModule, NgxUiLoaderService } from 'ngx-ui-loader';
import { LoginComponent } from './components/login/login.component';
import { UserService } from './services/user.service';
import { StorageService } from './services/storage.service';
import { finalize, first } from 'rxjs';
import { LoaderService } from './services/loader.service';
@Component({
selector: 'app-root',
standalone: true,
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
imports: [CommonModule, NavbarComponent, NgxUiLoaderModule, LoginComponent],
})
export class AppComponent {
title = 'CinAppClient';
userService = inject(UserService);
storageService = inject(StorageService);
ngxLoaderService = inject(NgxUiLoaderService);
loaderService = inject(LoaderService);
user$ = this.userService.user$;
constructor() {}
ngOnInit() {
this.loaderService.startLoader();
let storageUser = this.storageService.getUser();
if (storageUser !== null) {
this.userService.authToken = storageUser.token;
this.userService
.refreshToken()
.pipe(
first(),
finalize(() => this.loaderService.stopLoader())
)
.subscribe();
}
}
}
type here
appComponent.html
<ngx-ui-loader [bgsType]="'three-strings'" [fgsType]="'three-strings'">
</ngx-ui-loader>`
type here
Solution
You have to provide the NgxUiLoaderService
in your app root. In a standalone-based app, it should be done within the bootstrapApplication
function, located in the main.ts
file, as following:
bootstrapApplication(AppComponent, {
providers: [NgxUiLoaderService]
})
Answered By - Avraham Weinstein
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.