Javascript 以Angular 实现ngCircleProgress时出错：模块没有导出的成员

我正在try 按照文档https://www.npmjs.com/package/ng-circle-progress来实现ng-circle-progress.

和.ts文件:

import { Component } from '@angular/core';
import { NgCircleProgressModule } from 'ng-circle-progress';

@Component({
  selector: 'app-side-navbar-card',
  standalone: true,
  imports: [
    NgCircleProgressModule.forRoot({
      radius: 60,
      space: -10,
      outerStrokeGradient: true,
      outerStrokeWidth: 10,
      outerStrokeColor: '#4882c2',
      outerStrokeGradientStopColor: '#53a9ff',
      innerStrokeColor: '#e7e8ea',
      innerStrokeWidth: 10,
      title: 'UI',
      animateTitle: false,
      animationDuration: 1000,
      showUnits: false,
      showBackground: false,
      clockwise: false,
      startFromZero: false,
      lazy: true,
    }),
  ],
  templateUrl: './side-navbar-card.component.html',
  styleUrl: './side-navbar-card.component.css',
})

导出类SideNavbarCardComponent{}

而这import人

NgCircleProgressModule.forRoot({
      radius: 60,
      space: -10,
      outerStrokeGradient: true,
      outerStrokeWidth: 10,
      outerStrokeColor: '#4882c2',
      outerStrokeGradientStopColor: '#53a9ff',
      innerStrokeColor: '#e7e8ea',
      innerStrokeWidth: 10,
      title: 'UI',
      animateTitle: false,
      animationDuration: 1000,
      showUnits: false,
      showBackground: false,
      clockwise: false,
      startFromZero: false,
      lazy: true,
    }

导致错误的原因:

Component imports contains a ModuleWithProviders value, likely the result of a 'Module.forRoot()'-style call. These calls are not used to configure components and are not valid in standalone component imports - consider importing them in the application bootstrap instead.

所以我从工作中的StackBlitz复制并粘贴了 https://stackblitz.com/edit/stackblitz-starters-rkwa4c?file=src%2Fmain.ts个 :

import { Component, ViewChild, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import {
  CircleProgressComponent,
  CircleProgressOptions,
  NgCircleProgressModule,
} from 'ng-circle-progress';

@Component({
  selector: 'app-side-navbar-card',
  standalone: true,
  imports: [CommonModule, NgCircleProgressModule],
  providers: [
    (
      NgCircleProgressModule.forRoot(
        {},
      ) as ModuleWithProviders<NgCircleProgressModule>
    ).providers!,
  ],
  template: `
    <circle-progress
      name="A"
      [options]="optionsA"
      [renderOnClick]="false"
      class="copy"
      (click)="copyOptions($event, optionsA)"
    ></circle-progress>
  `,
})
export class App {
  name = 'Angular';
  options = new CircleProgressOptions();
  /*
  ngCircleOptions = {
    percent: 85,
    radius: 60,
    showBackground: false,
    outerStrokeWidth: 10,
    innerStrokeWidth: 5,
    startFromZero: false,
    outerStrokeColor: null,
    showSubtitle: false,
    subtitleFormat: (percent: number): string => {
      if (percent < 25) {
        this.ngCircleOptions.outerStrokeColor = 'red';
      } else if (percent < 50) {
        this.ngCircleOptions.outerStrokeColor = 'yellow';
      } else if (percent < 75) {
        this.ngCircleOptions.outerStrokeColor = 'blue';
      } else {
        this.ngCircleOptions.outerStrokeColor = 'green';
      }
      return '';
    },
  };*/

  optionsA: CircleProgressOptions = {
    ...this.options,
    percent: 85,
    radius: 110,
    showBackground: false,
    outerStrokeWidth: 10,
    innerStrokeWidth: 5,
    subtitleFormat: false, // clear subtitleFormat coming from other options, because Angular does not assign if variable is undefined.
    startFromZero: false,
  };

  @ViewChild('circleProgress') circleProgress!: CircleProgressComponent;

  copyOptions = (event: any, options: any) => {
    this.options = Object.assign(
      {},
      this.circleProgress.defaultOptions,
      options,
    );
  };
}

bootstrapApplication(App);

但我得到了一个错误:

Module '"../side-navbar-card/side-navbar-card.component"' has no exported member 'SideNavbarCardComponent'. even though i have `export` keyword next to classes.