Run javascript script in Angular 2/4 app included through HTML injection

Question

I'm having a problem with scripts in Angular 4. Let me explain: I'm building an Angular app that will be included in a greater web application. So my app is only one among other apps inside this greater web application. In my app I need to include some HTML code representing common areas of this web application. They would be the head, header, menu and footer of the app. My app would be placed in the remaining space. Thus, I retrieve these HTML codes, turn them into SafeValue by bypassing sanitizing and include them by using the innerHTML property of some divs. After that I can see these HTMLs rendered with styling and all.

So this is the context. The problem is that the scripts in these HTMLs don't run. Even though they are not removed (you can examine the page's HTML and see the scripts there), they do not run. I need them to run as they are needed to perform some important tasks such as to fill the menu with links, animate menu expansion and god knows what else.

I have already tried to include these HTMLs in the index.html using the document DOM object to replace a div I've put in index.html as a placeholder, but I've had the same problem: it renders, but the scripts don't run. Something interesting is that if I put the script tag that is not running in the index.html directly (hardcoded, not dynamically) it works.

So, the scripts would have the following form:

<script type="text/javascript" src="//some_external_source"></script>

Only a remark: I have no control over these common HTMLs that I receive. I just receive them and have to use them for the sake of visual identity of the web application.

Sorry if it has already been answered. I have been looking for an answer for days now and I still didn't found one (I did found something similar for AngularJS though), so I posted.

Answer 1

This is not the way angular 2 intended such problems to be solved, if you want to divide your app into separate parts like: content, header, footer you should probably take a look at named router-outlets, or transcludion.

But if you want to do this your way, then do this:

@Component({.your metadata..})
export class SomeComponent{
constructor (private domSanitizer:DomSanitizer){
    this.domSanitizer.bypassSecurityTrustScript(yourScript);
}
}