How to declare a Custom Directive in RC0?

Ionic Framework ionic-v3
1

Has anyone successfully integrated any custom directives into their ionic-RC0 app yet?

I’m currently using SignaturePad. I used to have the below code in one of my components:

@Component({
  directives: [SignaturePad]
})

After upgrading to RC0, the problem is that (I believe) directives has been deprecated in @Component, and now we’re supposed to declare any new custom directives in app.module.ts, like below:

@NgModule({
  declarations: [SignaturePad],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

The thing is, this doesn’t actually work as intended, despite this being the answer I saw on stackoverflow. It works if I run my app in the web browser, but if I do ionic build ios, I get the following error in my Terminal:

ngc error: Error: Unexpected value 'SignaturePad' declared by the module 'AppModule'

Any help on how to integrate Custom Directives/SignaturePad is greatly appreciated!

1 Like
2

You have a typo in @NgModule schema declaration

Its should be

schemas: [ CUSTOM_ELEMENTS_SCHEMA ] <— ( schema -> schemas )

Also make sure you import - CUSTOM_ELEMENTS_SCHEMA
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from ‘@angular/core’;

Also see more details in this stackoverflow post - (this solution helped me with a problem that I was unable to solve for last 3 days)

The http://stackoverflow.com/questions/39428132/custom-elements-schema-added-to-ngmodule-schemas-still-showing-error

3

Hey thanks so much for the help!

Sorry, I looked at my code and it looks like I actually do have schemas instead of schema. I’ll modify my question details so that there’s no confusion later on.

I’ll take a look at your link and see if that helps!

4

Hi @rajpatangay

I have exact the same issue. Can you provide us with an example?

@jourdan, can you please share if you find a solution for this problem. It’s very annoying :slight_smile:

Thanks

5

Hey @kabus, is your issue exactly with SignaturePad as well or another 3rd party library?

6

No, i’m also using angular2-signaturepad

7

So, I had to stop using angular2-signaturepad for now and just use the signature_pad.min.js library that it’s wrapped around; until angular2-signaturepad is able to support AoT compiling (which I believe was why the ngc compiler couldn’t compile SignaturePad.)

So, I ended up doing the following:

  1. Import <script type="text/javascript" src="assets/js/signature_pad.min.js"></script> in index.html
  2. In the .ts file that I used the SignaturePad on, I put the following:
ionViewDidEnter() {
    let canvas        = document.getElementById('signature-pad');
    this.signaturePad = new SignaturePad(canvas);
  }
  1. In the same .ts file at line #1, I put the following (the TS won’t compile without this):
declare var SignaturePad: any;
  1. In the HTML file, I put:
<canvas id="signature-pad"></canvas>
  1. Copy signature_pad.min.js from https://github.com/szimek/signature_pad into a assets/js folder

I believe that’s all I needed to do in order to make it work. Let me know if that helps or if you have any questions (it’s possible I might’ve forgot about a step :D)

But I prefer not doing it this way and using the angular2-signaturepad library instead like I did previously, but I couldn’t figure out a workaround in a reasonable amount of time

1 Like
8

Here’s the link that has code and also the solution.

The angular - CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing Error - Stack Overflow

Basically my situation was that I was using my custom component which was giving error and the solution from the link helped me. (your situation may be different but this solution may or may not help you)

2 Likes
9

Thanks @jourdan, workaround is working :slight_smile:

1 Like
10

Yes this helped me as well.

Finally had success importing the angular2-swing directives needed to implement the tinder style cards in Ionic 2 RC0, as described in https://devdactic.com/ionic-2-tinder-cards/#disqus_thread

Thanks!

1 Like
11

Thanks @jourdan , got workaround from your solution.

1 Like