Argthtjtr

In my angular project, when I didn't add jQuery DateTimePicker Clean jQuery DateTimePicker

jQuery was working fine with my angular project. Here's how I have defined it in my project.

lib.ts

declare var jQuery: any;



window['jQuery'] = require('jquery');

window['$'] = window['jQuery'];

and using it in any component like this

account.component.ts

import { Component, AfterViewInit } from '@angular/core'



declare var $ : any;



@Component({

    selector: 'app-account',

    templateUrl: './account.component.html',

    styleUrls: ['./account.component.css']

})



export class AccountComponent implements AfterViewInit {



constructor(){

}



ngAfterViewInit(){

    $(".submitBtn").click(() => {

        $(this).css("color", "red");

    });

}



}

And I am not getting any error on the console. But when did I add jQuery DateTimePicker ( link on the above ) into my project.

package.json

"dependencies": {

  // Other Dependencies //



  "jquery-datetimepicker": "^2.5.20",



  // Other Dependencies //

}

defined it into scripts as part of angular-cli.json

"styles": [

        "styles.css",

        "../node_modules/jquery-datetimepicker/build/jquery.datetimepicker.min.css"

      ],

 "scripts": [

        "../node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.js",

      ],

It started giving me error on the console.

Uncaught ReferenceError: jQuery is not defined

    at scripts.bundle.js:2661

    at scripts.bundle.js:2663

In my template, jQuery DateTimePicker is working absolutely fine when we do

$('#demo').datetimepicker({inline:true,});

But that Reference error is still there on my console , it appears whenever I hit refresh or change any thing inside IDE.

This will help you :

1)Install Jquery Plugin For angular

npm install jquery --save

2)Now in your app.module.ts add

import * as $ from "jquery"