如何在Angular 16中使ng-circle-progress组件正常工作？

问题描述 #

在Angular 16中使用ng-circle-progress组件时，按照官方文档配置独立组件的imports数组时触发以下类型错误：

Type 'ModuleWithProviders' is not assignable to type 'readonly any[] | Type'.(2322)

相关配置代码 #

组件模板代码：

<circle-progress name="A" [options]="optionsA" [renderOnClick]="false" class="copy"
  (click)="copyOptions($event, optionsA)"></circle-progress>

组件内部选项定义：

optionsA = {
  percent: 85,
  radius: 60,
  showBackground: false,
  outerStrokeWidth: 10,
  innerStrokeWidth: 5,
  subtitleFormat: false, // 清除来自全局配置的subtitleFormat，Angular不会自动覆盖undefined变量
  startFromZero: false,
};

引发错误的模块导入配置：

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [
    CommonModule,
    NgCircleProgressModule.forRoot({
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: '#78C000',
      innerStrokeColor: '#C7E596',
      animationDuration: 300,
    }),
  ],
  // 其他组件配置
})

解决方案 #

Angular 14+的独立组件体系不再支持将ModuleWithProviders（即forRoot()的返回值）直接放入imports数组，需拆分模块导入与全局配置：

1. 修改imports数组，仅导入模块类：

imports: [
  CommonModule,
  NgCircleProgressModule
],

2. 在组件的providers数组中，通过NG_CIRCLE_PROGRESS_CONFIG令牌注入全局默认配置：

import { NG_CIRCLE_PROGRESS_CONFIG } from 'ng-circle-progress';

// ...

@Component({
  // 其他组件配置
  providers: [
    {
      provide: NG_CIRCLE_PROGRESS_CONFIG,
      useValue: {
        radius: 100,
        outerStrokeWidth: 16,
        innerStrokeWidth: 8,
        outerStrokeColor: '#78C000',
        innerStrokeColor: '#C7E596',
        animationDuration: 300,
      }
    }
  ]
})

此方式既解决了类型不匹配问题，也能正确生效全局默认配置。

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