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

552
2
Jump to solution
12-07-2018 05:38 PM
Highlighted
New Contributor II

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 cur...

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!

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
New Contributor II

So after a bit of trial-and-error, I was able to resolve the issue by changing the import statement from

   import urlUtils from "esri/core/urlUtils";

to

   import urlUtils = require("esri/core/urlUtils");

That same change also fixed a similar issue I was experiencing with promiseUtils. It's not clear to me when you use one syntax of the other, but the fix works.

View solution in original post

2 Replies
Highlighted
New Contributor II

So after a bit of trial-and-error, I was able to resolve the issue by changing the import statement from

   import urlUtils from "esri/core/urlUtils";

to

   import urlUtils = require("esri/core/urlUtils");

That same change also fixed a similar issue I was experiencing with promiseUtils. It's not clear to me when you use one syntax of the other, but the fix works.

View solution in original post

Highlighted
Esri Contributor

Thanks for this solution it helps me with similar esri/core/promiseUtils.

After some testing, I figured out that ES6 notation of this kind work as well:

import { create } from "esri/core/promiseUtils";
or better
import { create as promiseCreate} from "esri/core/promiseUtils";‍‍

Zdenek J.

Reply
0 Kudos