OZG-2958 OZG-3245 Add notes to Node 16

As well as more information accumulated in the last months.

goofy-client/README.md

@@ -2,7 +2,9 @@
 
 ## Client starten
 
-Um den Client zum laufen zu bekommen, muss zunächst ein `npm install` ausgeführt werden.
+_Vorbedingungen: Jeweils aktuelle Versionen von Node 16 sowie NPM 8._
+
+Um den Client zum Laufen zu bekommen, muss zunächst ein `npm install` ausgeführt werden.
 
 -> nach dem Ausführen sollte sich ein `node_modules` Ordner im Verzeichnis befinden.
 
@@ -57,6 +59,60 @@ to generate a new component.
 nx g @nrwl/workspace:remove 'library-name'
 ```
 
+## Beispiel für Libraries und anderes anlegen
+
+Libraries usw. werden durch das [Nx Plugin for Angular](https://nx.dev/packages/angular) erzeugt.
+
+Anlegen einer Library am Beispiel des Historie-Tab auf der Vorgangdetail-Seite:
+
+* historie: UI
+* historie-shared: Services, State (NgRX)
+
+```
+npx nx g @nrwl/angular:lib historie
+npx nx g @nrwl/angular:lib historie-shared
+```
+
+Libraries enthalten:
+
+- Services
+- Container-Komponenten:
+  - Bereitstellen von Daten durch Services
+  - Einbinden von Child-Komponenten
+- Child-Komponenten
+  - Darstellen von Daten, via @Input() übergeben
+  - Zurückgeben von Daten, via @Output() / Emitter
+
+Container-Komponente anlegen:
+
+```
+npx nx g @nrwl/angular:component historie-container --project=historie --export
+```
+
+Child-Komponente anlegen - soll in anderen Komponenten eingebunden werden können:
+
+```
+npx nx g @nrwl/angular:component historie-list --project=historie --path=libs/historie/src/lib/historie-container  --export
+```
+
+Service anlegen:
+
+```
+npx nx g service historie --project=historie-shared --flat
+```
+
+Repository anlegen:
+
+_Kein Nx generator vorhanden - muss manuell getan werden._
+
+Dateien für NgRx state management anlegen:
+
+```
+npx nx g @nrwl/angular:ngrx --name=historie --directory=+state --module=libs/historie-shared/src/lib/historie-shared.module.ts --facade=true --root=false
+```
+
+Hinweis: Die Datei _libs/historie/tsconfig.json_ enthält möglicherweise zu restriktive Compiler-Optionen. Hinzufügen von `"strictPropertyInitialization": true` beruhigt die IDE, jedoch nicht die Unit Tests. Geholfen hat, alle _compilerOptions_ sowie _angularCompilerOptions_ zu entfernen.
+
 ## Allgemein
 
 Man kann mit Hilfe von `nx --help` eine Liste von Befehlen mit kurzen Erläuterung bekommen.
@@ -144,3 +200,58 @@ Für Mehr Info: <https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/
 | `'-'` | frame: 1 "frame" of virtual time passing (see above description of frames).
 | `'\|'` | complete: The successful completion of an observable. This is the observable producer signaling `complete()`.
 | `'#'` | error: An error terminating the observable. This is the observable producer signaling `error()`.
+
+Das Frontend wird als Mono Repository via [Nx](https://nx.dev/getting-started/intro) organisiert.
+
+Voneinander trennbare funktionale Bereiche innerhalb einer Anwendung sind in Libaries unterteilt.
+
+## HTTP-Fehler simulieren
+
+1. `netcat` in einer Bash simuliert einen HTTP-Server auf Port 8081, der auf jeden Request einen 500er Fehler zurück gibt.
+
+```bash
+while true; do
+  { echo -e "HTTP/1.1 500 Internal Server Error\r\nContent-Length: 25\r\nContent-Type: text/plain\r\nDate: $(date)\r\n"; \
+    echo '500 Internal Server Error';  \
+  } | nc -l 8081;
+done
+```
+
+2. Test in einem Terminal mit `curl -IL localhost:8081`
+
+3. _proxy.conf.json_ so konfigurieren, dass für den zu testenden HTTP-Pfad auf den netcat-Server umgeleitet wird. Anschließend `npm start` neu starten. Beispiel für _/api/histories_:
+
+```json
+{
+	"/api/histories": {
+		"target": {
+			"host": "localhost",
+			"port": 8081,
+			"protocol": "http:"
+		},
+		"secure": false,
+		"logLevel": "debug"
+	},
+	"/api": {
+		"target": {
+			"host": "localhost",
+			"port": 8080,
+			"protocol": "http:"
+		},
+		"secure": false,
+		"logLevel": "debug"
+	}
+}
+```
+
+## Library umbenennen
+
+Beispiel: `settings` nach `user-settings`
+
+1. `nx g @nrwl/workspace:move --projectName settings --destination user-settings`
+2. `find user-settings/* -depth -execdir rename  's/settings/user-settings/g' {} \;`
+3. `git add --all` (Git Historie umbenannter Dateien bleibt erhalten)
+4. Globales Suchen/Ersetzen im Code, Großschreibung beachten
+   - /settings => /user-settings
+   - Settings => UserSettings
+   - goofy-client-settings => goofy-client-user-settings