dc/ng2-file-upload
4
0
Fork 0
Code Issues 395 Pull Requests 27 Packages Projects Releases 4 Wiki Activity

System.js Loading Example #38

New Issue
Open
opened 2016-01-30 03:06:22 +00:00 by NoopDog · 11 comments
NoopDog commented 2016-01-30 03:06:22 +00:00 (Migrated from github.com)
Copy Link
Copy Source

I think it would be helpful for adoption if there was an example of how to use this library with the Sysetm.js module loading that is in the current Angular2 documentation and examples.

This module loading business is new to many (including my self) and the config seems very specific, brittle and sparsely documented. So I think It would be helpful to the project and the community if there was an example of how to integrate the file uploader into the quick start project for example which uses the System.js loader in the browser.

I think it would be helpful for adoption if there was an example of how to use this library with the Sysetm.js module loading that is in the current Angular2 documentation and examples. This module loading business is new to many (including my self) and the config seems very specific, brittle and sparsely documented. So I think It would be helpful to the project and the community if there was an example of how to integrate the file uploader into the quick start project for example which uses the System.js loader in the browser.
👍 2
valorkin commented 2016-02-01 14:16:26 +00:00 (Migrated from github.com)
Copy Link
Copy Source

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

I have already added this to https://github.com/valor-software/ng2-bootstrap#quick-start same will be here too soon
mwijnands commented 2016-02-19 12:42:20 +00:00 (Migrated from github.com)
Copy Link
Copy Source

+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.

+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 commented 2016-02-26 03:30:20 +00:00 (Migrated from github.com)
Copy Link
Copy Source

+1
Thanks for the work on these packages!

+1 Thanks for the work on these packages!
🎉 1
electricBonfire commented 2016-03-01 05:30:46 +00:00 (Migrated from github.com)
Copy Link
Copy Source

@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';
@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 commented 2016-05-12 13:37:36 +00:00 (Migrated from github.com)
Copy Link
Copy Source

@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 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 :)
mrluc commented 2016-05-20 22:35:32 +00:00 (Migrated from github.com)
Copy Link
Copy Source

@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.)

@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.)
👍 1
electricBonfire commented 2016-05-30 20:51:35 +00:00 (Migrated from github.com)
Copy Link
Copy Source

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

@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 commented 2016-06-12 19:17:36 +00:00 (Migrated from github.com)
Copy Link
Copy Source

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

@valorkin: https://github.com/electricBonfire/ng2-file-upload-systemjs-quickstart
piyukore06 commented 2016-11-07 15:30:06 +00:00 (Migrated from github.com)
Copy Link
Copy Source

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'
};
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' > }; > ```
👍 1
tsuz commented 2017-01-17 12:35:52 +00:00 (Migrated from github.com)
Copy Link
Copy Source

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

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 commented 2017-12-26 22:57:09 +00:00 (Migrated from github.com)
Copy Link
Copy Source

@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';
@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'; ```
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
dependencies
Pull requests that update a dependency file
 duplicate
enhancement
greenkeeper
help wanted
in progress
invalid
need to reproduce
question
status: pending
wontfix
No labels help wanted
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
allan (Allan) medjedovic (Mihajlo Medjedovic) root sabhas (Sabir Hassan)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#38