Angular 18 SSR集成Flowbite时出现Document未定义错误

• 先给你的FlowbiteService加环境判断，只在浏览器端初始化Flowbite：
  注入PLATFORM_ID，用isPlatformBrowser区分环境，只有浏览器里才执行Flowbite的初始化逻辑，代码示例：

  import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
  import { isPlatformBrowser } from '@angular/common';
  
  @Injectable({ providedIn: 'root' })
  export class FlowbiteService {
    constructor(@Inject(PLATFORM_ID) private platformId: Object) {
      if (isPlatformBrowser(this.platformId)) {
        // 动态导入Flowbite并初始化，避免SSR时加载
        import('flowbite').then((flowbite) => {
          flowbite.initFlowbite();
        });
      }
    }
  }
  

• 组件里用Flowbite交互逻辑时，同样加浏览器环境判断：
  比如在ngAfterViewInit钩子中，只在浏览器端初始化具体的Flowbite组件（下拉、模态框这类）：

  import { Component, Inject, PLATFORM_ID } from '@angular/core';
  import { isPlatformBrowser } from '@angular/common';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html'
  })
  export class YourComponent {
    constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
    ngAfterViewInit(): void {
      if (isPlatformBrowser(this.platformId)) {
        // 举个例子，初始化下拉组件
        const dropdownBtn = document.getElementById('dropdown-btn');
        if (dropdownBtn) {
          import('flowbite').then(({ Dropdown }) => {
            new Dropdown(dropdownBtn);
          });
        }
      }
    }
  }
  

• 检查angular.json配置，别把Flowbite脚本全局引入到SSR构建里：
  不要在architect.build.options.scripts里加Flowbite的脚本，全部用动态导入的方式在浏览器端加载，防止SSR阶段执行DOM相关代码。

• 要是用的是Flowbite官方的Angular组件库，先确认版本适配Angular 18，并且严格按照要求在浏览器环境下注册组件。

核心就是把所有涉及Flowbite DOM操作的代码，都包裹在浏览器环境判断里，让SSR阶段完全不碰这些逻辑，自然就不会出现document不存在的错误。

内容的提问来源于stack exchange，提问作者Rémi Debruyne