0

ng2-tel-input intl-tel-input用于在我的应用程序中输入数字。更新所有库和依赖项后,在控制台中出现错误ng serve

我已经使用更新了所有库和依赖项

ng update @angular/cli @angular/cli

我也更新intl-tel-input了库,但问题仍然存在。

包.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)
4

2 回答 2

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”,

于 2020-03-04T06:51:16.817 回答
-1

你的逻辑有错误。错误说:

Cannot use 'in' operator to search for 'intlTelInputUtils' in undefined

所以代码可能是这样的:

"somethingToSearch" in yourVariable

并且 yourVariable 未定义。in 运算符不能对 undefined 执行任何操作。

确保跳过未定义或变量是正确的对象。

于 2019-07-18T10:07:57.683 回答