Kategorie: JavaScript
-
Chrome remote debugging funktioniert nicht mehr mit Intellij IDE
Bei mir reicht es die Datei zu löschen: C:\Users\MY_USER\AppData\Roaming\JetBrains\PhpStorm2022.2\options\other.xml Dann PhpStorm/Webstorm neustartne und es läuft wieder.
-
Angular Change Detection für Array Input
Die Change Detection von Angular wird immer ausgeführt bei einem Array Input, wenn sich die Referenz des Arrays ändert, aber nicht der Inhalt: In Angular kann man die Change Detection beeinflussen, indem man die Strategie der Change Detection für eine Komponente ändert. Eine der Strategien ist die „OnPush“-Strategie, bei der die Change Detection nur dann…
-
End-To-End-Tests mit Angular und Cypress
Um End-To-End-Tests mit Cypress und Angular zu schreiben, können Sie folgende Schritte ausführen: Stellen Sie sicher, dass Sie die neueste Version von Cypress und Angular installiert haben. Sie können Cypress mit dem Befehl npm install -D cypress installieren. Öffnen Sie Cypress mit dem Befehl npx cypress open im Hauptverzeichnis Ihres Projekts. Cypress öffnet eine Benutzeroberfläche,…
-
Angular Unit Testing von Komponenten mit Abhängigkeiten
Um einen Unit Test von einer Angular Komponente mit Abhängigkeiten (Dependencies) schreiben zu können, muss man die Abhängigkeiten unter Kontrolle bringen. Wenn man dies nicht tut, schreibt man einen Integration-Test. Integration-Tests haben eine höhere Komplexität hat und gehen schneller kaputt. Beipsiel einer Komponente „MyComponent“ mit einer Abhängikeit „MyService“: Um in einem Jasmine Unit Test die…
-
Funktionale Programmierung mit JavaScript
JavaScript ist keine funktionale Programmiersprache, aber die wichtigsten Prinzipien der funktionalen Programmierung lassen sich trotzdem beim Programmieren an einigen Stellen anwenden. Diese Prinzipien sind u.a.: Funktionen haben Inputs und Outputs, aber keine Nebenwirkungen. Sie bearbeiten keine Daten, die ihnen nicht explizit übergeben wurden Variablen werden nicht verändert (Immortabilität) Funktionen höherer Ordnung dienen zur Schachtelung von…
-
Protractor Konfiguration Headless Chrome und Firefox
Um Selenium Tests in Firefox und Chrome im Headless Modus auszuführen mit Protractor, kann man folgende Konfiguraton verwenden in der protractor.conf: exports.config = { …. multiCapabilities: [ { browserName: ‚chrome‘, chromeOptions: { ‚args‘: [‚–headless‘] }, }, { browserName: ‚firefox‘, firefoxOptions: { args: [‚–headless‘] }, ‚moz:firefoxOptions‘: { args: [‚–headless‘] } }, ], … };
-
Angular ngx-translate TranslateLoader ohne http Modul
Um eine Kompatibilität mit alten Browsern, wie dem Firefox Version <= 5 zu erreichen, kann man das angular http Modul nicht verwenden. Das ngx-translate Module bneötigt einen Loader, der die richtige Sprache lädt per Ajax Request. Dies läst sich auch mit dem XMLHttpRequest und einem Observalbe lösen: import {Injectable} from ‚@angular/core‘; import {TranslateLoader} from ‚@ngx-translate/core‘;…
-
Angular 2 HTTP Request nochmals ausführen mit rxjs und retry()
Bei einem Fehlgeschlagenen Request kann man sehr komfortabel nochmals anfragen mit der Methode retry(): import ‚rxjs/add/operator/retry‘; … const result = this.http.get(url) .retry(2);
-
Javascript Debuging auf der Konsole mit console.table()
Die neue Javascript Methode console.table() ist sehr hilfgreich, um Objekte und Arrays auf der Konsole darzustellen. Beispiel: var data = [ {„id“: „Open“}, {„id“: „OpenNew“, „label“: „Open New“}, null, {„id“: „ZoomIn“, „label“: „Zoom In“}, {„id“: „ZoomOut“, „label“: „Zoom Out“}, {„id“: „OriginalView“, „label“: „Original View“}, null, {„id“: „Quality“},…
-
Angular 5 URL ohne index.html
Bei einer Angular Anwendung muss man standardmäßig die index.html aufrufen, damit die Anwendung startet auf einem Apache Webserver. Damit dies auch ohne /index.html nur mit der Domain allein (www.foo.de) funktioneirt, muss man folgendes einstellen: 1. Erstellen einer .htaccess Datei in src/.htaccess mit dem Inhalt: DirectoryIndex index.html 2. Ändern der Base Url in der src/index.html <base…