ng-intl-tel-input: TypeError: elm.intlTelInput is not a function

I have following error, and I checked the order of loading jQuery and angular. It is fine(jQuery loads first) as I have used webpack provide plugin to use jQuery instead jqLite. Please see the console below

<input type=“{{type}}” ng-intl-tel-input=“” ng-blur=“onBlur()” ng-change=“onChange()” ng-model=“value” ng-model-options=“ngModelOptions” ng-disabled=“disabled” ng-readonly=“checked” “=”" class=“ng-pristine ng-untouched ng-valid”>`

jqLite VM4267:1 Uncaught ReferenceError: jqLite is not defined(…)(anonymous function) @ VM4267:1

$ $(selector, [startNode]) { [Command Line API] } angular.element ( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return …

About this issue

Original URL
State: open
Created 8 years ago
Comments: 20 (2 by maintainers)

Most upvoted comments

The key is to include jQuery before Angular. Also, make sure to include intl-tel-input.min.js and utils.js from https://github.com/jackocnr/intl-tel-input and the css/img files.

alejandromagnorsky on Dec 16, 2016

I had to include all the following dependencies in given order for it to work for me.

<link rel="stylesheet" href="bower_components/intl-tel-input/build/css/intlTelInput.css"> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/ng-intl-tel-input/dist/ng-intl-tel-input.js"></script> <script src="bower_components/intl-tel-input/build/js/intlTelInput.js"></script> <script src="bower_components/intl-tel-input/build/js/utils.js"></script>

atifsaddique211f on Sep 19, 2017

Add utils.js in scripts,

`"scripts": [ 
              "node_modules/intl-tel-input/build/js/utils.js"
            ]`

in angular.json file. This will solve your issue.

goto angular.json file
look for scripts
add “node_modules/intl-tel-input/build/js/utils.js” inside the scripts along with the intlTelInput.min.js / intlTelInput.js
save
refresh your application

amalmohann on Feb 4, 2021

Add “scripts”: [ “node_modules/intl-tel-input/build/js/utils.js” ] in angular.json file. This will solve your issue.

amalmohannS on Feb 4, 2021

I agree that either the documentation should mention it, or they should be included in the downloaded bower/npm package.

alejandromagnorsky on Dec 21, 2016

Had same issue, using webpack. Had to configure ProvidePlugin like this:

new webpack.ProvidePlugin({ $: ‘jquery’, ‘window.jQuery’: ‘jquery’})

Note the ‘window.jQuery’, not just ‘jQuery’!

See here for explanation:

http://stackoverflow.com/questions/36065931/webpack-how-to-make-angular-auto-detect-jquery-and-use-it-as-angular-element-in

jak3n3 on Jan 6, 2017

had this issue today. i had to place jquery before angular and then it worked.

thesimpleg5 on Jan 3, 2017

Not Angular related but this issue (top comment) helped me. I’m using webpack and had the same problem (…not a function) with several components i was trying to use. Seams like webpack is giving me a hard time with everything…

Since i’m using webpack, and rely on requires instead of <script> tags, it’s hard to know the order of things (or sometimes, what the hell is going on), so i reference the js and css files from the intl-tel-input npm package directly, and added this code at the top of my main js file (the js entry point to webpack):

require('!style-loader!css-loader!intl-tel-input/build/css/intlTelInput.css');
require('intl-tel-input/build/js/utils.js');
module.exports = require("intl-tel-input/build/js/intlTelInput.js");

Adding the require of the js file to exports did the trick for me. Hope this helps.

SaraiDuek on Feb 11, 2018

There is absolutely nothing in the documentation about using the utils.js file. I understand that it’s necessary, but where am I supposed to get it, why isn’t it included or referenced in any way throughout the documentation, and how was anyone to know without looking through “open issues?” No offense, I’m just confused about why this wouldn’t have been previously brought up in some way.

GLoganDR on Dec 19, 2016