angular - Azure map 控制导致 Angular 通用 SSR 错误

Question

我正在使用Azure Maps Web Control与 Angular 11+ 一起使用。我可以在浏览器端创建 map 的实例，没有任何问题:

html

<div class="map-target" #mapTarget></div>

代码

  export class MapComponent implements AfterViewInit {
      @ViewChild('mapTarget') matTarget: ElementRef<HTMLElement> | undefined;

      map: Map | undefined;

      constructor(@Inject(PLATFORM_ID) private platformId: any) {}

      ngAfterViewInit(): void {
        if (isPlatformBrowser(this.platformId)) {
          this.map = new Map(this.matTarget?.nativeElement as HTMLElement, {
            center: [-118.270293, 34.039737],
            zoom: 14,
            view: 'Auto',
            authType: 'subscriptionKey',
            subscriptionKey: 'key-here',
          });
        }
      }
    }

我面临的问题是，每当 Azure Maps 类(Map、DrawingManager、Layers 等)的代码中包含构造函数调用时，它就会破坏 SSR 构建，并出现以下错误:

Error: Non-standard crypto library
at D:\code\clients\beyond-key\dqt\temp\azure-maps-ssr-issue\dist\azure-maps-ssr-issue\server\main.js:150:794680
at i (D:\code\clients\beyond-key\dqt\temp\azure-maps-ssr-issue\dist\azure-maps-ssr-issue\server\main.js:150:794859)
at l (D:\code\clients\beyond-key\dqt\temp\azure-maps-ssr-issue\dist\azure-maps-ssr-issue\server\main.js:150:794925)
at D:\code\clients\beyond-key\dqt\temp\azure-maps-ssr-issue\dist\azure-maps-ssr-issue\server\main.js:150:883579
at D:\code\clients\beyond-key\dqt\temp\azure-maps-ssr-issue\dist\azure-maps-ssr-issue\server\main.js:150:22
at Object./0ki (D:\code\clients\beyond-key\dqt\temp\azure-maps-ssr-issue\dist\azure-maps-ssr-issue\server\main.js:150:43)
at __webpack_require__ (D:\code\clients\beyond-key\dqt\temp\azure-maps-ssr-issue\dist\azure-maps-ssr-issue\server\main.js:20:30)
at Module.cNoH (D:\code\clients\beyond-key\dqt\temp\azure-maps-ssr-issue\dist\azure-maps-ssr-issue\server\main.js:80114:76)
at __webpack_require__ (D:\code\clients\beyond-key\dqt\temp\azure-maps-ssr-issue\dist\azure-maps-ssr-issue\server\main.js:20:30)
at Module.Sy1n (D:\code\clients\beyond-key\dqt\temp\azure-maps-ssr-issue\dist\azure-maps-ssr-issue\server\main.js:71265:76)

在 SSR 端没有执行代码的情况下会发生这种情况(所有都是包装的平台检查)。

删除构造函数调用但保留所有其他引用“修复”了问题。

我真的很想继续使用 Azure map ，但目前这个问题使 Bing map 成为我的唯一选择。还有其他人经历过类似的事情并找到了解决方法吗？我成功尝试的一件事是将 map 创建移至仅包含在浏览器构建中的工厂。一旦事情变得清楚，这将需要对多边形、图钉等所有东西进行处理。这变得不可行。

存储库可用 here重现问题。

git clone github.com/JayChase/azure-maps-ssr-issue
npm i
npm run dev:ssr

Answer 1

这与这两个线程类似:

https://github.com/WiredSolutions/react-azure-maps/issues/77

https://feedback.azure.com/forums/909172-azure-maps/suggestions/41611411-nextjs-cannot-use-azure-map-control-as-package

主要问题是:

“您不能使用 map 作为服务器端渲染器 - 它需要客户端浏览器才能工作。”