Add a third-party module (angular2-signaturepad) without app.module.ts (Angular 2 / Ionic 2)

Ionic Framework ionic-v3
1

I’m having some trouble with using a third-party module called angular2-signaturepad. Using this guide

The guide states that in order to use this module, you have to add SignaturePadModule to the imports section of app.module.ts. However, our project (using Ionic 2) does not have or use an app.module.ts file. All of our dependencies live in our app.ts, specifically our ionicBootstrap function

Since we don’t have the app.module.ts file, I decided to add the SignaturePadModule to app.ts

ionicBootstrap(MyApp, [ disableDeprecatedForms(), provideForms(), DataService, UploadService, StorageService, ConnectionService, HTTP_PROVIDERS, ActionSheetController, AlertController, Device, Diagnostic, LoggingService, SettingsService, SnaggingService, **SignaturePadModule**, provide('Storage', { useClass: Storage })] );

I’ve created a new ts and template files for my page to display the module:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams, ActionSheetController, ToastController, PopoverController, ViewController } from 'ionic-angular';
import { Toast, Camera, DatePicker } from 'ionic-native';

import { DataService } from '../../services/data.service';
import { SnaggingService } from '../../services/snagging.service';
import { StorageService } from '../../services/storage.service';

import { SignaturePad } from 'angular2-signaturepad/signature-pad';

@Component({
    templateUrl: 'build/pages/test-signature/signatures.html',
})

export class SignaturesPage {

    signature = "";
    isDrawing = false;

    @ViewChild(SignaturePad) signaturePad: SignaturePad;
    private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
        'minWidth': 5,
        'canvasWidth': 500,
        'canvasHeight': 300
    };

    constructor(public navCtrl: NavController) {

    }

    drawComplete() {
        this.isDrawing = false;
    }

    drawStart() {
        this.isDrawing = true;
    }`

And added the following onto the template

<ion-header>
  <ion-toolbar>
    <ion-navbar>
      <ion-title>
        Signatures
      </ion-title>
    </ion-navbar>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  Please provide a signature please
  <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
  <canvas id="" width="300" height="200"></canvas>
</ion-content>

My app starts up and deploys to my device successfully, but when I browse to the page in question, no canvas or anything is displayed. I don’t get any errors on Developer Tools and I can see the HTML for again using Developer Tools, but I don’t know how to overcome this issue

Any ideas here would be helpful, thanks in advance

2

I would suggest refactoring your app to align with current Ionic and Angular coding conventions (IOW, make an app module).

3

We managed to resolve it late yesterday, by adding it into a directive which resolved the issue. But yeah we need to align with the latest!

4

@bengrah …you have solution to this task ?? "how to add/set image on signature pad because i want to draw on image not on signature -pad "please help me …i can show you my code if required

5

Hi there,

In the end we just added it to the app.ts file, specifically into the ionicBootsrap function. I imported the module into app.ts and added it to ionicBootstrap which solved the issue,