Scripts not loading from angular.json file

tjpatange commented 6 years ago

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 commented 6 years ago

Experiencing the same issue with our external tracking JS

filipesilva commented 6 years ago

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 commented 6 years ago

What happened to this issue ?

ternyk commented 6 years ago

I have this problem also, need a fix.

sixteenigor commented 6 years ago

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

Fieel commented 6 years ago

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 commented 6 years ago

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

nsksaisaravana commented 6 years ago

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

cactusjack66 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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.

dalelotts commented 6 years ago

@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 Githubissues.
Githubissues is a development platform for aggregating issues.

angular / angular-cli