JavaScript in Angular 8-Anwendung verwenden

Bitte aktiviere JavaScript!
...da die index.html bei Angular-Anwendungen die '<script>'-Tags ignoriert, habe ich in der app.component.ts folgendes gemacht:

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);
      }
  }
...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:
Javascript:
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:


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
...ich sehe keinen Grund, warum sowas in der Praxis nicht funktioniert?

Besten Dank für die Feedbacks! :)
 
Zuletzt bearbeitet von einem Moderator:
A

Anzeige


Vielleicht hilft dir dieser Kurs hier weiter: (hier klicken)
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
 
Ich möchte aber eher wissen, warum (etwas im Prinzip so einfaches) nicht mehr funktioniert mit angular...?

Das geht übrigens auch nicht:


Javascript:
$(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!
 
Zuletzt bearbeitet von einem Moderator:
Das auch nicht:


Javascript:
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);
 
Zuletzt bearbeitet von einem Moderator:
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 :p
 
Gleiches Problem, wenn ich die Einträge in der Datei angular.json mache:


Code:
"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:

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

Jedoch dann wieder:


Code:
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!!!!!!
 
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...
 
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 ?
 
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..
 
Update: Ja, nun habe ich die Dateien wieder wie vorher importiert (<script>-Tag) nun zeigen diese wieder auf http://...
 
Läuft:


Code:
import * as $ from "jQuery";
window['$'] = window['jQuery'] = $;
dann


Code:
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

Code:
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...
 
Passende Stellenanzeigen aus deiner Region:

Neue Themen

Oben