Angular Version: 7.1.4
In an attempt to resolve the issue of script loading errors, specifically 'Uncaught TypeError: Can not read property Responsive' of undefined', I explored a potential solution which involved creating a service for dynamic script loading. Following a tutorial, I diligently implemented the necessary steps; however, the functionality did not perform as expected.
import { Injectable } from '@angular/core';
interface Scripts {
name: string;
src: string;
}
export const ScriptStore: Scripts[] = [
{name: 'jquery', src: 'https://code.jquery.com/jquery-3.3.1.min.js'},
{name: 'tables', src: '../../../assets/dashboard/js/tables.js'},
{name: 'widgets', src: '../../../assets/dashboard/js/widgets.js'},
{name: 'charts', src: '../../../assets/dashboard/js/charts.js'},
{name: 'theme.min', src: '../../../assets/dashboard/dist/js/theme.min.js'}
];
declare var document: any;
@Injectable()
export class DynamicScriptLoaderService {
private scripts: any = {};
constructor() {
ScriptStore.forEach((script: any) => {
this.scripts[script.name] = {
loaded: false,
src: script.src
};
});
}
load(...scripts: string[]) {
const promises: any[] = [];
scripts.forEach((script) => promises.push(this.loadScript(script)));
return Promise.all(promises);
}
loadScript(name: string) {
return new Promise((resolve, reject) => {
if (!this.scripts[name].loaded) {
//load script
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = this.scripts[name].src;
if (script.readyState) { //IE
script.onreadystatechange = () => {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
this.scripts[name].loaded = true;
resolve({script: name, loaded: true, status: 'Loaded'});
}
};
} else { //Others
script.onload = () => {
this.scripts[name].loaded = true;
resolve({script: name, loaded: true, status: 'Loaded'});
};
}
script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'});
document.getElementsByTagName('head')[0].appendChild(script);
} else {
resolve({script: name, loaded: true, status: 'Already Loaded'});
}
});
}
}
Subsequently, I attempted to invoke this service upon component initialization in order to load the scripts
ngOnInit() {
this.loadScripts();
}
private loadScripts() {
// Multiple scripts can be loaded by passing the key as argument into the load method of the service
this.dynamicScriptLoader.load(
'jquery',
'tables',
'widgets',
'charts',
'theme.min'
)
.then(data => {
console.log('scripts loaded')
}).catch(error => console.log(error));
}
Despite my efforts, I encountered several errors when utilizing this service. Along with the persistence of the initial error, additional problems such as 'Failed to load resource: the server responded with a status of 404 (Not Found)' and 'Uncaught ReferenceError: c3 is not defined' from the 'charts' file arose. It seems that my implementation may contain incorrect calls within the service, despite referencing tutorials that appeared reliable.