Angular2: ng2-file-upload : cannot load it correctly using SystemJS

Question

I'm using systemJS to manage my packages so I've added those lines to my systemjs's configuration file :

{
  map: { 'ng2-file-upload': 'node_modules/ng2-file-upload' },
  packages: {
    'ng2-file-upload': {
        main: './ng2-file-upload/ng2-file-upload.js', // also tried with './ng2-file-upload.js'
        defaultExtension: 'js'
    },
  }
}

I import ng2-file-upload via import { FileDrop, FileUploader } from 'ng2-file-upload';.

But importing causes my application "craches" : my typscript compiler seems works well (I can see logs due to other code) but the modifications are not transpiled anymore so I can't run anything. I don't have any error logs in connection with ng2-file-upload (except a lot of Duplicate identifiers).

Any idea ?

EDIT: I've extracted this package from node_modules to a folder that is near my app (vendor) and I've used a relative path to import FileDrop and FileUploader but systemjs failed to imports :

Error: SyntaxError: Unexpected token <(…)

EDIT 2: Here is some details. My application is under a public which contains 2 sub-folders : src and build. I write ts code inside src (this is obvious) and my tsc saves transpiled files to build. At the moment, I don't bundle my files so the hierarchy inside build is the same as the src one.

But something weird happens only with ng2-file-upload : during transpiling, tsc add a node_modules/ng2-file-upload folder inside build. Here is the trees :

public
|-- build
|    |-- core
|    |-- modules
|    |-- styles
|    |-- node_modules
|    |    |-- ng2-file-upload
+-- src
    |-- core
    |-- modules
    |-- styes

I don't know why TSC transpile this package. Of course, node_modules are excluded in my tsconfig.ts.

user1757494 · Accepted Answer · 2016-05-11 15:29:41Z

5

here's my systemjs.config that works:

      var map = {
    'app': 'app', // 'dist',
    'rxjs': 'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular': 'node_modules/@angular',
    'ng2-file-upload': 'node_modules/ng2-file-upload'
};


var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'ng2-file-upload': { main: 'ng2-file-upload.js', defaultExtension: 'js' }
};

answered May 11, 2016 at 15:29

user1757494

1014 bronze badges

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

Comments

Thierry Templier · Accepted Answer · 2016-04-28 07:51:13Z

0

I would try this configuration:

{
  map: { 'ng2-file-upload': 'node_modules/ng2-file-upload' },
  packages: {
    'ng2-file-upload': {
      defaultExtension: 'js'
    },
    (...)
  }
}

and import it this way:

import { FileDrop, FileUploader } from 'ng2-file-upload/ng2-file-upload';

answered Apr 28, 2016 at 7:51

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

3 Comments

Clément Flodrops Over a year ago

I've also tried this, but it doesn't works :/. I'm going to add details to my question.

Thierry Templier Over a year ago

Which request is executed by SystemJS to load the library (and fails)?

Clément Flodrops Over a year ago

When I tell SystemJS to import the package by writting import ..., it seems that my modifications are not transpiled correctly and my import instruction isn't executed. || (maybe there is a conflict between SystemJS and TSC ? Due to a bad configuration ?)

Collectives™ on Stack Overflow

Angular2: ng2-file-upload : cannot load it correctly using SystemJS

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related