jQuery non-angular CLI

Install the package through:

• npm install jquery — save

later in your ./angular-cli.json.

• “scripts”: [ “../node_modules/jquery/dist/jquery.min.js” ] ,

You can also do the same with the bootstrap as an example:

• "scripts": ["../ node_modules / bootstrap / dist / js / bootstrap.js"]

Finally include in your component:

• import * as $ from ‘jquery’;

Obs :. $ will serve as your global reference for Jquery

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");  
        div.animate({left: '100px'}, "slow");
        div.animate({fontSize: '5em'}, "slow");
    });
});
  }

Try it anyway:

npm install jquery --save     

Project Root:

npm install jquery --save

angular-cli.json

  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ]

Ts:

   import $ from "jquery";

stackblitz