404 not found with angular2 rc1 #216

New Issue

2016-05-23T11:00:10Z

inska commented

2016-05-23 11:00:10 +00:00

(Migrated from github.com)

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,

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 commented

2016-05-23 23:08:18 +00:00

(Migrated from github.com)

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

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: ``` javascript System.config({ paths: { '*': './node_modules/*' }, defaultJSExtensions: true }); ``` And: ``` typescript import {FILE_UPLOAD_DIRECTIVES, FileUploader} from "ng2-file-upload/ng2-file-upload"; ```

inska commented

2016-05-24 01:50:06 +00:00

(Migrated from github.com)

@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/*'
    },

@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 commented

2016-05-24 02:02:35 +00:00

(Migrated from github.com)

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

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 commented

2016-05-24 23:11:45 +00:00

(Migrated from github.com)

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.
});

Although this is not related to ng2-file-upload, in my opinion your main.js should be part of an package, like: ``` js System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }, paths: { '*': './node_modules/*', 'app/*': 'app/*' }, defaultJSExtensions: true }); ``` Then you can include your `main.js` like this: ``` js System.import('app/main').then(function() { // bootstrap etc. }); ```

coder59 commented

2017-06-14 10:43:33 +00:00

(Migrated from github.com)

Not able to find System.config

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#216