I am using the Azure Maps Web Control with Angular 11+. I can create an instance of the map without any problems on the browser side:
html
<div class="map-target" #mapTarget></div>
code
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',
});
}
}
}
The issue I am facing is that whenever a constructor call is included in the code for an Azure Maps class (Map, DrawingManager, Layers etc..) it breaks the SSR build with the error below:
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)
This happens without the code being executed on the SSR side (it is all wrapped platform checks).
Removing the constructor call but leaving all the other references 'fixes' the issue.
I would really like to move forward with Azure maps but at the moment this issue is making Bing Maps the only option for me. Has anyone else experienced similar and found a workaround? One thing I did successfully try was moving the map creation out to a factory that was only included in the browser build. Once it became clear this would need to be done for everything down to polygons, pushpins etc.. this became unworkable.
A repo is available here to recreate the issue.
git clone github.com/JayChase/azure-maps-ssr-issue
npm i
npm run dev:ssr
