External scripts not loading dynamically in angular 5

Question

I have included the external scripts in .angular-cli.json file in the scripts property i.e.

`

"scripts": [
      "../src/assets/plugins/jquery/jquery.min.js",
      "../src/assets/plugins/popper/popper.min.js",
      "../src/assets/plugins/jquery-blockui/jquery.blockui.min.js",
      "../src/assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
      "../src/assets/plugins/datatables/jquery.dataTables.min.js",
      "../src/assets/plugins/datatables/plugins/bootstrap/dataTables.bootstrap4.min.js",
      "../src/assets/js/pages/table/table_data.js",
      "../src/assets/js/app.js",
      "../src/assets/js/layout.js",
      "../src/assets/js/theme-color.js",
      "../src/assets/plugins/material/material.min.js",
      "../src/assets/js/pages/ui/animations.js",
      "../src/assets/plugins/bootstrap/js/bootstrap.min.js",
      "../src/assets/plugins/bootstrap-inputmask/bootstrap-inputmask.min.js",
      "../src/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js",
      "../src/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker-init.js",
      "../src/assets/plugins/jquery-tags-input/jquery-tags-input.js",
      "../src/assets/plugins/jquery-tags-input/jquery-tags-input-init.js",
    ],`

when the angular app is started, all the scripts are loaded. but when I switch to another page, the scripts do not load.

funkizer · Accepted Answer · 2018-04-09 17:28:38Z

0

Angular is for single page apps, technically you'll never switch a page when in an ng app, as long as you use the router correctly. All scripts get bundled together, added to index.html by Webpack and only ever loaded once when index.html is loaded.

answered Apr 9, 2018 at 17:28

funkizer

4,9271 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Bilalwcheema Over a year ago

yes I can understand your point, what I mean is when the app is first loaded and is on index route i.e. '/' all the scripts are loaded for example datatable script. But when I switch to another page lets say '/page2', the page contents load dynamically, but the scripts do not.

funkizer Over a year ago

That's how a SPA works: Scripts are only loaded once. If you're trying to execute some external JS on every router navigation, it can't be done this way. You should dive deeper into Angular and learn try to do everything inside Angular instead.

Bilalwcheema Over a year ago

if that is the case then how come scripts are not loading on navigation? I'm saying that scripts are loaded initially but when I change the route, it disappear.

Bilalwcheema Over a year ago

I want them to be loaded for every route when I click to another route as one of my pages has datatables which require script.

funkizer Over a year ago

Trust me, if you take the time to really learn what angular is about and forget the "old way" of doing things, and start to think the angular way, you won't regret it later. :)

|

Collectives™ on Stack Overflow

External scripts not loading dynamically in angular 5

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related