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:

  "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:

#12043