diff --git a/goofy-client/README.md b/goofy-client/README.md index e3515e035df8887159e6b552ce1ef9400b3ce297..bdf4ed240e8d8b59b6bbe36fecc64b80275a249d 100644 --- a/goofy-client/README.md +++ b/goofy-client/README.md @@ -2,6 +2,8 @@ Informationen zur lokalen Installation sind unter [dokumentation/Entwicklungsumgebung/README.md](../../../../../dokumentation/src/branch/master/Entwicklungsumgebung/README.md#angular-frontend) +Befehle und Tipps zum Umgang mit der Codebasis und zur Testerstellung liegen in [dokumentation/Entwicklung/Angular.md](../../../../../dokumentation/src/branch/master/Entwicklung/Angular.md). + ## Alfa Frontend starten Um das Alfa Frontend zum Laufen zu bekommen, muss zunächst ein `npm install --legacy-peer-deps` ausgeführt werden. @@ -14,251 +16,3 @@ Hinweise: * Bei nicht nachvollziehbaren Problemen während der Installation kann es helfen, den `node_modules` Ordner zu löschen und anschließend erneut zu installieren. * Prüfen, dass `npm install` die _package-lock.json_ nicht anpasst, wenn das nicht wirklich gewollt ist. Das kann geschehen, wenn ein älteres/neueres NPM verwendet wurde oder ein NPM-Proxy in der _~/.npmrc_ eingetragen ist. - ---- - -## Common information to Nx from Nx - -This project was generated using [Nx](https://nx.dev). - -[Nx Documentation](https://nx.dev/angular) - -[10-minute video showing all Nx features](https://nx.dev/angular/getting-started/what-is-nx) - -[Interactive Tutorial](https://nx.dev/angular/tutorial/01-create-application) - -## Adding capabilities to your workspace - -Nx supports many plugins which add capabilities for developing different types of applications and different tools. - -These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well. - -Below are our core plugins: - -- [Angular](https://angular.io) - - `ng add @nrwl/angular` -- [Node](https://nodejs.org) - - `ng add @nrwl/node` - -There are also many [community plugins](https://nx.dev/nx-community) you could add. - -## Generate a library - -Run `ng g lib my-lib` to generate a library. - -Libraries are sharable across libraries and applications. They can be imported from `@goofy-client/mylib`. - -## Generate a Component - -Run - -```bash -npx nx g @nrwl/angular:component 'component-name' --project=my-app -``` - -to generate a new component. - -## Delete a generated Library - -```bash -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 eines Features (funktionale Einheit) 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 nur in übergeordnete Container-Komponenten eingebunden werden: - -``` -npx nx g @nrwl/angular:component historie-list --project=historie --path=libs/historie/src/lib/historie-container -``` - -Service anlegen: - -_TODO: Wo werden Services verwendet (nur in Container-Komponenten einbinden), was ist der Inhalt?_ - -``` -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. - -</br> - -## NG/NX short explanation - -- Angular ClI = **ng** -- Nx Cli = **nx** - -Nx Cli baut auf Angular Cli auf ist jedoch wesentlich schneller bspw. durch - -- _advanced code analysis_ -- _computation caching (reuse previous results)_ - -Sofern die Commands für das Generieren von Code genutzt werden, so ist der generierte Code immer derselbe! - -## `Install NX global` - -```bash -npm install -g nx -``` - -Mit `nx` bzw. `nx --list` krieg man eine Liste alle verfügbaren, schon von nx **vordefinierten** commands an - -</br> - -## Anbei ein Ausschnitt der verfügbaren Befehle/Scripte und einer kurzen Erläuterung - -| Command | Description | Examples | -| :------ | :------ | :----- | -| `start` | Startet den Client mit dem Port **4300** und der **proxy.conf.json** | `npm start / npm run start` -| `build` | Baut das Projekt(und cached den build) | `npm run build` -| `test` | Führt alle Test's aus(**app** + **ibraries**) | `npm run test / npm test` -| `test:cov` | Führt alle Test's aus und zeigt am Ende eine Übersicht der Testabdeckung | `npm run test:cov` -| `lint` | Führt das **eslint** für die, von den lokalen Änderungen **direkt** betroffenen, libraries aus | `npm run lint` -| `dep-graph` | Öffnet ein Fenster zur graphischen Veranschaulichung des Zusammenspielst von app, e2e und der einzelnen libraries | `npm run dep-graph` -| `cypress:open` | Öffnet ein Fenster mit cpress-runner für die Integrationtest's welche auch gleich da ausgeführt werden können | `npm run cypress:open` -| `test:lib` | Führt alle Test's einer library aus(mit watch mode) | `npm run test:lib --lib=vorgang` -| `test:debug:lib` | Führt alle Test's einer library und zeigt zusätzlich eine genauere Fehlermeldung an(mit watch mode) | `npm run test:debug:lib --lib=vorgang` - -## Affected - -Hier eine kurze Liste mit den wichtigsten Befehlen: - -`affected:*`: </br> - Bezieht sich meistens auf die von den lokalen Änderungen betroffenen Libraries, kann sich aber auch auf die betroffenen Projekte beziehen. - -- `affected:libs` -Zeigt eine Liste der Libraries die von den lokalen Änderungen betroffen sind </br> -(hier kann man zusätzlich auch den `dep-graph` zur Hand nehmen für eine bessere Übersicht) -- `affected:test` -Führt die Test's für die Libraries aus die von den lokalen Änderungen betroffen sind.</br> -(inklusive der app Test's) -- `affected:lint` -Führt das eslint über die betroffenen Libraries aus. </br> -Man bekommt am Ende eine Zusammenfassung von den Warnings und Errors. -- `affected:dep-graph` -Selektiert die von den lokalen Änderung betroffenen Libraries vor und stellt diese in Rot dar. </br> -(sonst identisch zu `dep-graph`) - -`affected:apps`, `affected:e2e`, `affected:build` beziehen sich jeweils auf ganze Projekte/Apps. - -## Ngrx - -Command zum Generieren einer state. -Beispiel für den fachlichen Vorgang: - -```code -nx g @nrwl/angular:ngrx vorgang --module=libs/vorgang-shared/src/lib/vorgang.module.ts -``` - -Es wird eine Menge Testcode generiert, es ist dem entsprechend abzuwägen, ob man sich die generieren lässt oder die Struktur selber anlegt und sich das rausschmeißen des generierten Codes spart. - -Die generierten Daten kommen in ein `+state` Verzeichnis. -die Schnittstelle zu den Componenten der `service`. - -## Marbles - -Für Mehr Info: <https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/testing/marble-testing.md#marble-syntax> - -| Marble Syntax | Description | -| :------ | :------ | -| `'-'` | 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