How to use flowbite in angular 18 ssr?

I want to use flowbite in my angular project.

But I get the error like that.

4:18:15 PM [vite] Error when evaluating SSR module /main.server.mjs:
|- ReferenceError: document is not defined
    at eval (F:\Cowboy\companies\IOT-Billing\source\OnLineSignUp\.angular\cache\18.2.3\vite\deps_ssr\flowbite.js:4810:13)
    at async instantiateModule (file:///F:/Cowboy/companies/IOT-Billing/source/OnLineSignUp/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:52844:5)

4:18:15 PM [vite] Internal server error: document is not defined
      at eval (F:\Cowboy\companies\IOT-Billing\source\OnLineSignUp\.angular\cache\18.2.3\vite\deps_ssr\flowbite.js:4810:13)
      at async instantiateModule (file:///F:/Cowboy/companies/IOT-Billing/source/OnLineSignUp/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:52844:5)
4:18:17 PM [vite] Internal server error: document is not defined
      at eval (F:\Cowboy\companies\IOT-Billing\source\OnLineSignUp\.angular\cache\18.2.3\vite\deps_ssr\flowbite.js:4810:13)
      at async instantiateModule (file:///F:/Cowboy/companies/IOT-Billing/source/OnLineSignUp/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:52844:5) (x2)

I insert some code in tailwind.config.js file like that.

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/flowbite/**/*.js" // add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

You are using SSR in your Angular project. The error messages tell you that the application is trying to use browser APIs but is unable to do so. This happens when code is being executed on server side which is designed to run on client side. As you can read in the flowbite docs, with Angular SSR you cannot setup flowbite via tailwind config. Instead, you need to create a custom service which dynamically imports flowbite:

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

@Injectable({
  providedIn: 'root'
})
export class FlowbiteService {
  private platformId = inject(PLATFORM_ID);

  loadFlowbite(callback: (flowbite: any) => void) {
    if (isPlatformBrowser(this.platformId)) {
      import('flowbite').then(flowbite => {
        callback(flowbite);
      });
    }
  }
}

In your app, you need to use this service to initialize flowbite:

this.flowbiteService.loadFlowbite();