Include JQuery-Ui in Angular 7 project for external .js file

Question

I have an Angular 7 project and I am trying to include the JQuery-Ui plugin. I have both JQuery and the plugin installed and added to scripts array in angular.json. I have all of my JQuery functions in a jquery.js file i have added to assets folder and imported said file into my component.ts file. JQuery is working but i am not able to use plugin functions. I tried importing 'jquery-ui' to jquery.js file as well with no positive results. Any assistance is greatly appreciated.

angular.json

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

jquery.js

import * as $ from 'jquery';

$(document).ready(function(){

$('#page_top').children().hover(
    function(){
        $(this).animate({color: 'red'}, 200)
    },
    function(){
        $(this).animate({color: 'blue'}, 200)
    }
);

})

Answer 1

What errors are you getting? Is your index.html including jQuery? From what i remember if you include it in scripts it will automatically do that for you. If you go that route, you can do

//component.ts
declare var $; //you can now use $ just like normal jQuery
@Component({})

I generally don't use jQuery with Angular, but had to do this in the past for a project.