JavaScript in Angular 8-Anwendung verwenden

[jmar]

[FONT=&quot]...da die [/FONT]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 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:
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 (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:


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!

 

[tsseh]

[FONT=&quot]...da die [/FONT]index.html bei Angular-Anwendungen die '<script>'-Tags ignoriert

in der index.html werden keine script-tags ignoriert, nur in templates

...ich sehe keinen Grund, warum sowas in der Praxis nicht funktioniert?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async

var script = document.createElement("script");
script.src = ...
script.async = false;
...appendChild(script);