CODEWITHSUNDEEP
file-uploadtypescriptangularsystemjs
Clément Flodrops
Clément Flodrops

Reputation: 1104

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

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.

Upvotes: 3

Views: 2801

Answers (2)

user1757494
user1757494

Reputation: 101

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' }
};

Upvotes: 5

Thierry Templier
Thierry Templier

Reputation: 202256

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';

Upvotes: 0

Related Questions