3

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.

Clément Flodrops
  • 1,114
  • 1
  • 13
  • 29

2 Answers2

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' }
};
user1757494
  • 101
  • 4
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';
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • I've also tried this, but it doesn't works :/. I'm going to add details to my question. – Clément Flodrops Apr 28 '16 at 07:58
  • Which request is executed by SystemJS to load the library (and fails)? – Thierry Templier Apr 28 '16 at 08:01
  • 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 ?) – Clément Flodrops Apr 28 '16 at 08:07