Angular项目中ng-bootstrap进度条type属性失效问题求助

我的项目基于Angular框架，已安装ng-bootstrap组件库，且已在app.module.ts中导入对应模块，组件可正常运行，但ngb-progressbar的type属性无法生效，所有类型的进度条均显示为粉色。

home.component.html 代码 #

<div class="row">
   <div class="col">
      <ngb-progressbar type="success" height="15px" [value]="25">success</ngb-progressbar>
      <ngb-progressbar class="mt-4" type="info" height="15px" [value]="50">info</ngb-progressbar>
      <ngb-progressbar class="mt-4" type="warning" height="15px" [value]="75">warning</ngb-progressbar>
      <ngb-progressbar class="mt-4" type="danger" height="15px" [value]="100">danger</ngb-progressbar>
      <ngb-progressbar class="mt-4" type="primary" height="15px" [value]="75">primary</ngb-progressbar>
      <ngb-progressbar class="mt-4" type="secondary" height="15px" [value]="50">secondary</ngb-progressbar>
      <ngb-progressbar class="mt-4" type="dark" height="15px" [value]="25">dark</ngb-progressbar>
   </div>
</div>

实际显示效果 #

已尝试的方法 #

目前可以通过在style.scss中添加全局样式强制修改进度条颜色，但希望通过type属性原生实现对应颜色，且尝试注入NgbProgressbarConfig到home.component.ts也无效。
全局样式代码：

.progress-bar
{
    background-color: aqua !important;
}

解决方法 #

1. 确认Bootstrap CSS已正确引入
   ng-bootstrap依赖Bootstrap的样式文件，若未引入，进度条的type样式不会生效。

• 方式一：在angular.json的styles数组中添加：

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
  ]
  

• 方式二：在index.html中通过CDN引入：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  

注意：ng-bootstrap版本必须和Bootstrap版本匹配，比如ng-bootstrap 15.x对应Bootstrap 5.3.x，版本不匹配会导致样式异常。

2. 排查自定义样式覆盖问题
   检查项目中style.scss或组件样式文件是否存在.progress-bar相关的强制样式（比如带!important的规则），这类样式会覆盖Bootstrap的原生type样式，需移除或调整优先级。

3. 验证ng-bootstrap模块导入正确性
   确保app.module.ts中正确导入了NgbProgressbarModule：

import { NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    // ...其他模块
    NgbProgressbarModule
  ]
})
export class AppModule { }

4. 检查版本兼容性
   核对ng-bootstrap官方文档，确认当前Angular版本与ng-bootstrap版本兼容。例如Angular 16对应ng-bootstrap 15.x，Angular 15对应ng-bootstrap 14.x，版本不兼容会导致组件属性失效。

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