Develop Reference

Js not loading after routing in Angular 4

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

My main Index page embeds 2 other pages using Angular UI-Router; how can I get the Javascript file I'm loading in the Index to reach all 3 pages?

Using UI-Router the main page loads 2 other pages within them.
Index --> loads CSS and JS (including "application.js") with a <ui-view> to Navigation
Navigation page --> has navigation HTML with another <ui-view> to Content
Content
So basically Index > Navigation > Content
The Index is loading "application.js" with <script src="application.js"> at the bottom of the page. it contains all the page functionality.
It's loading successfully as I put an alert in the window.load function to make sure.... but what I'm finding is that I think the code in there is not reaching the other 2 embedded pages
The code works successfully if I put all the code and combine them together from the Index, Navigation, and Content into one single page. But not when separated but embedded together.
I tried putting:
<script src="~/assets/js/application.js"></script>
at the bottom of the Layout and Content but still didn't work..I'm guessing because technically it's loading as one page? but it's not really one page?...
HOWEVER if I copy and paste everything within application.js into the Layout and Content.. it WILL work.
That's such a crappy way of doing it though. How can I get this to work properly?

Angular JS not working in subpages

I have a HTML page that works as a container of different HTML sub-pages/Usercontrols.
I use Ajax get of jquery to load the HTML of the sub page in the container page.
I am using a angular js directive in one of the sub pages.
The angular js directive is not working in the sub page and the potential issue can be that my anguarl js is firing before the HTML of the subpage gets loaded into the container page. And thats why angular js dont see the directive in the subpage it needs to process.
Is there a way to delay the execution of the angular js until subpage gets loaded.

I agree with #m59's assessment, but if you are unable to follow that route you will need to use the manual bootstrapping see manual initialization

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.

Bootstrap.js file in both parent and iframe

I am creating a web app using bootstrap by twitter. The app contains of a page which loads up another page of the same domain in an iframe. Now my problem is, if the page that I am loading in iframe also contains bootstrap.js file it starts conflicting with the app.
For example, my app has a accordion (collapse) http://twitter.github.com/bootstrap/javascript.html#collapse built using the data attributes.
Once a page with bootstrap.js is loaded the collapse event starts getting fired twice.So something like
<head>//Bootstrap css and js files included</head>
<body>
<div>
//Collapsible Menu #1
</div>
<iframe>
<head>
//BootStrap.js script from same location as parent
</head>
<body>
// Another Collapsible Menu #2
</body>
` </head>
</iframe>
</body>
Here when I try to click on Menu #1, the code of Bootstrap.js gets triggered twice which ends ups in showing and then hiding the menu.
But my problem is not just limited to the menu. I need to be able to use bootstrap.js in my app and also allow pages which already contain bootstrap.js to be loaded inside the iframe.
Is there a way around this or am I doing something wrong?

found the problem.. it was very specific for my app. The way it was working was - there was an included JS file to trigger the app inside the "target" webpage. The JS file would not remove everything from the page and build an iframe to put load the content of the "target" inside iframe. Now in this case, I had BootstrapJS running before the app.js file which in turn resulted in getting executed in the "parent" frame and then when the app loads it was getting reloaded causing the conflict (or multiple events due to multiple inclusion).

I had the same issue in IE9 only.
I was opening an instance of my website in an IFRAME dialog. Meaning that there was 2 instances of Bootstrap, like above.
When I moused out of the IFRAME it resized the underlying layout to match that of the width of the smaller one in the IFRAME.
To get round it I had to disable the opening pages bootstrap-responsive.js stylesheet using javascript. You can then turn it back on, when you close the IFRAME dialog.
if(navigator.userAgent.indexOf("Trident/5")>-1){
window.parent.document.getElementById("responsiveCSS").sheet.disabled = true;
}
Horrible hack, I know.