How to include JavaScript library in app?

Ionic Framework Ionic Angular
1

If I need to include a custom javascript library like this one, what is the best path forward to get it to work with my TS files in my app?

2

Hi,
You should install it with:

npm install @defvayne23/svg-marker

later, in TS you can import it with:

import { SVGMarker} from '@defvayne23/svg-marker';

…and use it as the javascript example.

Try it

3

When I try and import the SVG Marker and use it in my app, I get this error:

_defvayne23_svg_marker__WEBPACK_IMPORTED_MODULE_4__.SVGMarker is not a constructor

4

Please share us the portion of code where it fails

5 

import { SVGMarker } from '@defvayne23/svg-marker';

addMarker(lat: number, lng: number) {

    let marker = new SVGMarker({
      position: new google.maps.LatLng(lat, lng),
      map: this.map,
      icon: {
        size: new google.maps.Size(48, 59),
        anchor: new google.maps.Point(24, 59),
        url: 'src/assets/images/marker.svg',
        text: {
          content: '!',
          color: '#fff',
          size: '24px',
          weight: '700',
          position: [25, 24]
        }
      }
    });
  }
6

mmm this library is not modular. You can try the following (I don’t like it, but maybe it works):

  1. Import the library via CDN: in your index.html, in the header section, put:
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/134893/SVGMarker.js"></script>
  1. remove the import that I suggested you
  2. Put under the imports the following code:
declare let SVGMarker: any;

With this changes maybe it works.

Try it!