Ergebnis 1 bis 2 von 2
  1. #1
    jmar ist offline Jungspund
    registriert
    23-09-2010
    Beiträge
    16

    JavaScript in Angular 8-Anwendung verwenden

    ...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 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!
    Grüsse, Jan

  2. #2
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: JavaScript in Angular 8-Anwendung verwenden

    Zitat Zitat von jmar Beitrag anzeigen
    ...da die [I]index.html bei Angular-Anwendungen die [I]'<script>'-Tags ignoriert
    in der index.html werden keine script-tags ignoriert, nur in templates

    Zitat Zitat von jmar Beitrag anzeigen
    ...ich sehe keinen Grund, warum sowas in der Praxis nicht funktioniert?
    https://developer.mozilla.org/en-US/...ipt#attr-async

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

Ähnliche Themen

  1. Antworten: 0
    Letzter Beitrag: 18-04-2019, 08:26
  2. Antworten: 0
    Letzter Beitrag: 18-01-2019, 11:17
  3. Antworten: 0
    Letzter Beitrag: 10-07-2017, 13:05
  4. Antworten: 0
    Letzter Beitrag: 12-04-2011, 08:11
  5. Antworten: 1
    Letzter Beitrag: 20-02-2006, 16:03

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •