1

I am creating an ionic 2 app. I am a new angular 2 developer, so sorry if I miss some things. I want to include jQuery and other js files to page components.

I used this method: 

import { Component } from '@angular/core';
import '../../assets/js/jquery-2.1.1.js';
import '../../assets/js/prog-bar.js';
import '../../assets/js/myApp.js';
import { NavController } from 'ionic-angular';

okay it loaded the files but it gives me error

Uncaught ReferenceError: $ is not defined.

So I tried to include jquery lib :

npm install @types/jquery --save-dev

but I don`t know what to do next. how to use Jquery lib in my app in a good way, please don't tell me to add the script tag to the index.html page because it is being removed every time I rerun the app.

Improve this question
1

2 Answers 2

Reset to default
2 
import $ from 'jquery';

The above should work if you have done this:

System.config({
defaultJSExtensions: true,
paths: {
    // paths serve as alias
    'npm:': 'node_modules/'
},
map: {
    'app':  'app',
    jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js',
    material: 'npm:material-design-lite/dist/material.min.js',

    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    ....
},
packages: {
    app: { main: 'main', format: 'register', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' }
},
});

Also don't forget you should have a typings.json that points to your jquery typing file.

Just a note, if you don't find the system.config.js file then look for a webpack file to change. If you find one, webpack.config.js just add this to it:

plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' }) ]

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

don't you have a systemjs.config.js file? If you don't see it, then I think Ionic might have moved to webpack
no i don`t i just created an app as the ionic 2 docs said , i didn't include any files .
so sorry for being idiot :( . but i find more than webpack file . so please can u provide full path or at least the file extension
2

It can be done in following ways.

  1. Optimum - Importing it in your component file.

    • Install jQuery and its typings - npm install jquery --save npm install @types/jquery --save-dev

    • Import it in top of your *.component.ts using any of followings -

      • import * as $ from 'jquery';.
      • OR - import 'jquery'; and declare both of these (as global variables) -
        • declare let $:any;
        • declare let jQuery:any;

  2. Not optimum - You can also include jQuery CDN link in the head of index.html present under src/ folder of your root project.

Also, in Ionic, the webpack.config.js file is present under node_modules folder which will get replaced after doing npm install.

Improve this answer

3 Comments

But how do I go about this @SujitKumarSingh, I still get Runtime Error jQuery is not defined. I as well don't get what you meant by declare let $:any declare let jQuery:any. Under what black do I define then in ts file?
By the 1st method import * as $ from 'jquery', I am importing everything from jQuery libraru as $. But that may not be always useful because there are few libraries using jQuery instead of $. Thus I mentioned 2nd option too which imports jQuery and then declares variables used in it. import 'jquery', declare let $:any; and declare let jQuery:any will be one after another in 3 lines of code (in sequence). By doing this you are basically defining 2 new variables $ and jQuery of any data type.
If you are adding/importing external jQuery plugin then point 1 will not work. It will give Error: jQuery is not defined pointing to the imported jQuery plugin file. For that I have asked similar quetion here and in Ionic forum. For that situation I have mentioned to include jQuery CDN link under header of index.html in point 2, which is main template for angular app.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.