Angular 17中使用NG Block UI遇报错及配置疑问

Angular 17默认采用独立组件架构，不再生成传统的app.module.ts文件，因此无法按照旧文档的模块导入方式配置NG Block UI，以下是适配独立组件的使用步骤：

1. 确认依赖安装 #

确保已通过npm安装包：

npm i ng-block-ui

2. 全局配置（替代BlockUIModule.forRoot()） #

在main.ts中使用provideBlockUI完成全局配置，对应原模块的forRoot()逻辑：

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { provideBlockUI } from 'ng-block-ui';

bootstrapApplication(AppComponent, {
  providers: [
    ...appConfig.providers,
    provideBlockUI({
      // 可配置全局默认参数，比如加载提示文本
      message: '处理中，请稍候...'
    })
  ]
});

3. 组件内使用BlockUI #

方式一：组件级导入指令 #

如果仅在单个组件中使用<block-ui>指令，直接在组件的imports数组中导入BlockUIModule：

import { Component } from '@angular/core';
import { BlockUI, NgBlockUI } from 'ng-block-ui';
import { BlockUIModule } from 'ng-block-ui';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [BlockUIModule],
  template: `
    <block-ui>
      <button (click)="triggerLoading()">触发加载</button>
    </block-ui>
  `
})
export class DemoComponent {
  @BlockUI() blockUI!: NgBlockUI;

  triggerLoading() {
    this.blockUI.start();
    // 模拟异步操作
    setTimeout(() => {
      this.blockUI.stop();
    }, 2000);
  }
}

方式二：全局导入指令（多组件复用） #

如果多个组件都需要使用<block-ui>，可在app.config.ts中全局导入模块，避免重复导入：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideBlockUI } from 'ng-block-ui';
import { BlockUIModule } from 'ng-block-ui';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideBlockUI({ message: '加载中...' })
  ],
  imports: [BlockUIModule]
};

报错原因说明 #

你遇到的报错是因为旧文档针对Angular传统模块式架构设计，而Angular 17默认启用独立组件模式，不再生成app.module.ts，因此需要改用provideBlockUI做全局配置，通过独立组件的imports数组导入指令模块。

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