Azure Maps Control 导致 Angular Universal SSR 错误

大佬教程收集整理的这篇文章主要介绍了Azure Maps Control 导致 Angular Universal SSR 错误，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Azure Maps Control 导致 Angular Universal SSR 错误？

开发过程中遇到Azure Maps Control 导致 Angular Universal SSR 错误的问题如何解决？下面主要结合日常开发的经验，给出你关于Azure Maps Control 导致 Angular Universal SSR 错误的解决方法建议，希望对你解决Azure Maps Control 导致 Angular Universal SSR 错误有所启发或帮助； @H_772_2@我在 Angular 11+ 中使用 Azure Maps Web Control。我可以在浏览器端创建地图实例而不会出现任何问题：@H_675_3@ @H_772_2@HTML@H_675_3@

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

@H_772_2@代码@H_675_3@

  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',});
        }
      }
    }

@H_772_2@我面临的问题是，每当 Azure Maps 类（Map、DrawingManager、Layer 等）的代码中包含构造函数调用时，它都会破坏 SSR 构建并显示以下错误：@H_675_3@

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)

@H_772_2@这种情况发生在 SSR 端没有执行代码的情况下（都是包装的平台检查）。@H_675_3@ @H_772_2@删除构造函数调用但保留所有其他引用“修复”了问题。@H_675_3@ @H_772_2@我真的很想继续使用 Azure 地图，但目前这个问题使 Bing 地图成为我的唯一选择。有没有其他人经历过类似的事情并找到了解决方法？我成功尝试的一件事是将地图创建移到仅包含在浏览器构建中的工厂。一旦清楚这将需要为多边形、图钉等所有内容完成。这变得不可行。@H_675_3@ @H_772_2@可以使用存储库 here 来重现问题。@H_675_3@

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

解决方法

大佬总结

以上是大佬教程为你收集整理的Azure Maps Control 导致 Angular Universal SSR 错误全部内容，希望文章能够帮你解决Azure Maps Control 导致 Angular Universal SSR 错误所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。