Angular with jQuery -> Issue

Felipe 0liveira

unread,

Aug 29, 2018, 10:46:48 AM8/29/18

to Angular and AngularJS discussion

Hey guys, what's going on?

I have a Angular 5 project which imports on index.html my modified jQuery lib from my repository! It's in a script:src's tag on index.html:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My Application</title>

  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <link rel="stylesheet" href="https://myrepo/css/animate.min.css">
  <link rel="stylesheet" href="https://myrepo/css/bootstrap-theme.css">
  <link rel="stylesheet" href="https://myrepo/css/bootstrap.min.css">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  
</head>

<body>
  <app-root></app-root>

  <script src="https://myrepo/js/jquery.min.js"></script>
  <script src="https://myrepo/js/popper.min.js"></script>
  <script src="https://myrepo/js/bootstrap.min.js"></script>
</body>

</html>

I'm using at this way because I can't import a script on .angular-cli.json file by a link, right?

To work with jQuery on Angular I just needed to add:

declare var $: any;

at the top of the component that I want to use jQuery!

Buuuuuuuuuuuut, when I run the angular unit test script ng test, I get several errors because jQuery is not know!

Then I installed jQuery from NPM in the project and I have imported to project scripts and Success! The test Run!

BUUUUUUUUUT all jQuery functions in application stop working!

DAAAAAMMMM!

What do I have to do?

Stéphane Ancelot

unread,

Sep 4, 2018, 4:06:26 AM9/4/18

to Angular and AngularJS discussion

JQuery and angular are two kinds of technology I would never mix.

You should consider JQuery deprecated.

khushbu poddar

unread,

Sep 4, 2018, 6:24:44 AM9/4/18

to ang...@googlegroups.com

Hello,

To include JQuery in your angular application, I have added jquery file path in angular-cli.json file (apps.scripts)

{
  XXXXXXXXXX
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "assets/img/favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "global-types": "global-types.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [        
        "../node_modules/jqueryui/jquery-ui.css"  
      ],
      "scripts": [
        "assets/js/bootstrap/jquery-3.2.1.slim.min.js",
        "assets/js/bootstrap/popper.min.js",
        "../node_modules/jquery/dist/jquery.min.js",
        "assets/js/bootstrap/bootstrap.min.js",       
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {
      "spec": false
    }
  }
}

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

ACHARYA ANIL KUMAR

unread,

Sep 4, 2018, 10:11:30 AM9/4/18

to ang...@googlegroups.com

Hi firstly use should use rendere2 instead of angular but if u don’t want so use declare global. Variable for jQuery then use

--

Thanks and Regards

Anil Kumar

S/W Engineer | Patanjali Social Activist | Speaker |Yoga Trainer

Mob:- +918930068008

My Social Media Links

Facebook:- https://www.facebook.com/acharyaks90

Twitter:- https://twitter.com/acharyaks90

Github:- https://github.com/acharyaks90

LinkedIn:- https://www.linkedin.com/in/acharyaks90/

Reply all

Reply to author

Forward