jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers. React and Vue components also included.
https://intl-tel-input.com
MIT License
7.69k stars 1.95k forks source link

Issues loading utils script with Angular #1877

Open MarcoGlauser opened 2 days ago

MarcoGlauser commented 2 days ago

Plugin version

v24.7.0

Steps to reproduce

  1. Add the loadUtilsOnInit option in an Angular project with an import to the options
    loadUtilsOnInit: () =>  import('intl-tel-input/build/js/utils.js') 
  2. There is no error but isValid will always be null

Expected behaviour

The utils script should be loaded as expected or an error should be thrown if there was an issue.

Actual behaviour

There is no error thrown in the console. When attempting to load the utils script with angular, this check fails: https://github.com/jackocnr/intl-tel-input/blob/ece711a0b8df4de458f087c2fe2f08432be49aa7/src/js/intl-tel-input.ts#L2155 My guess would be that angular patches the promise, which fails the type check and then the the utils script never gets attached to the instance.

There was no error in the console, which made debugging this quite hard! My guess would be that this line is a bit of an overachiever: https://github.com/jackocnr/intl-tel-input/blob/ece711a0b8df4de458f087c2fe2f08432be49aa7/src/js/intl-tel-input.ts#L922 Thankfully someone reported a similar behaviour in https://github.com/jackocnr/intl-tel-input/issues/1597 that set me on the right track.