AnsweredAssumed Answered

How to add a proxy to the arcgis-js-api Webpack Typescript demo app?

Question asked by jkapellas on Dec 7, 2018
Latest reply on Dec 10, 2018 by jkapellas

I have created an application based upon the ArcGIS Javascript API 4.9 Webpack demo application (https://github.com/Esri/jsapi-resources/tree/master/4.x/webpack). The application is written in Typescript and is structured in the same manner as the demo. It currently works fine with unsecured services. However, I wish to add a proxy so that the application will use secured services, but so far have been unable to get urlUtils.addProxyRule() to work in the Typescript environment.

 

I've tried adding the call to the demo/src/data/app.ts file:

 

import esri = __esri;
import urlUtils from "esri/core/urlUtils";
import MapImageLayer from "esri/layers/MapImageLayer";
...
urlUtils.addProxyRule({
    urlPrefix: "my.server.com",
    proxyUrl: "https://path.to.proxy/proxy.ashx"
});
export const myLayer = new MapImageLayer({
    url: "https://my.server.com/arcgis/rest/services/myService/MapServer",
    sublayers: [{id: 0}],
    opacity: 1.0
});

 

I've also tried adding the call to the demo/src/widgets/App.tsx file:

import esri = __esri;
import urlUtils from "esri/core/urlUtils";
...
private onAfterCreate(element: HTMLDivElement){
   urlUtils.addProxyRule({
       urlPrefix: "my.server.com",
       proxyUrl: "https://path.to.proxy/proxy.ashx"
   });
   import("./../data/app).then(...)
}

In both instances, the application fails on the urlUtils.addProxyRule call:
      Uncaught TypeError: Cannot read property 'addProxyRule' of undefined

 

I have coded a number of applications in the JSAPI 3.x and 4.x, but this is my first using Typescript and Webpack, so I'm at a bit of a loss as to the error. Any assistance or guidance would be greatly appreciated. Thanks!

Outcomes