Js not loading after routing in Angular 4 - javascript

I am building an Angular4 WebApp using an external HTML template for my components. The template needs to run some scripts to load correctly the page.
If I include script tags in my index.html the page loads fine the first time but when I route to another page scripts are not reloaded for the component template and the page remains blank.
Is there another way to load scripts and solve this issue?
Please Help.
here are my files. when application loads it works fine but when i route to some other page the js links in index.html wont load.
My app.component.html file only have
this is my app.module file
index.html

Related

Not loading External JavaScript File on Frist Loading after refreshing the page it gets loaded in Angular

I have issue in a Angular app. I try to Load External JS File Angular Component But Problem is When Page Loading Frist time External JavaScript File Not Loading Properly after second Reload it is working .
I try to Load External JS File in Child Component Not Index.html .
I Create New Component Name as External-script-Loader-Component That Component I try to Load as Child Component in My Component .My Problem is When I am visited Page External JS File Not Working Properly After I try to Reload it is Working

javascript and css loads but not working on navigation in React js

I am working in react js. I put all the assets links in public/index.html. When i start project, only first page works fine. When i navigate to other pages, all pages does not show the correct resul, and when i get back to first page it does not work. I checked the css and javascript files by ctrl+u. All files are loaded. The Both source files, before navigate and after navigate are same all files are loaded but on navigation it does not work. Please have a look on my index.html, how i use link tag to import css and javascript file. Any help would be appreciated.
Thank
I put all links to app.js and assets moved to src directory. Css files are working but jquery shows following error
import your CSS file in the "App.js" file. It'll work

vue-bootstrap shows components content badly when page loads

I use vue bootstrap framework in my project. When page loading the components content show up on page for 1 seconds then page loading finishes everything seem normal for example modal window or dropdown. You can view from picture what I want to mean. So I don't know why this happens. And I use webpack to compile scss and js and inside head section I call these css and js files.

How can I access loaded scripts in index.html via ng-included templates?

I'm a AngularJS-Beginner and i've just started using ng-include to better structure my html blocks.
I'm using jquery.scrollTo.js to add a button to scroll to the top. However i've noticed that if I place the button inside tpl-footer.html and load it via ng-inlcude while having jquery.scrollTo loaded in index.html, it won't work.
I either have to place the button inside index.html or load jquery.scrollTo.js inside tpl-footer.html.
My question: How can I access loaded scripts in index.html via ng-included templates?
Cheers!

Changes made from js files are not being rendered and cannot be debugged

I have a html page (inicio.html) which loads some js scripts. Then from a js script there is a navigation to another page in a different html file (test.html) and a different set of js files.
The problem is that when I do the changePage ($.mobile.changePage("test.html");) and the new page is loaded the new js files are kept in files like
http://localhost:8080/cdmWEB/resources/scripts/jquery/2.0.3/jquery-2.0.3.min.js/eval/seq/2
The js functions are being executed because the console.log messages in them are shown. But the changes the js scripts should do in the page are not rendered and the js cannot be debuged (using firebug).
I am loading the js scripts with the tag in the html file, but I have also tried the $.getScript function with the same result.
I am using jQuery 2.0.3 and jQuery-mobile 1.3.1.
From what I saw the reason why the js files are kept like that is because they are retrieved using ajax. Is there a way to prevent this and retrieve the file "normally"? or is there something I am missing (probably)?
Have a look here:
Jquery Mobile - $.mobile.changepage not loading external .JS files
You should consider loading the needed JS in the main page, and not in the page your changing to.
I ended up using window.open('test.html','_self','',true); to make the transition. This loads the new scripts when the transition is made and the jquery appends keep working fine.

Categories

Resources