External javascript library returns 404 on '{module}/dist/'

Question

Always having some trouble configuring an external project in Angular2.

I want to include ng2-sharebuttons in my project. (which does not seem to have a global .d.ts file?)

Although the README.md just says npm install ng2-sharebuttons --save, I know there are more things to this (systemjs.config& typings)

First I tried to configure systemjs.config having:

map{
     ......
     'ng2-sharebuttons' : 'node_modules/ng2-sharebuttons'
}

This at least fixed the 404 on localhost/ng2-sharebuttons but created a new 404 on localhost/node_modules/ng2-sharebuttons.

So, I added a main file, changing systemjs.config to

map{
     ......
     'ng2-sharebuttons' : 'node_modules/ng2-sharebuttons/dist/index.js'
}

But now this results in a 404 on every child of the ng2-sharebuttons/dist

I tried doing typings install ng2-sharebuttons --save --global and typings install @types/ng2-sharebuttons --save --global both with and without the --global flag.

So on my last hope I added a reference to see if that would work. Adding

/// <reference path="../../node_modules/ng2-sharebuttons/dist/index.d.ts" />

But this didn't change anything.

What did I forget? Why is this so hard? (Or am I just making it hard?)

Structure & files of ng2-sharebuttons:

And lastly, the error message currently being produced by Chrome:

Entire systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs': 'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'angularfire2' : 'npm:angularfire2/bundles/angularfire2.umd.js',
      'firebase' : 'npm:firebase',
      'ng2-bs3-modal': 'npm:ng2-bs3-modal',
      'ng2-sharebuttons' : 'npm:ng2-sharebuttons/dist/index.js',
      'ng2-social-share' : 'npm:ng2-social-share/bundles/ng2-social-share.js'
    },

    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      firebase: {
        main: './firebase-browser.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

It throws an error GET .... 404 but also a XHR finished loading: GET .... on the same component/service/file which seems quite weird.

Are you using the router? Have you tried with `HashLocationStrategy`? — Günter Zöchbauer, Dec 21 '16 at 08:39
@GünterZöchbauer yes I am using the router from `@angular/router` I've never heard about the `HashLocationStrategy` :/ — Ivar Reukers, Dec 21 '16 at 08:43
http://stackoverflow.com/questions/36861628/location-and-hashlocationstrategy-stopped-working-in-beta-16 With the default `PathLocationStrategy` you need server support. Your problem could be http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser — Günter Zöchbauer, Dec 21 '16 at 08:44
Provided `PathLocationStrategy` with `HashLocationStrategy` but the error stays the same, It seems like I'm trying to 'import' from another project which is in my node_modules. (it seems to fire when a specific selector is placed) — Ivar Reukers, Dec 21 '16 at 08:55
I don't know about node modules. Just wanted to make sure it's not related to HTML5 pushState which often causes 404 when the server doesn't support it. — Günter Zöchbauer, Dec 21 '16 at 08:55
ah okay, well the application itself is working fine, router works like expected (hashed as well), just the `node_modules/ng2-sharebuttons/dist` returns some 404's — Ivar Reukers, Dec 21 '16 at 08:58
Can you try to add `defaultJSExtensions:true,` under your `System.config`? Like: `System.config({defaultJSExtensions:true, paths: {...` — eko, Dec 23 '16 at 20:41
is this by any chance related to your issue ?https://github.com/MurhafSousli/ng2-sharebuttons/issues/17 — Suraj Rao, Dec 27 '16 at 06:31

johnDisplayClass · Answer 1 · 2016-12-16T14:30:43.410

1

Apologies but my corp proxy won't let me view the attached images... But it looks as though you haven't statically exposed node_modules through your webserver.

You haven't specifically mentioned your server technology, but with node/express put this in app.js:

app.use('/node_modules', express.static(path.join(__dirname, './node_modules')));

Alternatively, use a build script to copy relevant js files to your express scripts (or similar) folder, and point your system.config mapping to the scripts folder instead.

Remember that the /// <reference.../> tag is only a hint to the Typescript transpiler and intellisense for type discovery. This is no longer necessary in Typescript 2, where @types/ are auto discovered.

edited Dec 16 '16 at 14:30

answered Dec 16 '16 at 14:11

johnDisplayClass

269
3
11

I meant your server side technology rather than the front end. Can you confirm that you're serving the page through node/express or similar? – johnDisplayClass Dec 16 '16 at 15:38
This is the result of an `npm start` running `lite-server` command – Ivar Reukers Dec 16 '16 at 15:39
Because other node_module references work fine, i suspect that systemjs is struggling to interpret the module format of the js file. First confirm in chrome dev tools that the js file is indeed downloaded to your browser. Secondly add `meta: { "node_modules/ng2-sharebuttons/dist/index.js": { format: "global" }` to your system.config. – johnDisplayClass Dec 16 '16 at 17:13
Again... apologies that i can't even see your "message produced by Chrome" error image.... Its laughable but i'm still the only one helping you. Albeit blind. – johnDisplayClass Dec 16 '16 at 17:15
doing so results in a `404` on `localhost/app`, doesn't seem to be the solution for angular 2 :/ – Ivar Reukers Dec 20 '16 at 09:03

Ankit Singh · Accepted Answer · 2017-01-05T06:42:29.183

1

You need to do this

map:{
   'ng2-sharebuttons' : 'npm:ng2-sharebuttons/dist'
},

packages: {
   app: {main: './main.js', defaultExtension: 'js'},
   rxjs: {defaultExtension: 'js'},

   'ng2-sharebuttons': {main: 'index.js', defaultExtension: 'js'}
}

edited Jan 05 '17 at 06:42

answered Dec 27 '16 at 09:09

Ankit Singh

24,525
11
66
89

The quotes! Why didn't I think of that, thought you couldn't have a `-` in your package name. Thanks, this works! – Ivar Reukers Dec 27 '16 at 12:18

External javascript library returns 404 on '{module}/dist/'

2 Answers2