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! :slight_smile:

Habe den Code ein bißchen aufgeräumt bzw. den Beitrag formatiert. Lies’ ihn dir nochmal durch, und überlege, ob du das so für angemessen hältst.

Ja, war wieder mal ein bisschen (zu) schnell, muss mich entschuldigen. (Und vielen Dank fürs formatieren, was eigentlich meine Aufgabe gewesen wäre!)

Das nächste Mal werde ich mir mehr Mühe geben, und mir an Deiner Formatierung ein Beispiel nehmen.