Document not defined error with Flowbite and Angular 18 SSR

first time posting on stack overflow and very junior dev, sorry if there's some mistake in the way to present the issue.

I'm trying to use Flowbite library with Angular 18 SSR.

flowbite.service.ts :

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

@Injectable({
providedIn: 'root',
})
export class FlowbiteService {
constructor(@Inject(PLATFORM_ID) private platformId: any) {}

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



app.components.ts :

export class AppComponent implements OnInit {
title = 'dashboard-simplon';

ngOnInit(): void {
initFlowbite();
}
}


one of the component i'm trying to use flowbite in :

import { Component, Input, OnInit } from '@angular/core';
import { FlowbiteService } from '../../../../services/flowbite.service';

@Component({
selector: 'app-dashboard-progress-bar',
standalone: true,
imports: [],
templateUrl: './dashboard-progress-bar.component.html',
styleUrl: './dashboard-progress-bar.component.scss',
providers: [FlowbiteService],
})
export class DashboardProgressBarComponent implements OnInit {
@Input() title = 'test';

constructor(private flowbiteService: FlowbiteService) {}

ngOnInit(): void {
this.flowbiteService.loadFlowbite((flowbite) => {
// Your custom code here
console.log('Flowbite loaded', flowbite);
});
}
}


I've followed the installation steps here : https://flowbite.com/docs/getting-started/angular/ As well as this github issue : https://github.com/themesberg/flowbite/issues/800 to no success.

I know the issue comes from the fact that Flowbite tries to use document from the DOM API, but I don't understand what can be done to fix the issue.

Continue reading...