How to use this with typescript?

[yashodhah]

I am writing a map-based app using angular. Are there any types available for this? Or any idea how to use this in Angular?

[calvinmetcalf]

I don't use typescript so no types, you'd use this like any other js dependency

[mkaa]

is this going to work with angular 7?

[calvinmetcalf]

I don't use angular, but if angular supports modules from npm then yes it would

[hccampos]

We've managed to make this work in the latest Angular CLI by replacing Buffer (Angular CLI doesn't use node shims anymore):

loadShpjs(): Observable<any> {
    return new Observable<any>(observer => {
      (require as any)(
        [
          'imports-loader?BufferModule=buffer/,Buffer=>BufferModule.Buffer!../../../../../node_modules/shpjs/dist/shp.min.js',
        ],
        (shpjs: any) => {
          observer.next(shpjs);
          observer.complete();
        },
      );
    });
  }

[Anexo]

Hi all!

This is how I made it work on Angular 8, in case someone find it useful:

https://gist.github.com/Anexo/6099218d422ef846fd4851334ba574bc

Cheers!

[lnedialkov]

There are still issues with Angular 10 where the following error occurs:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '[object Object]'
    at Module.<anonymous> (binaryajax-fetch.js:4)

Replacing module.exports = with export default in binaryajax-fetch.js:4 resolves the issue.

[lnedialkov]

Made a PR for the above: https://github.com/calvinmetcalf/shapefile-js/pull/132

@calvinmetcalf can you please review and comment if other changes might also help in this regard, thanks!

[RandomFractals]

I used it for the GeoDataViewer vscode extension to load shapefiles into keplergl. You can check out pertinent TS code bits here: https://github.com/RandomFractals/geo-data-viewer/blob/master/src/map.view.ts#L401

Just import this lib as any nodejs module:

import * as shapefile from 'shpjs';

plus your typical package.json dependencies for such apps :)

"dependencies": {
    "@mapbox/togeojson": "^0.16.0",
    "@types/ol": "^6.3.1",
    "ol": "^6.3.1",
    "shpjs": "^3.5.0",
    "superagent": "^5.2.2",
    "topojson-client": "3.1.0",
    "xmldom": "^0.3.0"
  }

[calvinmetcalf]

if import * as shapefile from 'shpjs'; doesn't work the issue is probably about how you are using typescript NOT with this module and some sort of typescrypt specific resources might end up being more helpful since I don't use ts