Using Angular library in ionic 3 project

Ionic Framework ionic-v3
1

I’m trying to use ngx-country-picker
what I’ve done

npm install ngx-country-picker --save

then import library in the app.module

import { CountryPickerModule } from 'ngx-country-picker';


imports: [
    BrowserModule,
    // Import here
    CountryPickerModule
  ],

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  
  <country-picker [flag]="false" ></country-picker>

</ion-content>

but i get runtime error.

I’m okay using ionic and all its components, but I’m struggling at every time I want to use external libraries in an ionic project :frowning:

2

Which error? Text, not screenshot.

3

can you give a Screen shot plz ,
but just in case you can begin with checking the path to this module if it’s ok or not

4

I have the same issue with a different library. In my case, it’s ngx-kjua.

I followed the instructions provided on this page: https://www.npmjs.com/package/ngx-kjua

In app.module.ts, I added this line to import the library:

import { NgxKjuaModule } from 'ngx-kjua';

I also added NgxKjuaModule to the imports section of the @NgModule.

My app includes a page called “barcode”.

In barcode.ts, I included this line to import the library into the page:

import { NgxKjuaModule } from 'ngx-kjua';

And I included this line in my constructor declaration:

public ngxKjuaModule: NgxKjuaModule,

In barcode.html, my ion-content tag has this content:

  <div class="wrapper">
    <ngx-kjua [text]="ticket.serialnumber"></ngx-kjua>
  </div>

The application can be built with no issues, but I do get runtime errors when I try to load the barcode page.

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'text' since it isn't a known property of 'ngx-kjua'.
1. If 'ngx-kjua' is an Angular component and it has 'text' input, then verify that it is part of this module.
2. If 'ngx-kjua' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    <ngx-kjua [ERROR ->][text]="ticket.serialnumber"
"): ng:///BarcodePageModule/BarcodePage.html@24:6

Are there any ionic-specific instructions I need to follow to complete this integration process?

5

This is the key piece. You need to add NgxKjuaModule to the imports section of BarcodePageModule. That’s also probably the only place it needs to be, meaning you can take it out of the app module. You can definitely get rid of all the stuff in barcode.ts; it makes no sense.

1 Like
6

Many thanks. That’s exactly what I was missing. It works like a charm now.