Hello guys I have 2 JS files which returns window Object. but when I load these two files in angular the first js file is getting overridden by second js file due to global object.

Below are the Scripts

script1

public createFirstScript() {
let scriptsArray = ["firstUrl"]
for (let scriptIn of scriptsArray) {
const script = document.createElement('script');
script.setAttribute('id', scriptIn);
script.crossOrigin = 'anonymous';
let lang =  'en';
script.src = environment.service[scriptIn][lang];
document.head.appendChild(script);
}
}

script returns window object which needs to be loaded to get dynamic data which

returns (window).data

script2

public createSecondScript() {
let scriptsArray = ["secondUrl"]
for (let scriptIn of scriptsArray) {
const script = document.createElement('script');
script.setAttribute('id', scriptIn);
script.crossOrigin = 'anonymous';
let lang =  'en';
script.src = environment.service[scriptIn][lang];
document.head.appendChild(script);
}
}

script returns window object which needs to be loaded to get dynamic data which returns (window).data

when these two scripts are loaded in angular the first Script is getting overridden by second script

Am loading this scripts when app is initialized. Both of these script data needs to be rendered on same route