Override ArcGIS JS API classes

[tomasvoj]

Hi, I'm looking for an advice for my current issue. In my former app, I was overriding some esri classes and used them with my own namespace 'application/XXX'.

For example:

define(["dojo/_base/declare", "esri/dijit/editing/Delete", "application/Add"], function(declare, Delete, Add){
  return declare(Delete, {
    constructor: function (args) {
      this.inherited(arguments);
      args = args || {};
      this._add = new Add({
        featureLayer: args.featureLayer,
        addedGraphics: args.deletedGraphics,
        undoManager: args.undoManager
      });
    },
    ...
  });
});

Do you have any tips, how to override ESRI JS API classes in similarly way, but using Angular EsriLoader? Is it necessary, to make my own API build or something like that?

Thank you

[tomwayson]

Is it necessary, to make my own API build or something like that?

It should not be.

The solution is essentially the same as what I suggest for #24. As I said there, the tricky part is figuring out how to serve your Dojo modules so that they are accessible to the Dojo loader running in your app. I can't tell you exactly how to do that, b/c it depends on your build tools (webpack, angular-cli, etc).

Let's say your app is going to run at /my-app/index.html and one way or another, you're modules will be served from /my-app/lib/application, and the file that contains the above define statement is located at /my-app/lib/application/Delete.js then you need to:

1. Include a script tag in the page (before the script that bootstraps your angular app) that will configure dojo w/ an application package that points to /my-app/lib/application

packages: [{
        name: "application",
        location: "/my-app/lib/application"
    }]

2. Then use esriLoader.loadModules the same that way you would use require statements in a Dojo app:

esriLoader.loadModules(['application/Delete']).then([Delete] => {
  // do something w/ your custom Delete module
});

Please excuse (and correct) and typos or inaccuracies in the above, I'm doing this from memory.

[tomasvoj]

Many thanks, it works. What a simple solution!

You correctly answered my question, but... should I store that modules in the app's /assets folder?

FYI: I'm running on angular-cli.

[tomwayson]

should I store that modules in the app's /assets folder?

Sorry, I can't advise you that b/c I don't use angular-cli, nor Angular for that matter, these days.

Generally I would say use whatever is the recommended approach for persisting and serving static assets for whatever build/deploy tools you're using.

If you figure out a good way to do that for angular-cli, would you mind posting it back here for others?

[tomasvoj]

I was discontented with inserting it in standard /assets folder, so I've found a way to store that files in app's app/lib/arcgis-js-api-override folder. Not sure if it's right or wrong approach, but...

I've changed .angular-cli.json assets configuration to:

      "assets": [
        { "glob": "**/*", "input": "./assets/", "output": "./assets/" },
        { "glob": "favicon.ico", "input": "./", "output": "./" },
        { "glob": "**/*", "input": "./app/lib/arcgis-js-api-override", "output": "./lib/arcgis-js-api-override/" }
      ],

Maybe, I'll find a solution, how to bundle my arcgis-js-api assets by build.

My question was answered, so I will close this issue. Thank you, Tom!