Angular 17独立组件集成Bootstrap 5 Toast报错求助

我在使用Angular 17独立组件的项目中，参考某GitHub仓库的实现集成Bootstrap 5 Toast。执行ng serve成功，但访问http://localhost:4200/时出现以下错误：

[vite] Internal server error: document is not defined
at enableDismissTrigger (D:\dev\git-2.0\base-templates\angular\angular-bootstrap-5-base\node_modules\bootstrap\dist\js\bootstrap.esm.js:802:19)
at eval (D:\dev\git-2.0\base-templates\angular\angular-bootstrap-5-base\node_modules\bootstrap\dist\js\bootstrap.esm.js:884:1)
at async instantiateModule (file:///D:/dev/git-2.0/base-templates/angular/angular-bootstrap-5-base/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:9) (x6)

我已提供复现问题的示例项目，完成的操作包括：

• 创建SCSS格式的Angular项目
• 执行npm i bootstrap和npm i @types/bootstrap --save-dev安装依赖
• 添加Toast、Toaster组件、服务及2个模型
• 主App组件添加触发Toast的按钮

预期能正常显示Bootstrap Toast效果，请问问题出在哪里？

问题原因 #

这个错误是因为Bootstrap 5的ESM模块在服务端渲染（SSR）/预渲染阶段被执行，Angular 17默认启用了SSR（或Vite构建时的预渲染逻辑），此时Node.js环境中不存在document对象，Bootstrap初始化时调用document相关API就会报错。

Bootstrap的enableDismissTrigger方法会直接访问document，代码在服务端执行时就会触发这个错误。

解决方案 #

方案1：延迟Bootstrap导入到浏览器环境 #

在使用Bootstrap Toast的服务或组件中，不要直接导入Bootstrap，而是借助Angular的平台判断，在浏览器环境下动态导入：

比如在Toast服务中修改：

import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class ToastService {
  private bootstrapModule: any;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  private async loadBootstrap() {
    if (isPlatformBrowser(this.platformId) && !this.bootstrapModule) {
      this.bootstrapModule = await import('bootstrap');
    }
  }

  async showToast(toastOptions: any) {
    await this.loadBootstrap();
    // 后续使用this.bootstrapModule.Toast进行实例化操作
  }
}

方案2：禁用Angular的SSR（若不需要SSR） #

修改angular.json，找到architect > build > configurations > production，将prerender和ssr设为false：

"production": {
  "prerender": false,
  "ssr": false
}

或者重新创建项目时添加--ssr=false参数，直接关闭SSR功能。

方案3：改用Bootstrap CDN引入JS（快速临时解决） #

在index.html中通过CDN引入Bootstrap的JS文件，替代npm本地导入：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

这样Bootstrap只会在浏览器环境加载，不会触发服务端的document不存在错误。

额外注意事项 #

• 操作DOM时尽量使用Angular的ViewChild/ViewContainerRef等API，避免直接操作document，符合Angular最佳实践。
• 使用独立组件时，确保组件的imports数组中正确引入所需模块（如CommonModule）。

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