我正在使用ng2-tel-input intl-tel-input在应用程序中输入数字。更新所有库和依赖项之后，ng serve
我已经使用
更新了所有库和依赖项ng update @angular/cli @angular/cli
我还更新了 intl-tel-input 库，但问题仍然存在。
Package.json
{
"name": "prep-ui",
"version": "0.18.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --port=4200",
},
"private": true,
"dependencies": {
"@angular/animations": "^8.1.1",
"@angular/cdk": "^8.1.0",
"@angular/common": "^8.1.1",
"@angular/compiler": "^8.1.1",
"@angular/core": "^8.1.1",
"@angular/flex-layout": "^8.0.0-beta.26",
"@angular/forms": "^8.1.1",
"@angular/material": "^8.0.2",
"@angular/platform-browser": "^8.1.1",
"@angular/platform-browser-dynamic": "^8.1.1",
"@angular/router": "^8.1.1",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.2",
"@ngtools/webpack": "^1.8.0",
"@ngx-translate/core": "^7.2.0",
"@ngx-translate/http-loader": "^1.0.2",
"@types/jquery": "^3.3.6",
"@types/jsdom": "^12.2.4",
"@types/knockout": "^3.4.54",
"@types/lodash": "^4.14.136",
"@types/parse5": "^5.0.1",
"angular-calendar": "^0.21.0",
"angular-highcharts": "^4.1.0",
"angular2-highcharts": "^0.5.5",
"angular2-http-file-upload": "^1.0.6",
"bootstrap": "^4.3.1",
"childnode-remove": "^1.0.1",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"file-saver": "^1.3.3",
"hammerjs": "^2.0.8",
"highcharts": "^5.0.14",
"highcharts-angular": "^0.1.0",
"html-webpack-externals-plugin": "^3.8.0",
"inputmask": "^4.0.8",
"intl-tel-input": "^16.0.2",
"jquery": "^3.2.1",
"jquery-bar-rating": "^1.2.2",
"libphonenumber-js": "^0.4.48",
"lodash": "^4.17.4",
"moment": "^2.19.1",
"moment-timezone": "^0.5.14",
"ng-sidebar": "^6.0.2",
"ng2-completer": "^1.6.3",
"ng2-nouislider": "^1.7.7",
"ng2-table": "^1.3.2",
"ng2-tel-input": "^2.0.3",
"ng2-webstorage": "^1.8.0",
"ngx-bootstrap": "^2.0.3",
"ngx-filter-pipe": "^1.0.0",
"ngx-order-pipe": "^1.0.3",
"ngx-select-dropdown": "^0.7.0",
"ngx-select-ex": "^3.5.2-ng4",
"nouislider": "^9.2.0",
"print-js": "^1.0.47",
"rxjs": "^6.5.2",
"rxjs-compat": "^6.0.0-rc.0",
"select2": "^4.0.6-rc.1",
"showdown": "^1.7.5",
"source-map": "^0.5.7",
"survey-angular": "^1.0.75",
"survey-knockout": "^1.0.75",
"surveyjs-widgets": "^1.0.75",
"tslib": "^1.9.0",
"webpack-war-plugin": "^1.0.0-beta.3",
"wnumb": "^1.1.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.801.1",
"@angular/cli": "^8.1.1",
"@angular/compiler-cli": "^8.1.1",
"@angular/language-service": "^8.1.1",
"@ngui/scrollable": "^0.9.1",
"@types/highcharts": "^5.0.5",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/knockout": "^3.4.53",
"@types/node": "~6.0.60",
"autoprefixer": "^6.5.3",
"circular-dependency-plugin": "^3.0.0",
"clean-webpack-plugin": "^0.1.16",
"codelyzer": "^5.0.1",
"copy-webpack-plugin": "^4.2.3",
"css-loader": "^3.0.0",
"cssnano": "^3.10.0",
"exports-loader": "^0.6.3",
"file-loader": "^0.10.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-typescript": "^0.8.0",
"html-webpack-plugin": "^3.2.0",
"istanbul-instrumenter-loader": "^2.0.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"less-loader": "^4.0.5",
"postcss-loader": "^3.0.0",
"postcss-url": "^5.1.2",
"protractor": "~5.1.2",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.3",
"script-loader": "^0.7.0",
"source-map-loader": "^0.2.0",
"style-loader": "^0.13.1",
"stylus-loader": "^3.0.1",
"ts-node": "~3.2.0",
"tslint": "^5.18.0",
"typescript": "~3.4.5",
"uglifyjs-webpack-plugin": "^0.4.6",
"url-loader": "^0.5.7",
"webpack": "~4.35.3",
"webpack-auto-inject-version": "^1.2.2",
"webpack-dev-server": "~3.7.2"
}
}
控制台错误：
vendor.js:209114 Uncaught TypeError: Cannot use 'in' operator to
search for 'intlTelInputUtils' in undefined
at m (vendor.js:209114)
at vendor.js:209579
at Object../node_modules/intl-tel-input/build/js/utils.js
(vendor.js:209583)
at __webpack_require__ (runtime.js:85)
at Module../src/app/shared/directives/intl-tel-input.directive.ts
(main.js:11870)
at __webpack_require__ (runtime.js:85)
at Module../src/app/shared/shared.module.ts (main.js:12967)
at __webpack_require__ (runtime.js:85)
at Module../src/app/authentication/authentication.module.ts
(main.js:1078)
at __webpack_require__ (runtime.js:85)
答案 0 :(得分：2)
通过将js包含到angular.json文件中解决了这个问题
"scripts": [
"node_modules/intl-tel-input/build/js/intlTelInput.js",
"node_modules/intl-tel-input/build/js/utils.js"
]
也不要忘记从.. \ src \ app \ shared \ directives \ intl-tel-input.directive.ts中删除
import 'intl-tel-input/build/js/utils';
在“ intl-tel-input”版本中工作正常：“ ^ 12.1.5”，
答案 1 :(得分：0)
您的逻辑有误。错误提示：
Cannot use 'in' operator to search for 'intlTelInputUtils' in undefined
所以代码可能是这样的：
"somethingToSearch" in yourVariable
和yourVariable未定义。 in运算符无法对未定义的内容进行处理。
确保跳过未定义的变量或变量是正确的对象。