...da die index.html bei Angular-Anwendungen die '<script>'-Tags ignoriert, habe ich in der app.component.ts folgendes gemacht:
[code=java] 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);
}
}[/code]
...es geht um https://github.com/dabeng/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 ( https://github.com/dabeng/OrgChart.js ) besteht das Problem dass der Compiler immer meint es sei was zum kompilieren:
[code=javascript]let orgchart = new OrgChart({
'chartContainer': '#chartContainerId',
'data' : '#ul-data'
});[/code]
...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 (https://github.com/dabeng/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:
[code=javascript]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[/code]
...ich sehe keinen Grund, warum sowas in der Praxis nicht funktioniert?
Besten Dank für die Feedbacks! 
