Angular 17独立组件项目集成ngx-ui-loader启停服务问题

问题场景 #

我在运行一个采用独立组件的Angular 17项目，想要添加一个服务来启停ngx-ui-loader。由于Angular 17没有根模块，没法像旧版本那样全局提供ngx-ui-loader，不确定这个功能是否能实现。目前直接在独立组件里导入调用loader是可行的，但自己写的LoaderService无法正常工作，相关代码如下：

服务代码 #

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();
    }
  }
}

appComponent.html代码 #

<ngx-ui-loader [bgsType]="'three-strings'" [fgsType]="'three-strings'">
</ngx-ui-loader>

问题分析与修复步骤 #

1. 确保NgxUiLoaderModule的全局可访问性
   在独立组件架构下，无需根模块，只要在根组件（AppComponent）的imports数组中导入NgxUiLoaderModule即可（你已完成这一步），如果需要全局默认配置，也可以在main.ts的bootstrapApplication中通过providers或imports传入。

2. 应用LoaderService中的配置
   你在服务中定义了loaderConfig但未生效，需要在服务初始化时通过NgxUiLoaderService的configure方法应用配置，或者在根组件模板中绑定配置项。

3. 优化服务注入方式
   改用构造函数注入NgxUiLoaderService，比inject()更直观且不易出错，同时在构造函数中完成配置初始化。

4. 调整loader显示时长（可选）
   如果接口请求完成过快，可能导致loader一闪而过，可将minTime调至500ms左右，确保能看到加载效果。

修正后的LoaderService示例 #

import { Injectable } from '@angular/core';
import { NgxUiLoaderService } from 'ngx-ui-loader';

@Injectable({
  providedIn: 'root',
})
export class LoaderService {
  constructor(private ngxLoader: NgxUiLoaderService) {
    // 初始化时应用全局配置
    this.ngxLoader.configure(this.loaderConfig);
  }

  startLoader() {
    this.ngxLoader.start();
  }

  stopLoader() {
    this.ngxLoader.stop();
  }

  private 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": 500 // 确保loader至少显示500ms，方便测试
  }
}

修正后的AppComponent优化 #

• 移除直接注入的NgxUiLoaderService，完全通过LoaderService封装控制逻辑
• 若不在服务中配置，也可在模板中绑定配置项（二选一即可）：

<ngx-ui-loader 
  [bgsType]="'three-strings'" 
  [fgsType]="'three-strings'"
  [bgsColor]="loaderService.loaderConfig.bgsColor"
  [overlayColor]="loaderService.loaderConfig.overlayColor"
>
</ngx-ui-loader>

内容的提问来源于stack exchange，提问作者etaskin