Prefect scrollbar is not loading when loaded using angular-cli in angular 4

Question

I'm currently working on a angular 4 project, and i'm using angular cli.

Currently i'm using perfect scrollbar, bootstrap-slider.min.js, d3.js etc which is bundled together.

Problem When we add the script file inside the angular-cli scripts array, it is bundled together, and shown in the browser as script.bundle.js.

Now in script.js file we initialize the prefect scrollbar, but this does not work at all when the page is loaded.

I tried another way was placing the code inside the document ready function, the again ng served and refreshed the page and it worked. But when changed the route and again came back to the same view, it did not worked now, again i have to refresh it to make it work.

I feel once the script code is bundled it is not working, Do you have any solution for this problem.

 "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css",
    "styles.css"   ],   "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js",
    "../node_modules/d3/build/d3.min.js",
    "script.js"   ],

**Script.js**
/******* initializes custom scrollbars on elements *******/

  $(".perfect-scrollbar").each(function() {
      $(this).initCustomScrollbar();
  });

(function($) {

  $.fn.initCustomScrollbar = function() {

    $(this).perfectScrollbar();
  };
})(jQuery);

/******* initializes custom scrollbars on elements *******/
(function($) {

  $.fn.initCustomScrollbar = function() {

     $(this).perfectScrollbar();
      };
})(jQuery);

Answer 1

You need to do this inside the main app component in ngAfterViewInit . It will not work like this .

Check this LINK on how to use Third part js in Angular without typings

Instead you should try and do all the modification AfterViewInit

npm install jquery --save and npm install bootstrap --save
Step two

Add the jquery scripts file in .angular-cli.json file

  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap-v4-dev/dist/js/bootstrap.min.js"
  ],
Step three

Adding a var in component to be used as a global variable

//using external js modules in Angular
declare var $: any;
Then in

ngAfterViewInit(){


        $(".perfect-scrollbar").each(function() {
          $(this).initCustomScrollbar();
      });

    (function($) {

      $.fn.initCustomScrollbar = function() {

        $(this).perfectScrollbar();
      };
    })(jQuery);

    /******* initializes custom scrollbars on elements *******/
    (function($) {

      $.fn.initCustomScrollbar = function() {

         $(this).perfectScrollbar();
          };
    })(jQuery);

}