Error Using Angular2 File Uploader from http://ng2-uploader.com

Question

I am new to Angular 2. I am trying to upload the file. For that i am using http://ng2-uploader.com . I have gone through their documentation and README file and executed all the instructions but i am getting this error in browser:

 GET http://localhost:3000/ng2-uploader 404 (Not Found)
(SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng2-uploader(…)

after searching thoroughly i found that we need to add package in systemjs.config.js

so my old file is :

map: {
  // our app is within the app folder
  app: 'app',
  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  }
}

and now my updated file is:

map: {
  // our app is within the app folder
  app: 'app',
  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  'ng2-uploader':'npm:ng2-uploader/ng2-uploader.js',
  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-uploader':{
    defaultExtension: 'js'
  }
}

As you see i have added the ng2-uploader in the file but now i am getting this error in the browser:

GET http://localhost:3000/node_modules/ng2-uploader/src/directives/ng-file-select 404 (Not Found)
(index):16 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-uploader/src/directives/ng-file-select(…)
GET http://localhost:3000/node_modules/ng2-uploader/src/directives/ng-file-drop 404 
GET http://localhost:3000/node_modules/ng2-uploader/src/services/ng2-uploader 404 (Not Found)

This is my app.module.ts :

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import {UPLOAD_DIRECTIVES} from 'ng2-uploader';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,
          UPLOAD_DIRECTIVES ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

I know i am still missing something. Can you please help me. Thank you

If I'm not mistaken, even their demos (ng2-uploader.com/demo) don't work! — hzitoun
– hzitoun, Commented Oct 18, 2016 at 6:52
No the demos are not working ! trying to use valor-software.com/ng2-file-upload currently. its an alternate option — heman123
– heman123, Commented Oct 18, 2016 at 7:14
if their demos don't work then your question has no more signification — hzitoun
– hzitoun, Commented Oct 18, 2016 at 7:18
I just wanted the page to be up. All my efforts were directed in bring up the UI and removing the errors. This question is related to that. The Part if it works or not is the second part of my effort on which i will be working now. Thanks to @yurzui the page is up. Any ways thank you Mitchapp for your time. — heman123
– heman123, Commented Oct 18, 2016 at 7:43

yurzui · Accepted Answer · 2016-10-18 07:18:03Z

5

You can try this config:

map: {
  ...
  'ng2-uploader':'npm:ng2-uploader'
},
packages: {
  ...
  'ng2-uploader':{
     main: 'ng2-uploader.js',
     defaultExtension: 'js'
  }
}

Seems it works for me

answered Oct 18, 2016 at 7:18

yurzui

215k32 gold badges449 silver badges413 bronze badges

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

Collectives™ on Stack Overflow

Error Using Angular2 File Uploader from http://ng2-uploader.com

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related