CODEWITHSUNDEEP
angular
sentinel
sentinel

Reputation: 41

Angular 5 ngx-intl-tel-input error

I'm trying to use https://www.npmjs.com/package/ngx-intl-tel-input, I have my module.ts with: 

import {NgxIntlTelInputModule} from "ngx-intl-tel-input";
import {BsDropdownModule} from "ngx-bootstrap";
@NgModule({
    imports: [
        NgxIntlTelInputModule,
        BsDropdownModule.forRoot()
    ],

and html code:

<h1>
        {{phone_number}}
</h1>
<ngx-intl-tel-input [(value)]="phone_number"></ngx-intl-tel-input>

but all the time I receive following error:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(...)[BsDropdownDirective -> ComponentLoaderFactory]: StaticInjectorError(Platform: core)[BsDropdownDirective -> ComponentLoaderFactory]: NullInjectorError: No provider for ComponentLoaderFactory! Error: StaticInjectorError(...)[BsDropdownDirective -> ComponentLoaderFactory]: StaticInjectorError(Platform: core)[BsDropdownDirective -> ComponentLoaderFactory]:

Upvotes: 1

Views: 16431

Answers (3)

Usman Khalid
Usman Khalid

Reputation: 170

Hope This helps

In App.module

import { NgxIntlTelInputModule } from 'ngx-intl-tel-input';
imports: [
   
    NgxIntlTelInputModule
]

In your component html :

  <ngx-intl-tel-input [preferredCountries]="['es']" [enableAutoCountrySelect]="true" name="phoneNumber"
              formControlName="phoneNumber" [(ngModel)]="phoneNumber"></ngx-intl-tel-input>

Upvotes: 0

Suraj Mathe
Suraj Mathe

Reputation: 95

You can use this plugin - intl-input-phone.

npm i intl-input-phone

See the NPM link for more information npm

GitHub Link

Demo Link 1

Demo Link 2

Upvotes: 1

Abdul Rafay
Abdul Rafay

Reputation: 3391

I managed to fix it by going to index.js file in

node_modules\ngx-intl-tel-input

and in this section

NgxIntlTelInputModule.decorators = [{
    type: NgModule,
    args: [{ imports: [ CommonModule, FormsModule, BsDropdownModule ], ...

I changed BsDropdownModule to BsDropdownModule.forRoot()

P.S Don't forget to call ng serve again after you make this change.

This is of course a patch and should be still fixed in this package otherwise, once package is updated, changes will be overriden.

Upvotes: 2

Related Questions