Adding angular2-signaturepad to systemjs.config file

[technamrit]

Hi Everyone, This package works well with Angular CLI but I want to use this package in my Angular 4.X project which is based on Angular Quickstart and that uses systemjs.config file to register packages. Could you please tell me how do I add this to systemjs.config file ? Following is code of my systemjs.config file (` (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'https://unpkg.com/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app',

        // angular bundles
        '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
        '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
        '@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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
        '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
        '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
        'ng2-auto-complete': 'npm:ng2-auto-complete/dist/ng2-auto-complete.umd.js',
        'ng2-bootstrap-modal': 'npm:ng2-bootstrap-modal',
        'angular2-busy': 'npm:angular2-busy',
        'file-saver':'npm:file-saver',
        // other libraries
        'rxjs': 'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './app.main.js',
            defaultExtension: 'js',
        },
        rxjs: {
            defaultExtension: 'js',
            main: 'Rx.js'
        },
        'ng2-bootstrap-modal': {
            main: 'index.js',
            defaultExtension: 'js'
        },
        'angular2-busy': {
            main: './index.js',
            defaultExtension: 'js'
        }
    }
});

})(this);`)

I tried to add this as follows -- Under map - 'angular2-signaturepad':'npm:angular2-signaturepad' Under Packages - 'angular2-signaturepad': { main: './index.js', defaultExtension: 'js' }

But then it throws error as "localhost:3000/signature_pad" not found Any help would be appreciated. A working example or plunk would be of great help.

[lathonez]

Hey,

We recommend using ng-cli (as is recommended by the angular team).

If you insist on using something else. you'll need to raise issues on that repo. Your problem is "I don't know how to include modules with angular quick start".

StackOverflow is the appropriate resource for these kinds of questions isn't it?

See also #12.

[wulfsolter]

Impressive. Most impressive. Obi-Wan has taught you well. You have controlled your fear. Now, release your anger. Only your hatred can destroy me

[cyberjared]

Don't forget that signature_pad is a dependency of this project, so you have to add that also

[animishas]

@technamrit : Were you able to resolve this issue? I am kinda having the same issue and I am using angular quickstart. Please reply. thanks

[smuthuvels]

I was getting some exception while using "angular2-signaturepad" package. So i have tried to "angular2-signature-pad" package. its working for me. Package.json: "angular2-signature-pad": "1.0.2"

system.config.js

 map: {
            'angular2-signature-pad': 'npm:angular2-signature-pad/bundles/angular2-signature-pad.umd.min.js',
            'signature_pad': 'npm:signature_pad'
},
packages: {
            'angular2-signature-pad': { main: '', defaultExtension: 'js' },
            'signature_pad': { main: 'dist/signature_pad', defaultExtension: 'js' }
}

app.module.ts

import { SignaturePadModule } from 'angular2-signature-pad';

@NgModule({
    imports: [
SignaturePadModule]
})

test.ts: import { SignaturePadModule } from 'angular2-signature-pad';

```

onSaveHandler(data: any) { console.log(data); }

onClearHandler() {
    console.log('On Clear click');
}

**test.html:**
<signature-pad (onSave)="onSaveHandler($event)"
                                       (onClear)="onClearHandler()"
                                       [width]="500"
                                       [height]="300"
                                       [hideFooter]="false"
                                       [label]="label"></signature-pad>

Reference URL: [(https://next.plnkr.co/edit/32nEL74I48dDDWermSWQ?p=preview&utm_source=legacy&utm_medium=banner&utm_campaign=next&preview)]

[chirag115]

If anyone still using SystemJS, Following is my solution:

map: {
    'angular2-signaturepad': 'npm:angular2-signaturepad/bundles/angular2-signaturepad.umd.js',
    'signature_pad': 'npm:signature_pad/dist/signature_pad.js'
}
packages: {
    'angular2-signaturepad': { defaultExtension: 'js', format: 'cjs'  },
    'signature_pad': { defaultExtension: 'js' }
}