Angular组件中添加Bootstrap Toast报错：Cannot find name 'bootstrap'

出现这个错误的核心原因是TypeScript无法识别全局的bootstrap对象，要么是Bootstrap的JavaScript文件未正确引入，要么是缺少对应的类型声明。以下是分步解决方法：

1. 确认Bootstrap JS已正确引入 #

Bootstrap Toast依赖Popper.js，推荐直接引入包含Popper的Bootstrap bundle文件：

• 如果你通过npm安装了Bootstrap，打开angular.json，在build -> options -> scripts数组中添加：

  "scripts": [
    "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
  ]
  

• 修改后重启Angular开发服务器，确保资源加载生效。

2. 添加Bootstrap的TypeScript类型声明 #

TypeScript需要类型定义才能识别bootstrap对象：

• 安装类型包：

  npm install @types/bootstrap --save-dev
  

• 若安装后仍报错，可在组件的TypeScript文件顶部手动添加类型引用：

  /// <reference types="@types/bootstrap" />
  

3. 优化组件代码（符合Angular规范） #

避免直接用document.getElementById操作DOM，改用Angular的ViewChild获取元素，并直接导入Toast类型：

组件HTML（沿用Bootstrap官方结构） #

<div #liveToast class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">提示</strong>
    <small>刚刚</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
  </div>
  <div class="toast-body">
    这是一条Bootstrap Toast消息！
  </div>
</div>

组件TypeScript代码 #

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { Toast } from 'bootstrap';

@Component({
  selector: 'app-toast-demo',
  templateUrl: './toast-demo.component.html',
  styleUrls: ['./toast-demo.component.css']
})
export class ToastDemoComponent implements OnInit {
  @ViewChild('liveToast') liveToast!: ElementRef;
  private toastInstance?: Toast;

  ngOnInit(): void {
    this.toastInstance = new Toast(this.liveToast.nativeElement);
    this.toastInstance.show();
  }
}

额外注意事项 #

• 确保bootstrap和@types/bootstrap的版本匹配，避免因版本不一致导致的类型错误；
• 不要同时引入单独的popper.js和bootstrap.js，否则可能出现依赖冲突。

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