# JavaScript in Angular 8-Anwendung verwenden



## ruutaiokwu (2. Jul 2019)

...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!


----------



## thecain (2. Jul 2019)

nebst dem, dass der code miserable formatiert ist, gibt es viele gründe, warum man das in der praxis nicht machen sollte und nicht ohne weitere funktioniert.

Du könntest aber in der angular.json unter scripts, den pfad zu deinem .js hinzufügen. Ob es dann einfach so funktionert, ist nochmal eine andere Frage


----------



## ruutaiokwu (2. Jul 2019)

Ich möchte aber eher wissen, warum (etwas im Prinzip so einfaches) nicht mehr funktioniert mit angular...?

Das geht übrigens auch nicht:



```
$(document).ready(() => {
        alert($.fn.jquery);
        this.addExternalJavaScriptResource("./jquery.mockjax.min.js", false, false);     
        this.addExternalJavaScriptResource("./orgchartjq/js/jquery.orgchart.js", false, false);     
        });
```


1. jQuery ist bereit, das sehe ich am alert.
2. Die beiden ext. Resourcen werden geladen, das sehe ich im Chrome.

Da läuft alles "kreuz und quer" asynchron durcheinander, typisch Frameworks wieder mal... keine Kontrolle und gar nichts!


----------



## ruutaiokwu (2. Jul 2019)

Das auch nicht:



```
var my_awesome_script = document.createElement('script');
        my_awesome_script.setAttribute('src','/assets/jquery.mockjax.min.js');
        document.body.appendChild(my_awesome_script);
        
        my_awesome_script = document.createElement('script');
        my_awesome_script.setAttribute('src','/assets/orgchartjq/js/jquery.orgchart.js');
        document.body.appendChild(my_awesome_script);
```


----------



## Robat (2. Jul 2019)

Benutz bitte Code-Tags [code=javascript]Your Code..[/code] (oder auf die 3 Punkte im Editor --> Code) um deinen Code einzufügen. 
Die Formatierung ist schrecklich


----------



## ruutaiokwu (2. Jul 2019)

Gleiches Problem, wenn ich die Einträge in der Datei angular.json mache:



```
"scripts": [
            "src/assets/orgchartjq/js/jquery.orgchart.js",
            "src/assets/jquery.mockjax.min.js"
            ]
```


Und dann:
 - "npm install jquery"
- 'import * as $ from "jQuery";' in der Datei app.component.ts eintragen


Das gibt mir weiterhin v3.4.1 aus:


```
$(document).ready(() => {
        // alert($.fn.jquery);
```


Jedoch dann wieder:



```
jquery.orgchart.js:17 Uncaught ReferenceError: jQuery is not defined
    at jquery.orgchart.js:17
    at jquery.orgchart.js:19
(anonymous) @ jquery.orgchart.js:17
(anonymous) @ jquery.orgchart.js:19
core.js:30242 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
```


Elendes Angular-Sch***s-Drecks-Zeugs, anders kann man das nicht ausdrücken!!!!!!


----------



## ruutaiokwu (2. Jul 2019)

Wenn man die beiden .js-Dateien in angular.json einträgt, dann gibts wie gesagt wieder obige Fehlermeldung, allerdings ist bei den Netzwerkzugriffen im Chrome (Auf "all", nicht "XHR"!!) plötzlich kein Zugriff der jeweiligen Datei mehr ersichtlich...

WTF, das Ganze ist so absolut sinnlos und unlogisch...


----------



## looparda (2. Jul 2019)

jmar83 hat gesagt.:


> Wenn man die beiden .js-Dateien in angular.json einträgt, dann gibts wie gesagt wieder obige Fehlermeldung, allerdings ist bei den Netzwerkzugriffen im Chrome (Auf "all", nicht "XHR"!!) plötzlich kein Zugriff der jeweiligen Datei mehr ersichtlich...


Das liegt vermutlich daran, dass alle sourcen vom angular build-System zu einer app.js zusammengeflickt werden. 
Was hältst du von https://www.npmjs.com/package/ng2-org-chart ?


----------



## ruutaiokwu (2. Jul 2019)

Scheint irgendwie so zu sein, die Fehlermeldung enthält immer noch den originalen Dateinamen, wenn man den Link dazu anzeigt sieht man neu aber was mit webpack://... und nicht mehr http://localhost...

Bei den Netzwerkzugriffen ist aber wie gesagt nix mehr zu sehen..


----------



## ruutaiokwu (2. Jul 2019)

Update: Ja, nun habe ich die Dateien wieder wie vorher importiert (<script>-Tag) nun zeigen diese wieder auf http://...


----------



## ruutaiokwu (2. Jul 2019)

Läuft:



```
import * as $ from "jQuery";
window['$'] = window['jQuery'] = $;
```

dann



```
addExternalJavaScriptResource(path, _module, _async): void
  {
            try
      {
          if(_async)
          {
              _async = "async";
          }
          else
          {
              _async = "";
          }
          
          if(_module)
          {
              _module = 'type="module" ';
          }
          else
          {
              _module = 'type="text/javascript" ';
          }
          
          let tag = '<script ' + _module + 'language="javascript" src="./assets/' + path + '" ' + _async + '></script>';
          (document.getElementsByTagName("body")[0]).appendChild(document.createRange().createContextualFragment(tag));
      }
      catch(err)
      {
          alert(err);
      }
  }
```

nun


```
this.addExternalJavaScriptResource("./orgchartjq/js/jquery.orgchart.js", false, true);
    
        var datasource = {
            'name': 'Lao Lao',
            'title': 'general manager',
            'children': [
        { 'name': 'Bo Miao', 'title': 'department manager' },
        { 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Tie Hua', 'title': 'senior engineer' },
            { 'name': 'Hei Hei', 'title': 'senior engineer',
              'children': [
                { 'name': 'Dan Dan', 'title': 'engineer' }
              ]
            },
            { 'name': 'Pang Pang', 'title': 'senior engineer' }
          ]
        },
        { 'name': 'Hong Miao', 'title': 'department manager' }
      ]
    };
    
        $(function()
        {
            $(document).ready(function()
            {
                window.onload = function()
                {
                    $('#chart-container').orgchart({'data': datasource, 'nodeContent': 'title'});
                };
            });
        });
    }
```


-> Irgendwie hat was Probleme beim Laden gemacht, mit einem Timeout von 120ms würde es wohl auch problemlos gehen, aber die Kombination mit "window.onload = ..." war mir lieber...


----------



## ruutaiokwu (2. Jul 2019)

"Was hältst du von https://www.npmjs.com/package/ng2-org-chart "

Kenne ich bereits, aber der Orgchart von GitHub passt mir ehrlich gesagt besser. Auch ging es darum, abzuklären was sich alles in eine Angular-Anwendung integrieren lässt. ;-)


----------

