Angular升级后Ngb-bootstrap Alert关闭按钮样式异常求助

核心原因 #

你的依赖版本存在严重兼容性不匹配：

• Ngb-bootstrap v13.x 仅支持 Angular 17 和 Bootstrap 5.x，但你当前使用的是Angular 18.2.8和Bootstrap 4.5.3，版本完全不兼容，这是样式异常的根本原因。

修复方案 #

方案一：升级依赖到适配Angular 18的版本 #

这是推荐的长期解决方案：

1. 卸载现有不兼容的依赖：

npm uninstall @ng-bootstrap/ng-bootstrap bootstrap

2. 安装适配Angular 18的版本（Ngb-bootstrap v14+ 支持Angular 18，且依赖Bootstrap 5）：

npm install @ng-bootstrap/ng-bootstrap@^14.0.0 bootstrap@^5.3.0

3. 确保Bootstrap 5样式正确导入到项目中，修改angular.json的styles数组：

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

方案二：降级Angular到适配现有依赖的版本 #

如果暂时不想升级Bootstrap，可将Angular降级到17.x版本（适配Ngb-bootstrap v13）：

npm install @angular/core@^17.0.0 @angular/cli@^17.0.0

同时需要将Bootstrap升级到5.x版本，因为Ngb-bootstrap v13仅支持Bootstrap 5。

方案三：回退到Bootstrap 4兼容的Ngb-bootstrap版本 #

若要保留Bootstrap 4.5.3，需要将Ngb-bootstrap降级到v9.x（仅支持Angular 14-15），同时降级Angular到对应版本：

npm uninstall @ng-bootstrap/ng-bootstrap
npm install @ng-bootstrap/ng-bootstrap@^9.0.0
npm install @angular/core@^15.0.0 @angular/cli@^15.0.0

额外检查项 #

1. 确认全局样式中没有自定义CSS规则覆盖.close按钮的默认样式，避免使用::ng-deep随意修改ngb-alert组件的内部样式。
2. 简化组件代码排除语法干扰，可将[type]="'success'"简化为type="success"：

<ngb-alert type="success" (closed)="onAlertClosed()">
    Text of alert
</ngb-alert>

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