How to load a 3rd third party library with the Angular 5 CLI?

Question

I am attempting to use a 3rd party library in my Angular 5 app by configuring global scripts. This question outlines what I am trying to do although I think this might be at Angular 4: Loading third party library with Angular-cli

The library I am trying to use is shpjs, so my scripts property is:

  "scripts": [
    "../node_modules/shpjs/dist/shp.js"
  ],

The app builds fine, but my library is not present in my index.html. According to the docs:

These will be loaded exactly as if you had added them in a tag inside index.html

Is there another step that I am missing?

*Update: *
I had other issues which I finally got sorted out. To sum up, my script configuration was correct but my import statement in my component was not and I was conflating one issue with another.

In my component.ts, I added import * as shp from 'shpjs';

And then my test function on my component worked just fine:

  openAsGeoJson(url: string) {
    url = 'http://calvinmetcalf.github.io/shapefile-js/files/TM_WORLD_BORDERS_SIMPL-0.3.zip';


    shp(url).then(function (data) {
      if (data) {
        console.log('shapefile data received');
        console.log(data.length);
        console.log(data);
      }

    });
  }

My Environment:

Angular CLI: 1.6.3
Node: 7.10.1
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.3

"as if you had" doesn't mean that's how it's actually done. They're included in the bundled JavaScript. — jonrsharpe
– jonrsharpe, Commented May 10, 2018 at 19:35

Basavaraj Bhusani · Accepted Answer · 2018-05-10 19:35:19Z

4

It doesnt get added to the index.html as is.

<script src="../node_modules/shpjs/dist/shp.js" />

It gets added in scripts.bundle.js

There will a script tag in index.html as below,

<script type="text/javascript" src="scripts.bundle.js"></script>

The shp.js file will be part of scripts.bundle.js, Open this file and you can find shp.js contents.

answered May 10, 2018 at 19:35

Basavaraj Bhusani

5,7032 gold badges19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to load a 3rd third party library with the Angular 5 CLI?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related