Добавить сторонний модуль (angular2-signaturepad) без app.module.ts (Angular 2 / Ionic 2)

Question

У меня возникли проблемы с использованием стороннего модуля под названием angular2-signaturepad. Используя это руководство

В руководстве говорится, что для использования этого модуля необходимо добавить SignaturePadModule в раздел импорта app.module.ts. Однако наш проект (использующий Ionic 2) не имеет и не использует файл app.module.ts. Все наши зависимости живут в наших app.ts, в частности наша функция ionicBootstrap

Поскольку у нас нет файла app.module.ts, я решил добавить SignaturePadModule в app.ts

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

Я создал новый файл TS и шаблонов для своей страницы, чтобы отобразить модуль:

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;
    }`

И добавил следующее в шаблон

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

Мое приложение запускается и успешно развертывается на моем устройстве, но когда я просматриваю нужную страницу, холст или что-либо еще не отображается. Я не получаю никаких ошибок в Инструментах разработчика, и я могу увидеть HTML снова с помощью Инструментов разработчика, но я не знаю, как решить эту проблему

Любые идеи здесь будут полезны, спасибо заранее

Answer 1

Решил проблему; Проект, в котором я работаю, изначально был создан, когда Ionic 2 еще находился в бета-версии, и поэтому различные компоненты были перенесены, например, ionicBoostrap, который больше не используется в кандидате на релиз.

Я решил это, добавив

directives: [SignaturePad]

Компонент декоратор. После добавления этой строки и повторного развертывания я смог рисовать на экране.