I am trying to add a 3rd party javascript file into my application to render some visuals on screen. I have some test code that works as a stand-alone javascript file, however migrating this into my angular application has been a bit of a headache. From my understanding, the external script loads and then I need to call the initialize function which is a global level function in the embed.js external file.

Sample (working) JS, where "myTestServer" is the location of where this 3rd party code is:

<script data-name="embed-manager"     
   src="myTestServer/embed/embed.js"></script>

   function EmbedDashboard( dashboardid ) {
            const embedManagerPromise = window.initEmbedManager({ 
                initialToken: access_token
            });

            embedManagerPromise.then((embedManager) => {
                componentConfig.dashboardId = dashboardid;  

                embedManager.createComponent( 'dashboard', componentConfig )
                    .then(dashboard => dashboard.render(
                        document.getElementById( "embedDash" ), 
                        { width: '100%', height: '100%' }
                ))
            });
        }

Using this as a starting point, I have added the embed.js script location into my angular.json file. Then in my component I have:

declare const window: any

@Component({
    selector: 'app-reports-analytics',
    templateUrl: './reports.component.html',
    styleUrls: ['./reports.component.css']
})
export class ReportsComponent implements OnInit {

    embedManagerPromise: any;

    componentConfig = {
        "dashboardId": "123456789",
        "theme":"modern",
        "interactivityProfileName":"interactive"
        },
        "editor": { "placement": "dockRight" },
        "header": { 
            "showTitle": false,
        }
    }

    constructor(
    ) { }


    embedDashboard(id) {
        this.componentConfig.dashboardId = id;

        this.embedManagerPromise = window.initEmbedManager({ 
            initialToken: '123456789123456789'
        });
    }
}

Which throws an error when trying to run the code after a button click calls embedDashboard(id)

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'src')
    at V (embed.js:1)
    at ReportsComponent.push../src/app/components/company/reporting/reports.component.ts.ReportsComponent.embedDashboard (reports.component.ts:212)