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

Question

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

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

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

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

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

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]

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