…da die index.html bei Angular-Anwendungen die <script>-Tags ignoriert, habe ich in der app.component.ts folgendes gemacht:
addTagToHead(tag): void
{
try
{
(document.getElementsByTagName("head")[0]).appendChild(document.createRange().createContextualFragment(tag));
}
catch(err)
{
alert(err);
}
}
addTagToBody(tag): void
{
try
{
(document.getElementsByTagName("body")[0]).appendChild(document.createRange().createContextualFragment(tag));
}
catch(err)
{
alert(err);
}
}
addExternalJavaScriptResource(path, _module, _async): void
{
try
{
if(_async)
{
_async = "async";
}
else
{
_async = "";
}
if(_module)
{
_module = 'type="module" ';
}
else
{
_module = "";
}
let tag = '<script ' + _module + 'language="javascript" src="./assets/' + path + '" ' + _async + '></script>';
(document.getElementsByTagName("body")[0]).appendChild(document.createRange().createContextualFragment(tag));
}
catch(err)
{
alert(err);
}
}
…es geht um GitHub - dabeng/OrgChart: It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart. , das ist scheinbar (oder nur unsauber und nicht dokumentiert) nicht im npm-Repo drin, deshalb habe ich versucht a.) die nicht jquery-Version sowie b.) die mit jquery zu verwenden:
ngOnInit() {
this.addTagToHead('<link rel="stylesheet" href="./assets/orgchart/orgchart.css" />');
this.addExternalJavaScriptResource("orgchart/orgchart.js", true, false);
eval("let orgchart = new OrgChart({'chartContainer': '#chartContainerId', 'data': '#ul-data'});");
eval('alert("test");')
// this.addTagToHead('<link rel="stylesheet" href="./assets/orgchartjq/css/jquery.orgchart.min.css" />');
// this.addExternalJavaScriptResource("jquery-3.4.1.min.js", false, false);
// this.addExternalJavaScriptResource("orgchartjq/js/jquery.orgchart.min.js", false, false);
// this.addExternalJavaScriptResource("test.js", false, false);
// Oder alles in einem:
// this.addTagToBody('<script src="./assets/jquery-3.4.1.min.js"></script><script src="./assets/jquery.mockjax.min.js"></script><script src="./assets/orgchartjq/js/jquery.orgchart.min.js"></script>');
/*
let orgchart = new OrgChart({
'chartContainer': '#chartContainerId',
'data' : '#ul-data'
});
*/
// this.addTagToBody('<script>' + "let orgchart = new OrgChart({'chartContainer': '#chartContainerId', 'data': '#ul-data'});" + '</script>');
/*
try {
let orgchart = new OrgChart({
'chartContainer': '#chartContainerId'
});
} catch (err) {
alert(err);
}
*/
// alert("test");
/*
try {
var oc = $('#chartContainerId').orgchart(null);
alert(oc);
} catch (err) {
alert("err: " + err);
}
*/
// alert("test");
}
Nun:
-
Bei der Version ohne jquery = grün ( GitHub - dabeng/OrgChart.js: It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart. ) besteht das Problem dass der Compiler immer meint es sei was zum kompilieren:
let orgchart = new OrgChart({ 'chartContainer': '#chartContainerId', 'data' : '#ul-data' });
…also reaklamiert dieser und will dort nicht mehr weitermachen. eval() = gelb scheint als Workaround auch nicht zu funktionieren, WTF?!?
- Bei der Version mit jquery = rot (GitHub - dabeng/OrgChart: It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.) lade ich alle 3
<script>-Tags auf einer Zeile (damit schliesse ich ein Durcheinander bei der Reihenfolge aus) und Chrom lädt es gemäss den Devtool auch, alle 3 Files!!
Trotzdem habe ich diese Meldungen drin:
core.js:30242 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
jquery.mockjax.min.js:1 Uncaught TypeError: Cannot read property ‚ajax‘ of undefined
at jquery.mockjax.min.js:1
at jquery.mockjax.min.js:1
at jquery.mockjax.min.js:1
(anonymous) @ jquery.mockjax.min.js:1
(anonymous) @ jquery.mockjax.min.js:1
(anonymous) @ jquery.mockjax.min.js:1
core.js:30242 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
jquery.mockjax.min.js:1 Uncaught TypeError: Cannot read property ‚ajax‘ of undefined
at jquery.mockjax.min.js:1
at jquery.mockjax.min.js:1
at jquery.mockjax.min.js:1
(anonymous) @ jquery.mockjax.min.js:1
(anonymous) @ jquery.mockjax.min.js:1
(anonymous) @ jquery.mockjax.min.js:1
jquery.orgchart.js:17 Uncaught ReferenceError: jQuery is not defined
at jquery.orgchart.js:17
at jquery.orgchart.js:13
(anonymous) @ jquery.orgchart.js:17
(anonymous) @ jquery.orgchart.js:13
…ich sehe keinen Grund, warum sowas in der Praxis nicht funktioniert?
Besten Dank für die Feedbacks! 