Angular 13组件中Bootstrap已验证安装却无法加载问题

以下是针对性的排查和解决步骤：

• 重启Angular开发服务器
  修改angular.json后，必须重启你的dev server才能让新的样式配置生效。停止当前运行的ng serve命令，重新执行一次。

• 检查组件样式隔离问题
  Angular组件默认启用ViewEncapsulation，会隔离组件内样式，可能导致Bootstrap全局样式无法渗透进来。可以在组件类中关闭样式隔离：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.css'],
    encapsulation: ViewEncapsulation.None
  })
  export class YourComponentComponent { }
  

  或者在组件样式中用::ng-deep穿透隔离，针对需要应用Bootstrap样式的元素：

  ::ng-deep .your-target-bootstrap-class {
    /* 确保Bootstrap样式在此组件内生效 */
  }
  

• 调整样式导入顺序
  若src/styles.css中的自定义样式覆盖了Bootstrap样式，可调整angular.json里的样式顺序，把Bootstrap放在后面：

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

• 在全局样式文件中直接导入Bootstrap
  打开src/styles.css，添加导入语句：

  @import "~bootstrap/dist/css/bootstrap.min.css";
  

  这种方式可规避angular.json路径解析的潜在问题，确保全局加载Bootstrap样式。

• 重新安装依赖保证完整性
  若依赖安装存在损坏，执行以下步骤：

  1. 删除项目根目录下的node_modules文件夹和package-lock.json文件
  2. 执行npm install重新安装所有依赖
  3. 再次安装Bootstrap 3：npm install bootstrap@3 --save

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