angular-cli: Scripts not loading from angular.json file

Try move this scripts to src/assets/ folder and change all url like “src/assets/node_modules/jquery/dist/jquery.js”

Solution (hidden from view)

Hello All: When you add a script or style to the angular.json file in angular@6+ (or in angular-cli.json in angular@5orEarlier), the expected results is that those js files whether they are bootstrap.min.css or jquery.min.js will get processed and combined into the new style.js or scripts.js files.

When you examine those files (style.js or scripts.js)… you will notice the derivatives of the files such as bootstrap.min.css or jquery.min.js will be in them.

This is by design. If you examine the contents of either style.js or scripts.js and you fail to see the content block - then you need to investigate further.

Hope this helps clarify the issue. I believe this issue can be closed.

So with Angular we can’t load any external js file when we create a routing project because after the first routing change all the scripts are “destroyed” and not loaded again ?..

Angular is a framework for Single Page Applications (SPAs). When using a SPA, parts of your DOM and added and deleted at runtime, without a page reload.

@cactusjack66’s repro uses some bootstrap scripts:

            "scripts": [
              "node_modules/admin-lte/bower_components/jquery/dist/jquery.min.js",
              "node_modules/admin-lte/bower_components/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/admin-lte/dist/js/adminlte.min.js"
            ]

The way these work is by looking up the DOM, finding elements with certain CSS or ids, and attaching behaviour to them. This happens only when on the initial load because that’s how script tags work in HTML.

Let’s think about the order of these things. First you load your app, then angular takes over and renders your initial components, and then bootstrap sees these components and attaches some behaviour to them. At this point bootstrap has finished running.

When you then go to another route, the original component is removed from the DOM and the new one added. Bootstrap doesn’t run again, because scripts run only once. The newly rendered component do not get the bootstrap behaviour.

This is all intended and is how scripts work. You could re-add the bootstrap bindings on every DOM change but that’s really slow and takes a lot of work. My best advice is to use something like https://ng-bootstrap.github.io/ instead, because it takes care of attaching that dynamic behavior for you.

if it is only working for the first time This answer worked for me. Check this out

https://stackoverflow.com/a/55675403/6314955

you have to load the script inside component.ts file where you want

@filipesilva the documentation seems to be incorrect.

You can add Javascript files to the global scope via the scripts option inside your project’s build target options in angular.json. These will be loaded exactly as if you had added them in a <script> tag inside index.html.

Currently it does not behave exactly like a script tag. For example, Adding the following:

            "scripts": [
              "node_modules/jquery/dist/jquery.slim.js",
              "node_modules/popper.js/dist/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.js"
            ]

Should allow bootstrap dropdowns to work, but they do not. However, if I add the <script> tags in index.html they will work.

use this syntax: “./node_modules/jquery/dist/jquery.js” instead of “node_modules/jquery/dist/jquery.js”

I’m not having the problem for build but for test. Initially karma gave me undefined, then I added the scripts, and that error went away. However my test code cannot access the global variables. I’ve tried using files option in karma config that doesn’t help either.