Ionic 5 Angular 9 project doesn't play the functions but does alert from external Javascript Files

Question

Hello i have an Ionic 5 Angular 9 project. I want to call external javascript files. The files are being called as wanted because i put an alert and it shows the alert as wanted but it doesn't call the jquery functions

angular.json

 "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/jquery/dist/jquery.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "src/assets/js/bootstrap.min.js",
          "src/assets/js/custon.js",
          "src/assets/js/charts.js",
          "src/assets/js/colors.js",
          "src/assets/js/filters.js",
          "src/assets/js/global.js",
          "src/assets/js/idangerous.swiper.min.js",
          "src/assets/js/isotope.pkgd.min.js",
          "src/assets/js/jqColorPicker.js",
          "src/assets/js/jquery-2.1.4.min.js",
          "src/assets/js/jquery-ui.js",
          "src/assets/js/jquery-ui.min.js",
          "src/assets/js/jquery.canvasjs.min.js",
          "src/assets/js/jquery.countTo.js",
          "src/assets/js/jquery.easy-autocomplete.min.js",
          "src/assets/js/jquery.mixitup.js",
          "src/assets/js/jquery.viewportchecker.min.js",
          "src/assets/js/magnific.js",
          "src/assets/js/map.js",
          "src/assets/js/script.js",
          **"src/assets/js/sorttable.js",**
          "src/assets/js/wow.js"
        ]

sortable.js

(function($){
alert('welcome');
$.extend({tablesorter:new
function(){var parsers=[],widgets=[];this.defaults= {cssHeader:"header",cssAsc:"headerSortUp",cssDesc:"headerSortDown",cssChildRow:"expand-child",sortInitialOrder:"asc",sortMultiSortKey:"shiftKey",sortForce:null,sortAppend:null,sortLocaleCompare:true,textExtraction:"simple",parsers:{},widgets:[],widgetZebra:{css:["even","odd"]},headers:{},widthFixed:false,cancelSelection:true,sortList:[],headerList:[],dateFormat:"us",decimal:'/\.|\,/g',onRenderHeader:null,selectorHeaders:'thead th',debug:false};function benchmark(s,d).....

Answer 1

You can easily call javascript files by adding it in index.html file.

<script src="/js/sortable.js"></script>

If you want to use your javascript file in ts files

1- Add these exports in test.js file

export { nodes, edges, container, data, options, network };

2- then import it in ts file

import "/js/sortable";

If you want to use jquery elements inside ngOnInit you have to cast it to any.

if (($('#container-mix') as any).length) {
  ($('#container-mix') as any).mixItUp({
    animation: {
      duration: 400,
      effects: 'fade translateZ(-360px) stagger(34ms)',
      easing: 'ease',
    },
  });
}