System.js Loading Example about ng2-file-upload

[electricBonfire]

+1
Thanks for the work on these packages!

[mrluc]

@electricBonfire's approach also works for apps created from the angular CLI, with following notes:

• the entries he mentions are best made in src/system-config.js
• there needs to be an addition made to angular-cli-build.js to ensure that the module is copied to vendor/ automatically (just add ng2-file-upload/**/*.js

(Also ... grunt, gulp, webpack, brunch. Now, SystemJS. Grr.)

[piyukore06]

I am using ng2-file-upload with https://github.com/mgechev/angular-seed .. and the following worked for me .. if anyone needs it

this.SYSTEM_CONFIG_DEV.paths['ng2-file-upload'] = `node_modules/ng2-file-upload/ng2-file-upload`;
this.SYSTEM_BUILDER_CONFIG.packages['ng2-file-upload'] = {
  main: `ng2-file-upload.js`,
  defaultExtension : 'js'
};

[valorkin]

I have already added this to https://github.com/valor-software/ng2-bootstrap#quick-start
same will be here too soon

[mwijnands]

+1. Also, please provide bundled javascript files to include in the HTML. Right now I have no idea how to use this in my app, which javascript files I need to include, etc. Even though I really want to use it, it looks great.

[electricBonfire]

@mwijnands I managed to incorporate the lib doing the following:

//index.html
<script>
System.config({
    packages: {
        'js': {
            format: 'cjs',
            defaultExtension: 'js'
        },
        'vendor/ng2-file-upload': {
            format: 'cjs',
            defaultExtension: 'js'
        }
    },
    map: {
        'ng2-file-upload': 'vendor/ng2-file-upload/ng2-file-upload.js',
        moment: 'vendor/moment/moment.js'
    }
});

System.import('/vendor/ng2-file-upload/ng2-file-upload').then(function(){
    System.import('js/boot');
}, console.error.bind(console));
</script>

Note the vendor folder in the map config. I have a script that moves files from node_modules into vendor. You may need to use node_modules/ng2-file-upload/ng2-file-upload.js

Then in my component:

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

[valorkin]

@electricBonfire if you can create a fork or branch or folder with ng2-file-upload sample from here
https://github.com/valor-software/angular2-quickstart
I will really appreciate it :)

[electricBonfire]

@valorkin I am busy for the next week or so, I will try to put something together when things slow down. If no one else beats me to it!

[electricBonfire]

@valorkin: https://github.com/electricBonfire/ng2-file-upload-systemjs-quickstart

[tsuz]

This is working for me

system.config.js

System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/',
    },
    // map tells the System loader where to look for things
    map: {
      'ng2-file-upload': 'npm:ng2-file-upload'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      'ng2-file-upload': {
        main: 'index.js',
        defaultExtension: 'js'
      }
    }
  });

in app.module.ts

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

[igorlino]

@piyukore06 I also use ng2-file-upload with https://github.com/mgechev/angular-seed , but I found a cleaner way:

//assuming you checkout the angular-seed from scratch
// in project.config.ts
let additionalPackages: ExtendPackages[] = [
      {
        name: 'ng2-file-upload',
        path: 'node_modules/ng2-file-upload/bundles/ng2-file-upload.umd.js'
      }
    ];
    this.addPackagesBundles(additionalPackages);

//in home.module.js  (OPTIONAL)
import { FileUploadModule } from 'ng2-file-upload';
@NgModule({
  imports: [... FileUploadModule ...]
})

//in home.component.js
import { FileUploader } from 'ng2-file-upload';