I'm using Angular version 17 and the plugin works fine on laptop / desktop, but then on iphone it causes a white screen

[tc-mark]

Is this plugin compatible with Angular 17 for mobile?

Its strange how it works on desktop

[terence1990]

I fixed it this way:

const getCountries = async () => {
  const Country = await import('country-state-city/lib/country');
  const {getAllCountries} = Country.default;
  return getAllCountries().sort((a, b) => a.name.localeCompare(b.name));
};

const getCities = async (country: string, state?: string) => {
  const City = await import('country-state-city/lib/city');
  const {getCitiesOfState, getCitiesOfCountry} = City.default;
  return state ? getCitiesOfState(country, state) : getCitiesOfCountry(country) ?? [];
}

Since it's now async, becomes troublesome as need to run a side affect in react, so used a hook:

import { ICity, ICountry, IState } from 'country-state-city/lib/interface';

export const useCountriesAndCities = (props?: {
  country?: string,
  state?: string
}) => {
  const [countries, setCountries] = useState<ICountry[]>([]);
  const [cities, setCities] = useState<ICity[]>([]);

  useEffect(() => {
    getCountries().then(setCountries);
  }, []);

  useEffect(() => {
    if (props?.country && props?.state) {
      getCities(props.country, props.state).then(setCities);
    }
  }, [props?.country, props?.state]);

  const phoneCodes = useMemo(() => countries
    .map((country) => ({
      value: country.phonecode.startsWith('+')
        ? country.phonecode
        : `+${country.phonecode}`,
      label: `${country.flag} ${
        country.phonecode.startsWith('+')
          ? country.phonecode
          : `+${country.phonecode}`
      }`,
    }))
    .filter((a, i, arr) => arr.findIndex((b) => b.value === a.value) === i), [countries]);

  return {
    countries,
    cities,
    phoneCodes
  };

};

Related:
#184
#123