Um den Client zum laufen zu bekommen, muss zunächst ein `npm install` ausgeführt werden. <br>
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. <br>
-> nach dem Ausführen sollte sich ein `node_modules` Ordner im Verzeichnis befinden. <br>
Im Anschluß wird der Client über `npm start` gestartet.
Im Anschluß wird der Client über `npm start` gestartet.
#
---
## Common information to Nx from Nx
## Common information to Nx from Nx
This project was generated using [Nx](https://nx.dev).
This project was generated using [Nx](https://nx.dev).
[Nx Documentation](https://nx.dev/angular)
[Nx Documentation](https://nx.dev/angular)
...
@@ -40,36 +41,44 @@ Libraries are sharable across libraries and applications. They can be imported f
...
@@ -40,36 +41,44 @@ Libraries are sharable across libraries and applications. They can be imported f
## Generate a Component
## Generate a Component
Run`ng g component my-component --project=my-app` to generate a new component.
Run
```bash
ng g component my-component --project=my-app
```
#
to generate a new component.
## Allgemein
## Allgemein
Man kann mit Hilfe von `nx --help` eine Liste von Befehlen mit kurzen Erläuterung bekommen.
Man kann mit Hilfe von `nx --help` eine Liste von Befehlen mit kurzen Erläuterung bekommen.
</br>
</br>
### NG/NX short explanation
## NG/NX short explanation
- Angular ClI = **ng**
- Angular ClI = **ng**
- Nx Cli = **nx**
- Nx Cli = **nx**
Nx Cli baut auf Angular Cli auf ist jedoch wesentlich schneller bspw. durch
Nx Cli baut auf Angular Cli auf ist jedoch wesentlich schneller bspw. durch
- _advanced code analysis_
- _advanced code analysis_
- _computation caching (reuse previous results)_
- _computation caching (reuse previous results)_
Sofern die Commands für das Generieren von Code genutzt werden, so ist der generierte Code immer derselbe!
Sofern die Commands für das Generieren von Code genutzt werden, so ist der generierte Code immer derselbe!
### `Install NX global`
## `Install NX global`
npm install -g nx
```bash
npm install-g nx
```
Mit `nx` bzw. `nx --list` krieg man eine Liste alle verfügbaren, schon von nx **vordefinierten** commands an
Mit `nx` bzw. `nx --list` krieg man eine Liste alle verfügbaren, schon von nx **vordefinierten** commands an
</br>
</br>
## Anbei ein Ausschnitt der verfügbaren Befehle/Scripte und einer kurzen Erläuterung.
## Anbei ein Ausschnitt der verfügbaren Befehle/Scripte und einer kurzen Erläuterung.
| Command | Description | Examples |
| Command | Description | Examples |
| :------ | :------ | :----- |
| :------ | :------ | :----- |
| `start` | Startet den Client mit dem Port **4300** und der **proxy.conf.json** | `npm start / npm run start`
| `start` | Startet den Client mit dem Port **4300** und der **proxy.conf.json** | `npm start / npm run start`
...
@@ -80,28 +89,26 @@ Mit `nx` bzw. `nx --list` krieg man eine Liste alle verfügbaren, schon von nx *
...
@@ -80,28 +89,26 @@ Mit `nx` bzw. `nx --list` krieg man eine Liste alle verfügbaren, schon von nx *
| `dep-graph` | Öffnet ein Fenster zur graphischen Veranschaulichung des Zusammenspielst von app, e2e und der einzelnen libraries | `npm run dep-graph`
| `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`
| `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 vorgang`
| `test:lib` | Führt alle Test's einer library aus(mit watch mode) | `npm run test: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 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 vorgang`
</br>
</br>
## Affected
## Affected
Hier eine kurze Liste mit den wichtigsten Befehlen:
Hier eine kurze Liste mit den wichtigsten Befehlen:
`affected:*`: </br>
`affected:*`: </br>
Bezieht sich meistens auf die von den lokalen Änderungen betroffenen Libraries, kann sich aber auch auf die betroffenen Projekte beziehen.
Bezieht sich meistens auf die von den lokalen Änderungen betroffenen Libraries, kann sich aber auch auf die betroffenen Projekte beziehen.
-`affected:libs`
-`affected:libs`
Zeigt eine Liste der Libraries die von den lokalen Änderungen betroffen sind </br>
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)
(hier kann man zusätzlich auch den `dep-graph` zur Hand nehmen für eine bessere Übersicht)
-`affected:test`
-`affected:test`
Führt die Test's für die Libraries aus die von den lokalen Änderungen betroffen sind.</br>
Führt die Test's für die Libraries aus die von den lokalen Änderungen betroffen sind.</br>
(inklusive der app Test's)
(inklusive der app Test's)
-`affected:lint`
-`affected:lint`
Führt das eslint über die betroffenen Libraries aus. </br>
Führt das eslint über die betroffenen Libraries aus. </br>
Man bekommt am Ende eine Zusammenfassung von den Warnings und Errors.
Man bekommt am Ende eine Zusammenfassung von den Warnings und Errors.
-`affected:dep-graph`
-`affected:dep-graph`
Selektiert die von den lokalen Änderung betroffenen Libraries vor und stellt diese in Rot dar. </br>
Selektiert die von den lokalen Änderung betroffenen Libraries vor und stellt diese in Rot dar. </br>
(sonst identisch zu `dep-graph`)
(sonst identisch zu `dep-graph`)
`affected:apps`, `affected:e2e`, `affected:build` beziehen sich jeweils auf ganze Projekte/Apps.
`affected:apps`, `affected:e2e`, `affected:build` beziehen sich jeweils auf ganze Projekte/Apps.