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

Question

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

Answer 1

Solved the issue; the project I'm working in was originally created when Ionic 2 was still in beta, and as such, various components have moved on such as ionicBoostrap which is no longer used in the release candidate.

I resolved this by adding

directives: [SignaturePad]

to the Component decorator. After adding this one line and redeploying, I was able to draw on screen.