Angular 17+ SSR 和传单、ngx-leaflet、ngx-leaflet-draw

Question

所以我有一个用 Angular 编写的相对复杂的 Web 应用程序。最近我更新到了 Angular 18 的最新版本，以利用 Angular 17 原生 SSR（服务器端渲染）中引入的新功能

添加 SSR 非常轻松，但将其添加到项目后出现了一堆错误。主要是在我的应用程序代码中使用 window.xxx 引起的错误。这显然会失败，因为它是在 SSR 的节点环境中运行的。我能够修复大部分错误，但传单给我带来了一些问题。

尤其是 ngx-leaflet 和 ngx-leaflet-draw。正常的传单使用情况我可以重构为使用加载传单模块的外部服务，但我不确定如何为 ngx-leaflet-modules 执行此操作，因为我没有直接调用 ngx-leaflet，而是简单地将它们导入到我的模块文件中像这样。

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


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

我在另外两个模块文件中有相同的代码：“app.module.ts”和“util.module.ts”

我可以借助此处描述的服务导入基于浏览器环境的模块吗？

Angular Universal (SSR)，带有 Leaflet 和 ngx-leaflet

如果有人使用传单 id 实现了 Angular SSR，很高兴能指出正确的方向

// 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)

Answer 1

这些库无法在服务器上工作，因为它们仅依赖于浏览器

window

全局。

我会使用一个独立的组件来导入这些模块，并且仅在客户端上加载该组件。