TypeError: elm.intlTelInput is not a function

haneefatel commented 7 years ago

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 …

AzrizHaziq commented 7 years ago

Hello @haneefatel, If you found the solution, would you share it here. Thanks in advanced

haneefatel commented 7 years ago

No, I couldn't find the solution. Most of the answers posted on this issue is pointing to the order of jQuery loads in the application https://github.com/hodgepodgers/ng-intl-tel-input/issues/39

I checked and confirmed that jQuery is loaded in my application before angular loads & jqLite is not. See above console.

SyntaxStacks commented 7 years ago

@haneefatel do you have a github repo where i can review how the code is being used?

haneefatel commented 7 years ago

@SyntaxStacks I don't have a github repo for this project as it is coded for organization and they have their own server to deploy the code. The project configured using webpack and gulp. My webpack.js contains // Global jQuery for AngularJS new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), this loads jQuery, it is confirmed.

SyntaxStacks commented 7 years ago

It's hard to say without context. If you're using jquery in place of jqlite, providing jqLite: 'jquery' in the webpack.ProvidePlugin will define that for you, but could cause have unintended consequences

rajraja commented 7 years ago

alejandromagnorsky commented 7 years ago

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.

GLoganDR commented 7 years ago

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.

alejandromagnorsky commented 7 years ago

I got the utils file from: bower_components/intl-tel-input/build/js/utils.js

GLoganDR commented 7 years ago

I understand that, I am just stating that the actual documentation for this should be updated to tell people how to make this work. I would not have known to get that file without reading open issues. You also need the flag images and the css from intl-tel-input as well.

alejandromagnorsky commented 7 years ago

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

thesimpleg5 commented 7 years ago

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

jak3n3 commented 7 years ago

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

atifsaddique211f commented 6 years ago

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>

SaraiDuek commented 6 years ago

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 Githubissues.

Githubissues is a development platform for aggregating issues.

hodgepodgers / ng-intl-tel-input

TypeError: elm.intlTelInput is not a function #75