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

[tjpatange]

Versions

Angular CLI: 6.0.3
Node: 8.9.4
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.3
@angular-devkit/core         0.6.3
@angular-devkit/schematics   0.6.3
@schematics/angular          0.6.3
@schematics/update           0.6.3
rxjs                         6.1.0
typescript                   2.7.2
Windows 10x64

Repro steps

I need to use admin-lte in my project

• Step 1: I added it via terminal using npm install admin-lte --save
• Step 2: I added jquery via terminal using following:
  npm install --save jquery
  npm install --save-dev @types/jquery
• Step 3: I added all the necessary .css and .js files in the angular.json file including first script reference of jquery from nod_modules

"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/admin-lte/plugins/bootstrap/js/bootstrap.min.js",
"node_modules/admin-lte/plugins/fastclick/fastclick.js",
"node_modules/admin-lte/dist/js/adminlte.min.js",
"node_modules/admin-lte/plugins/slimscroll/jquery.slimscroll.min.js",
"node_modules/admin-lte/plugins/select2/select2.full.min.js",
"node_modules/ion-rangeslider/js/ion.rangeSlider.min.js",
"node_modules/alertifyjs/build/alertify.min.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]

Observed behavior

jquery and other js files are not loading

Desired behavior

I have used a collapsable panel from the admin-lte template and it should toggle

Note that other javascript files like ion slider , alertify and jquery.dataTables are working.

[timbru31]

Experiencing the same issue with our external tracking JS

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[raydvard]

What happened to this issue ?

[ternyk]

I have this problem also, need a fix.

[sixteenigor]

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

[Fieel]

Any solution? My Angular project isn't loading the scripts declared in the Angular.Json file either.

In my case i'm trying to import jQuery and Shoelace to use some simple UI elements, part of my angular.json file:

```javascript
"projects": {
"GPF-prototype1-withRedux": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/GPF-prototype1-withRedux",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/shoelace-css/source/css/shoelace.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/shoelace-css/source/js/dropdowns.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "GPF-prototype1-withRedux:build"
},
"configurations": {
"production": {
"browserTarget": "GPF-prototype1-withRedux:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "GPF-prototype1-withRedux:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"/node_modules/"
]
}
}
}
},

[alan-agius4]

Can someone please create a minimal reproduction as explained above by @filipesilva. Thank you.

[nsksaisaravana]

I am also having the same issue, please fix this.

[cactusjack66]

I have a very similar problem and set up a repro project. The scripts are loaded on startup, but after the first routing they are gone:

https://github.com/angular/angular-cli/issues/12043

[alan-agius4]

Repro steps
https://github.com/cactusjack66/ScriptRouteTest.git

Desired functionality
The collapse button on the top right corner of the box collapses the box on page1 after the page has been loaded. After clicking the redirect button to page2 it does not work any longer. You have to reload the page to make it work again. I have added all neccessary scripts and styles to the angular.json file.

Mention any other details that might be useful
After checking out use npm install @angular-devkit/build-angular to get it work.

From #12043
//cc @cactusjack66

[filipesilva]

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.

[flowp98]

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 ?..

[clydin]

The scripts are not destroyed. They are still there and working on the original content.
What will not work are scripts that expect to be run against static HTML. Single Page Applications are by definition dynamic and therefore incompatible with such a script unless the script is manually re-triggered upon change to the HTML.
Please also note that this is not Angular specific.

[taochenpro]

Just a reminder, you need to rebuild the project to get the scripts included.

[malithkuruwita]

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

[Moralde-Sama]

this one works for me https://github.com/angular/angular-cli/issues/11044#issuecomment-414082628

[nhducseuit]

This issue sounds ridiculous. We've got jQuery external script working on angular 5 iirc :))

[reza3zar]

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

[deser1]

Im add this and not working script. I have use materialize.js but not working any in this project. What can i do?

[edgarduran]

I found that some custom elements do not load before the app. The way I solved for it was to npm i @webcomponents/webcomponentsjs and npm i [email protected] (this was the only version that worked in my specific case). Make sure to import 'document-register-element'; in your projects pollyfills.ts.

[mansrivas]

You can check with below command but this is not recommend ;
ng build --prod --aot=false --build-optimizer=false --base-href=\ProjectName\

[vincentw56]

So I was having this issue too. For some reason, if I did this:

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

It didn't work, but if I did this:

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

It worked. I am not sure if there is an issue with popper.js or not.

[dineshkumar3795]

Pls add the below in index.html file.

[vincentw56]

Pls add the below in index.html file.

The "below" is missing.

[zbahadir]

The solution is simple:

Actually, that's not a problem.

If you manually add to the angular.json file, you must build the application. Content will be included in the application.

ionic build

If you build the application, it will also check if the content you added is incorrect.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>