0

Trying to implement ngx-intl-tel-input. But getting an error.

here is the Stackblitz Link with some package changes.

please follow the versions of ngx-bootstrap, angular, and other related things. I think its a compatibility issue.

Here are my packages:

"dependencies": {
"@angular-devkit/schematics": "0.0.35",
"@angular/animations": "^5.2.11",
"@angular/common": "^5.2.8",
"@angular/core": "^5.2.8",
"@angular/forms": "^5.2.8",
"@angular/http": "^5.2.8",
"@angular/platform-browser": "^5.2.8",
"@angular/platform-browser-dynamic": "^5.2.8",
"@angular/platform-server": "^5.2.8",
"@angular/router": "^5.2.8",
"@nguniversal/express-engine": "^5.0.0-beta.6",
"@nguniversal/module-map-ngfactory-loader": "^5.0.0",
"amazon-cognito-auth-js": "^1.0.0",
"amazon-cognito-identity-js": "^1.21.0",
"angular-in-memory-web-api": "^0.5.1",
"bootstrap": "4.0.0-beta.2",
"core-js": "^2.4.1",
"express-http-proxy": "^1.1.0",
"font-awesome": "^4.7.0",
"google-libphonenumber": "^3.2.6",
"intl-tel-input": "^16.0.7",
"jquery": "^3.2.1",
"ng2-pdf-viewer": "4.1.2",
"ngx-bootstrap": "^3.0.1",
"ngx-cookie-service": "^2.1.0",
"ngx-embed-video": "^0.3.0",
"ngx-intl-tel-input": "^2.0.7",
"ngx-quill": "^3.4.0",
"popper.js": "^1.12.6",
"primeng": "^5.2.4",
"quill": "^1.3.6",
"rxjs": "^5.4.2",
"ts-loader": "^3.5.0",
"typescript-base64-arraybuffer": "^0.1.0",
"zone.js": "^0.8.14"

}

There is an error in the following line (file: node-modules/ngx-intl-tel-input/fesm5/ngx-intl-tel-input.js): 

NgxIntlTelInputService.ngInjectableDef = ɵɵdefineInjectable({ factory: function NgxIntlTelInputService_Factory() { return new NgxIntlTelInputService(); }, token: NgxIntlTelInputService, providedIn: "root" });

The error is: 

Uncaught TypeError: Object(...) is not a function
at eval (ngx-intl-tel-input.js:22)
at eval (ngx-intl-tel-input.js:24)
at Object../node_modules/ngx-intl-tel-input/fesm5/ngx-intl-tel-input.js (vendor.bundle.js:3684)
at __webpack_require__ (inline.bundle.js:55)
at eval (app.module.ts:26)
at Object../src/app/app.module.ts (main.bundle.js:235)
at __webpack_require__ (inline.bundle.js:55)
at eval (main.ts:4)
at Object../src/main.ts (main.bundle.js:3515)
at __webpack_require__ (inline.bundle.js:55)
Abdur Rahim
  • 3,975
  • 14
  • 44
  • 83

1 Answers1

0

Try version 2.0.4 or lower of ngx-intl-tel-input.

First, remove the previous installation and then: 

npm i ngx-intl-tel-input@2.0.4
Abdur Rahim
  • 3,975
  • 14
  • 44
  • 83
Jordi Cuevas
  • 56
  • 4
  • Ok, I will try and discuss it. – Abdur Rahim Nov 19 '19 at 18:10
  • after adding 2.0.4, `SearchCountryField, TooltipLabel, CountryISO` these fields are not found in ngx-intl-tel-input – Abdur Rahim Nov 19 '19 at 19:36
  • look at this stackblitz: https://stackblitz.com/edit/ngx-intl-tel-input-demo?file=package.json – Abdur Rahim Nov 19 '19 at 19:56
  • can you do a ng update on your app ? or maybe try another library instead I'll try to recreate your code in my machine – Jordi Cuevas Nov 19 '19 at 20:16
  • look at the stalkbiz. I am having the same issue in my machine. If we can solve it in stackbiz, then its solved – Abdur Rahim Nov 19 '19 at 20:40
  • Hi , I was trying to fix the stackblitz and I manage to download the version of ngx-intl tel input to 1.0.6 but you get the error with countryISO and all other imports. you have two choices upgrade your angular core or install maybe this NPM https://github.com/kondi0/ng4-intl-phone/ to get it work, – Jordi Cuevas Nov 20 '19 at 13:50