Load External Script dynamically in Angular 8

Question

I have built an application that loads articles into a page component using an api from our server. The article loads correctly. Where I am having a problem is I have an embedded script in the api that doesn't get loaded. How do I detect this embedded script or add it before page load so that it shows?

This is the script that I need to get added to the page.

<script src="//mywebsite.com/charts/embed/322/"></script>

I set my base url as

chartUrl = https://mysebsite.com/

chartId: number

let url = ${this.chartUrl}charts/embed/${chartId}

I need to get the number from the end of the script after embed/ so for this example 322. Since it will change for every chart I cant hard code it.

This does add it to the script to the head.

loadUrl: Promise<any>;

public loadScript() {
    console.log('preparing to load...')
    let node = document.createElement('script');
    node.src = this.url;
    node.type = 'text/javascript';
    node.async = true;
    node.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(node);
}

ngOnInit() {
    this.loadUrl = new Promise((resolve) => {
      console.log('resolving promise...');
      this.loadScript();
  });
}

Do I need to do

<div [innerHTML]="someValue| safeHtml"></div>

To get it to display properly?

Any help is appreciative.