Angular 16中国家旗下拉式国际电话输入组件实现难题

我正在Angular 16项目中实现带国家旗帜下拉选择的国际电话输入功能，遇到以下问题：

• 最初使用ngx-mat-intl-tel-input-v16库时，出现样式异常、搜索功能失效的问题
• 更换为ngx-intl-tel-input库后，严格遵循官方文档及示例操作，组件仍无法正常运行

以下是项目的package.json文件内容：

{"name": "tour-expert","version": "0.0.0","scripts": {"ng": "ng","start": "ng serve --proxy-config proxy.conf.json","build": "ng build","watch": "ng build --watch --configuration development","test": "ng test"},"private": true,"dependencies": {"@angular/animations": "^16.1.0","@angular/cdk": "^16.1.3","@angular/common": "^16.1.0","@angular/compiler": "^16.1.0","@angular/core": "^16.1.0","@angular/flex-layout": "^15.0.0-beta.42","@angular/forms": "^16.1.0","@angular/material": "^16.2.12","@angular/material-moment-adapter": "^16.2.14","@angular/platform-browser": "^16.1.0","@angular/platform-browser-dynamic": "^16.1.0","@angular/router": "^16.1.0","@fortawesome/fontawesome-free": "^6.4.0","@fullcalendar/angular": "^6.1.10","@fullcalendar/core": "^6.1.10","@fullcalendar/daygrid": "^6.1.10","@fullcalendar/interaction": "^6.1.10","@fullcalendar/timegrid": "^6.1.10","angular-file-saver": "^1.1.3","awesome-phonenumber": "^3.3.0","bootstrap": "^5.2.3","google-libphonenumber": "^3.2.34","intl-tel-input": "^17.0.3","libphonenumber-js": "^1.10.59","luxon": "^3.4.3","ng-multiselect-dropdown": "^1.0.0","ngx-bootstrap": "^11.0.2","ngx-mat-intl-tel-input-v16": "^16.0.3","@angular-material-extensions/select-country": "^2.2.0","ngx-material-timepicker": "^13.1.1","rxjs": "~7.8.0","tslib": "^2.3.0","zone.js": "~0.13.0"},"devDependencies": {"@angular-devkit/build-angular": "^16.1.3","@angular/cli": "~16.1.3","@angular/compiler-cli": "^16.1.0","@types/file-saver": "^2.0.7","@types/jasmine": "~4.3.0","jasmine-core": "~4.6.0","karma": "~6.4.0","karma-chrome-launcher": "~3.2.0","karma-coverage": "~2.2.0","karma-jasmine": "~5.1.0","karma-jasmine-html-reporter": "~2.1.0","typescript": "~5.1.3"}}

我参考的是ngxs-intl-tel-input的官方文档，恳请协助排查问题。

内容的提问来源于stack exchange，提问作者Rafi