Ui bauen und installieren

Deutsches Forum
1

Moin,
ich bin gerade dabei OpenEms auf meine Pi zu installieren. Ich richte mich nach der Anleitung die dafür hierfür hochgeladen worden ist.
beim bauen der UI bekomme ich folgenden Fehler.
Ich kann leider nix damit anfangen und hoffe das mir geholfen werden kann.

Befehl
/openems/ui : ng build -c “openems,openems-edge-prod,prod”

:heavy_check_mark: Browser application bundle generation complete.
:heavy_check_mark: Copying assets complete.
⠋ Generating index html…11 rules skipped due to selector errors:
:host-context([dir=rtl]) .ion-float-start → subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-end → subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-sm-start → subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-sm-end → subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-md-start → subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-md-end → subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-lg-start → subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-lg-end → subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-xl-start → subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-xl-end → subselects_1.subselects[name] is not a function
formly-field-ion-select ion-select::part(text) → Pseudo-elements are not supported by css-select
:heavy_check_mark: Index html generation complete.

2

Hallo und willkommen in der Community.

Die Fehlermeldungen ... is not a function sind nicht kritisch und kommen auch bei unseren Builds (im Continuous Integration) aktuell. Am Ende sieht es aber so aus, als wäre alles richtig gebaut.

Sicher, dass die kompilierten Dateien nicht im ui/target-Ordner liegen?

Gruß,
Stefan

3

Hallo,
ok gut zu wissen das diese Fehlermeldung kein Problem darstellt. Die Datein sind auch auf in dem target Ordner zu finden. Ich bin halt gerade auf der suche danach warum mein Ui im Browser nicht startet. Dort bekomme ich die Fehlermeldung 404 Websocket Upgrade Failure mit dem error code 1003.
Deswegen hatte ich gedacht das es daran liegen könnte.

 server {
 listen 80;
 server_name openems;

 # OpenEMS Web-Interface
location / {
root        /usr/share/openems/www;
index      index.html     index.htm;
 
error_page     404     300 /index.html;

}

# Proxy for OpenEMS REST-Api 
location /rest/ {
proxy_pass        http://127.0.0.1:8084/rest/; 

proxy_set_header          Host $host; 
proxy_set_header          X-Real-IP $remote_addr; 
proxy_set_header          X-Forwarded-For $proxy_add_x_forwarded_for; 
proxy_set_header          X-Forwarded-Proto https; 

}

 # Proxy for OpenEMS Websocket 
location /websocket { 

proxy_pass http://127.0.0.1:8085; 

proxy_http_version            1.1; 
proxy_set_header            Upgrade $http_upgrade; 
proxy_set_header            Connection "upgrade"; 
}
}
4

Hallo Markus,

die NGINX-Konfiguration ist fast identisch zu der, die wir am FEMS verwenden. Allerdings muss auch das UI so kompiliert werden, dass es die Websocket-Verbindung unter http://IP/websocket sucht.

Im Standard, damit das UI lokal am Entwicklerrechner funktioniert und keinen NGINX-Proxy braucht, ist der Pfad:

url: "ws://" + location.hostname + ":8075",

Siehe openems/edge-prod.ts at develop · OpenEMS/openems · GitHub.

Diese Zeile sollte dann geändert werden zu:

url: "ws://" + location.hostname + (location.port ? ":" + location.port : "") + "/websocket",

Gruß,
Stefan

5

Moin Stefan,
danke für die hilfe. Dadurch das ich ganz neu auf in dem Fach bin stellen sich mir einige fragen.
In der Zweiten Zeile haben sie mir ein Beispiel gegeben wie ich den proxxy pass einzustellen habe. ich jetzt so interpretiert das ich ws://127.0.0.1:8075/websocket eingebe.
Nur leider funktioniert das nicht.
mit freundlichen grüßen
Markus

6

Nein, 8085 hätte schon gepasst. Das ist der Standard-Port des Controller Api Websocket (siehe Getting Started)

Das Ganze funktioniert ja so: (Beispiel der Pi hat die IP 192.168.1.10)

  1. Client-Webbrowser öffnet http://192.168.1.10:80/
    1.1 NGINX nimmt diese Anfrage und gibt gemäß location die index.html unter /usr/share/openems/www zurück.
  2. OpenEMS UI stellt eine Websocket-Verbindung her. (Die URL dieser Verbindung wurde beim Kompilieren aus einer Environment-Datei genommen - siehe oben. Im Original ist das ws://192.168.1.10:8075; nach der vorgeschlagenen Änderung wäre es ws://192.168.1.10/websocket.
    2.1 NGINX nimmt diese Anfrage unter der location /websocket und leitet sie als Websocket-Verbindung an den Port 8085 weiter
    2.2 An Port 8085 wartet der Controller Api Websocket von OpenEMS Edge

Ist das so klarer?

Im Prinzip sollte also die NGINX-Datei passen, aber die Date edge-prod.ts muss wie oben angegeben angepasst werden. Eine Suche nach NGINX im Forum bringt dazu auch ein paar Beispiele.

Gruß,
Stefa

7

Moin,
ich habe openems-backend.jar, openems.jar auf meinem Laptop unter Windows 11 gebaut. Im Anschluss unter angular die openems-edge-UI gebaut auch auf meinem Laptop. Mit Hilfe der Anleitung “deployment” aus dem Forum den Rasberry vorbereitet und entsprechend der Beschreibung aus den Openems Docs die jar datein auf den Rasberry kopiert. Nach dem start der services konnte der Apache Felix web Console Configuration unter der IP:8080/system/console/configMgr von meinem Laptop aus im Browser aufgerufen werden. Bei dem versuch die UI im Browser auf meinem Laptop aus zu starten mit der IP:80 erscheint die Meldung Verbindung wird aufgebaut.

Openems_UI
Openems_UI2674×360 34.6 KB

8

Hallo,

ruf mal bitte die Konsole des Browsers auf und schau, wohin das UI connecten möchte!

Das gibt Aufschluss darüber, wo dein Fehler liegen könnte.

Grüße

9

Moin,
das aufrufen der Konsole hatte geholfen. Dort konnte ich erkennen das er sich versucht hatte mit einen falschen Port zu verbinden.
Danke

2 Likes
10

Super! Freut mich! :slight_smile: