So i have a relatively sophisticated webapp written with angular. recently i updated to the newest version up to angular 18 to make use of the new feature introduced in angular 17 native SSR (server side rendering)

adding SSR went like a breeze but after adding it to the project a bunch of errors come up. mainly it was errors caused by using window.xxx in my application code. this will obviously fail as it is running in a node environment for SSR. most of these errors i was able to fix but leaflet is causing me some problems.

especially ngx-leaflet and ngx-leaflet-draw. normal leaflet usage i am able to refactor into using an external service which loads the leaflet module but im not sure how to do this for ngx-leaflet-modules as i am not calling ngx-leaflet directly, but simply importing them in my module files like this.

// backoffice.module.ts
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw';


@NgModule({
  declarations: [
    ...
  ],
  imports: [
    LeafletModule
    LeafletDrawModule
  ]
})

i have the same code in two more module files: ‘app.module.ts’ and ‘util.module.ts’

can i import the modules based on browser environment with the help of a service like described here?

Angular Universal (SSR), with Leaflet and ngx-leaflet

If anyone has implemented angular SSR with leaflet id be happy to be pointed in the right direction

// error message for reference
10:25:30 AM [vite] Error when evaluating SSR module /main.server.mjs:
|- ReferenceError: window is not defined
    at eval (/home/fiehra/dev/weplantaforest/ui2022/node_modules/leaflet/dist/leaflet-src.js:230:19)
    at eval (/home/fiehra/dev/weplantaforest/ui2022/node_modules/leaflet/dist/leaflet-src.js:7:66)
    at node_modules/leaflet/dist/leaflet-src.js (/home/fiehra/dev/weplantaforest/ui2022/node_modules/leaflet/dist/leaflet-src.js:10:1)
    at __require2 (/home/fiehra/dev/weplantaforest/ui2022/.angular/vite-root/ui2022/chunk-Q4AGBL6P.mjs:47:50)
    at eval (/home/fiehra/dev/weplantaforest/ui2022/node_modules/@asymmetrik/ngx-leaflet/fesm2022/asymmetrik-ngx-leaflet.mjs:3:49)
    at async instantiateModule (file:///home/fiehra/dev/weplantaforest/ui2022/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

10:25:30 AM [vite] Internal server error: window is not defined
      at eval (/home/fiehra/dev/weplantaforest/ui2022/node_modules/leaflet/dist/leaflet-src.js:230:19)
      at eval (/home/fiehra/dev/weplantaforest/ui2022/node_modules/leaflet/dist/leaflet-src.js:7:66)
      at node_modules/leaflet/dist/leaflet-src.js (/home/fiehra/dev/weplantaforest/ui2022/node_modules/leaflet/dist/leaflet-src.js:10:1)
      at __require2 (/home/fiehra/dev/weplantaforest/ui2022/.angular/vite-root/ui2022/chunk-Q4AGBL6P.mjs:47:50)
      at eval (/home/fiehra/dev/weplantaforest/ui2022/node_modules/@asymmetrik/ngx-leaflet/fesm2022/asymmetrik-ngx-leaflet.mjs:3:49)
      at async instantiateModule (file:///home/fiehra/dev/weplantaforest/ui2022/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)