Closed tjpatange closed 6 years ago
Experiencing the same issue with our external tracking JS
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.
What happened to this issue ?
I have this problem also, need a fix.
Try move this scripts to src/assets/ folder and change all url like "src/assets/node_modules/jquery/dist/jquery.js"
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/**"
]
}
}
}
},
Can someone please create a minimal reproduction as explained above by @filipesilva. Thank you.
I am also having the same issue, please fix this.
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:
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
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.
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 ?..
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.
@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.
Versions
Repro steps
I need to use admin-lte in my project
"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.