ArcGIS JS API Map-Componets: Load-Portal-Item not using correct PortalUrl or ProxyUrl

ColbyMorris · ‎03-09-2026

error: o

details: {url: 'https://www.arcgis.com/sharing/rest/content/items/My_Portal_Url}

I am getting this error when trying to convert to Arcgis/Map-Components. I set the PortalURL and ProxyURL in NgOnInit()

I also have a boolean on the map to wait to render until the config is set.

esriConfig.request.proxyRules = [

{

urlPrefix: myPortalUrl,

proxyUrl: myProxyUrl

}

];

But the request from the {arcgis-map} is still trying to find the portalUrl through arcgis. I did try setting the portalUrl in the {arcgis-map portal-url="myUrl" item-id="My_Portal_Url"}. Neither of these seem to work.

Any help with this would be great.

TJSimons · ‎03-10-2026

Hi @ColbyMorris - To load a webmap from your portal, you need to set the config.portalUrl to "https://{yourportal}/portal". Set the config before the API is loaded to make sure some requests are not still made to arcgis.com. For example, with this template you could place it in the app.config.ts.

import esriConfig from "@arcgis/core/config";

esriConfig.portalUrl = "your_portal_url";

For the arcgis-map, set the item-id to your portal webmap's item id.

The proxy rules may not be needed. Unless there is something specific to your environment that requires it.

View solution in original post

ReneRubalcava · ‎03-10-2026

This will depend on how you are building your app.

They key is to set this up before the map-components load or added to the DOM. One good way is to set them on the global esriConfig object.

https://codepen.io/odoe/pen/LYaveKr

<head>
	<script>
		// use the global esriConfig variable to initialize properties
		var esriConfig = {
			// No map will load with fake portal
			portalUrl: "https://myHostName.esri.com/arcgis"
		};
	</script>
	<script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>
<body>
	<arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9">
		<arcgis-expand slot="top-right">
			<arcgis-search></arcgis-search>
		</arcgis-expand>
		<arcgis-legend slot="bottom-left"></arcgis-legend>
	</arcgis-map>
</body>

You can also use a script tag in the <head> to set this up. Then you can write your app code in a script tag in the last element of the body.

https://developers.arcgis.com/javascript/latest/programming-patterns/#set-the-portalurl-in-a-cdn-app...

Another way is to create the WebMap yourself and assign it to the map component.

https://developers.arcgis.com/javascript/latest/programming-patterns/#using-webmap-or-webscene

https://developers.arcgis.com/javascript/latest/programming-patterns/#set-the-portalurl-in-an-esm-ap...

TJSimons · ‎03-10-2026

Hi @ColbyMorris - To load a webmap from your portal, you need to set the config.portalUrl to "https://{yourportal}/portal". Set the config before the API is loaded to make sure some requests are not still made to arcgis.com. For example, with this template you could place it in the app.config.ts.

import esriConfig from "@arcgis/core/config";

esriConfig.portalUrl = "your_portal_url";

For the arcgis-map, set the item-id to your portal webmap's item id.

The proxy rules may not be needed. Unless there is something specific to your environment that requires it.

ColbyMorris · ‎03-10-2026

Great!

Thank you for the solutions. The app is now up and running with your help.