how to use extra lib in typescript

[dyh333]

there is a point clustering demo, https://developers.arcgis.com/javascript/3/jssamples/layers_point_clustering.html
and need an extra clusterlayer lib, which is loaded by
var dojoConfig = {
paths: {
extras: location.pathname.replace(//[^/]+$/, "") + "/extras"
}
};

but when i need to use it in angular2, how can i import this extra lib?

[jwasilgeo]

@dyh333 are you asking where is the "extra" lib code or are you asking more about the specifics of loading additional packages with Dojo for an Angular2 app?

If it is the first question, you can get the "extra" clustering layer code by choosing the option "Download as a zip file".

If the second question, then it would be a matter of setting up the "packages" properties for the global dojoConfig variable that must be established (like in your index.html) before the script tag that brings in the Esri JSAPI. Here is a working example (see the 3rd bullet point) using SystemJS as the Angular2 module loader/manager:
https://github.com/Esri/esri-system-js#example-applications

[MarcBate]

There's a better cluster layer available than that Esri dev sample, and the v4 code is in TypeScript
https://github.com/nickcam/FlareClusterLayer

[jwasilgeo]

Indeed, @nickcam's FlareClusterLayer is really cool. The esri-system-js sample I mentioned above is using https://github.com/Esri/cluster-layer-js

[dyh333]

@jwasilgeo thanks for your reply. sorry, maybe my ask is not clear. you know, the cluster layer(https://github.com/Esri/cluster-layer-js) is an "extra" lib and when you want to use it, you must import the lib like this:
var dojoConfig = {
paths: {
extras: location.pathname.replace(//[^/]+$/, "") + "/extras"
}
};
the code above assign the extras files path, the first question is when in angular environment, can i assign the extras file the same?
and the second question, even if assigned the extras files path, how can i use the functions in the cluster layer file? you know that, in angular project, if i want to use arcgis lib, it would need to install @types/arcgis-js-api or tpyings install arcgis-js-api.d.ts like below image show.

but because the cluster layer is an extra file and not in arcgis lib, it means that 'arcgis-js-api.d.ts' file is not include declareing the cluster layer, so i can not import it into my angular project like below

by the way, https://github.com/dyh333/Angular2-Webpack-With-Arcgis . this is my test repo which use arcgis lib to show a simple map, and it is based Angular2 Webpack Starter(https://github.com/AngularClass/angular2-webpack-starter), it can work but it seems not a good idea to solve the matter that you mentioned above: "setting up the packages properties for the global dojoConfig variable that must be established (like in your index.html) before the script tag that brings in the Esri JSAPI. "
setTimeout(function(){ require([ "polyfills.bundle.js", "vendor.bundle.js", "main.bundle.js" ], function (polyfills, vendor, main) {}); }, 4000);
is there any better idea to solve the matter? thank you very much.

[jwasilgeo]

@dyh333 there are a few different things to consider here. First of all, you have to set some optional configuration properties on Dojo itself. That's the dojoConfig global variable that you have to set up with pointers to 3rd party Dojo extra libraries.

This was asked about in a closed issue in the esri-system-js library and we created a demonstration application to show how dojoConfig can be properly set up, and then used with esri-system-js for an Angular2 application.

Esri/esri-system-js#9 (comment)

See the live plnkr demo, and lines 20-26 in index.html. Then, you'll see that a 3rd party cluster layer can be imported into an Angular2 component. This is just one way of accomplishing this with esri-system-js, but you will need to establish your dojoConfig properties before including the script tag to load in the entire JSAPI.

Regarding typings files (...d.ts), yes, those won't exist for extra libraries that weren't written in TS. Not sure what else you'd have to do besides ignore it or write your own typings for that. 😄

[tomwayson]

@dyh333

If you use a TypeScript dependency like https://github.com/nickcam/FlareClusterLayer you should be able to use import statements and have that code bundled w/ your own application code. If that library has types defined, then you'll get intellisense too.

However if you want to use a Dojo module like https://github.com/Esri/cluster-layer-js/blob/master/src/clusterfeaturelayer.js you'll have to do things differently. I would expect that in addition to adding "extras" as a path or package to the dojoConfig as described above, you would also have to also exclude extras from the webpack build by adding
something like:

/^extras/.test(request) ||

to the externals array along with the other dojo packages. Then you should be able to use it in an import statement like:

import ClusterFeatureLayer = require( 'extras/clusterfeaturelayer');

Of course, as @jwasilgeo mentioned, you won't get typescript types for this unless you write them yourself. It's also worth noting that the clusterfeaturelayer module will not be minified or bundled.

If you haven't already, be sure to read this how it works section, as all the esri webpack examples work in the same way.

HTH

[dyh333]

@jwasilgeo @tomwayson thanks very much. i will try again.

[jwasilgeo]

@dyh333 this webpack repo has been updated to also show and explain the dojoConfig pattern to set up external Dojo modules/plugins. Lots of helpful info in the readme. Overall the approach with SystemJS is similar in nature if you compare with the plnkr example we mentioned above.

https://github.com/tomwayson/esri-webpack-babel

[tomwayson]

@dyh333 specifically, see the Dojo Libraries section of the README

[dyh333]

thanks, you are so kind. @jwasilgeo , @tomwayson .

[pawanmalik]

@dyh333 , @tomwayson I followed the steps mentioned above to use extra lib in typescript but unfortunately I get an error "Cannot find module 'extra/clusterfeaturelayer'" during import. Any pointers would be helpful. Thanks.

[tomwayson]

@pawanmalik can you share your config/code?

[pawanmalik]

@tomwayson thanks for your revert.

Here is my code:

In index.html:

<script>
  window.dojoConfig = {
    async: true,
    packages: {
        name: 'extras',
    	location: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
      }
  };
</script>
<script src="https://js.arcgis.com/3.21/"></script>

In webpack configuration:

externals: [
    function(context, request, callback) {
        if (/^dojo/.test(request) ||
            /^dojox/.test(request) ||
            /^dijit/.test(request) ||
            /^esri/.test(request) ||
            /^extras/.test(request)
        ) {
            return callback(null, "amd " + request);
        }
        callback();
    }
]

In the typescript file I am trying to import the extras with this statement:

import ClusterFeatureLayer = require( 'extras/clusterfeaturelayer');

However the following statement doesn't give any error:
import Map = require( 'esri/map' );

[tomwayson]

Is there a file named clusterfeaturelayer.js at ocation.pathname.replace(/\/[^/]+$/, "") + "/extras"?

[pawanmalik]

@tomwayson thanks for your revert. There was a problem with the file path.

However, I had to change the dojoConfig to make it working.

paths: {          
    	extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
      }