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

[JeffKapellas]

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!

[JeffKapellas · Accepted solution]

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.

[ZdeněkJankovský]

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.

[HenryKo2]

We are using React and TypeScript, this works for us:

import * as urlUtils from '@arcgis/core/core/urlUtils';

urlUtils.addProxyRule({
...
});