404 not found with angular2 rc1

[inska]

Hi,

I am trying to use ng-file-upload with Angular2 rc 1 that released early of this month following example, but still browser console returns 404 not found. https://github.com/valor-software/ng2-file-upload/issues/196 this article already referenced..

in system-config.js, fixed like as below

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

cliSystemConfigPackages['ng2-file-upload'] = { main: 'ng2-file-upload', 'defaultExtension': 'js'}

(and..)

System.config({
  paths: {
  },
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'ng2-file-upload': 'node_modules/ng2-file-upload'
  },
  packages: cliSystemConfigPackages
});

Any other setting needed?

Please let me know if I have missing point.

Best,

[marvinscharle]

In my opinion, you're missing the defaultJSExtension config for SystemJS. Furthermore I'd suggest using a paths mapping instead of map for packages in node_modules.

Try this:

System.config({
    paths: {
        '*': './node_modules/*'
    },
    defaultJSExtensions: true
});

And:

import {FILE_UPLOAD_DIRECTIVES, FileUploader} from "ng2-file-upload/ng2-file-upload";

[inska]

@marvinscharle ,

Changed as you mentioned, but still can't load ng2-file-upload.js... ng2-file-upload exists under the node_modules directory..

$ ls node_modules/ng2-file-upload/ng2-file-upload.js
node_modules/ng2-file-upload/ng2-file-upload.js

zone.js:101 GET http://localhost:4200/node_modules/ng2-file-upload/ng2-file-upload.js 404 (Not Found)

System.config({
  defaultJSExtensions: true,
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'ng2-file-upload': 'node_modules/ng2-file-upload'
  },
  paths: {
    'ng2-file-upload': './node_modules/*'
  },
  packages: cliSystemConfigPackages
});

when change paths like as below, angular2 can't load main.js

paths: {
        '*': './node_modules/*'
    },

[inska]

Solved this issue temporary by just moving node_modules/ng2-file-upload directory to src/assets/js/ng2-file-modules, and change map code like below:

  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'ng2-file-upload': 'assets/js/ng2-file-upload'
  },

[marvinscharle]

Although this is not related to ng2-file-upload, in my opinion your main.js should be part of an package, like:

System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    },
    paths: {
        '*': './node_modules/*',
        'app/*': 'app/*'
    },
    defaultJSExtensions: true
});

Then you can include your main.js like this:

System.import('app/main').then(function() {
    // bootstrap etc.
});

[coder59]

Not able to find System.config