🔎 **Nx is a set of Extensible Dev Tools for Monorepos.**
## Quick Start & Documentation
[Nx Documentation](https://nx.dev/angular)
...
...
@@ -24,77 +20,82 @@ Below are our core plugins:
-[Angular](https://angular.io)
-`ng add @nrwl/angular`
-[React](https://reactjs.org)
-`ng add @nrwl/react`
- Web (no framework frontends)
-`ng add @nrwl/web`
-[Nest](https://nestjs.com)
-`ng add @nrwl/nest`
-[Express](https://expressjs.com)
-`ng add @nrwl/express`
-[Node](https://nodejs.org)
-`ng add @nrwl/node`
There are also many [community plugins](https://nx.dev/nx-community) you could add.
## Generate an application
Run `ng g @nrwl/angular:app my-app` to generate an application.
> You can use any of the plugins above to generate applications as well.
When using Nx, you can create multiple applications and libraries in the same workspace.
## Generate a library
Run `ng g @nrwl/angular:lib my-lib` to generate a library.
> You can also use any of the plugins above to generate libraries as well.
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`.
## Development server
Run `ng serve my-app` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
## Code scaffolding
## Generate a Component
Run `ng g component my-component --project=my-app` to generate a new component.
## Build
Run `ng build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
## Running unit tests
</br>
Run `ng test my-app` to execute the unit tests via [Jest](https://jestjs.io).
#
</br>
Run `nx affected:test` to execute the unit tests affected by a change.
## Allgemein
Man kann mit Hilfe von `nx --help` eine Liste von Befehlen mit kurzen Erläuterung bekommen.
## Running end-to-end tests
</br>
Run `ng e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).
### NG/NX short explanation
Run `nx affected:e2e` to execute the end-to-end tests affected by a change.
- Angular ClI = **ng**
- Nx Cli = **nx**
Run `npm run cypress:open` to open cypress runner.
Nx Cli baut auf Angular Cli auf ist jedoch wesentlich schneller bspw. durch
- _advanced code analysis_
- _computation caching (reuse previous results)_
## Understand your workspace
Sofern die Commands für das Generieren von Code genutzt werden, so ist der generierte Code immer derselbe!
Run `nx dep-graph` to see a diagram of the dependencies of your projects.
### `Install NX global`
npm install -g nx
## Further help
Mit `nx` bzw. `nx --list` krieg man eine Liste alle verfügbaren, schon von nx **vordefinierten** commands an
Visit the [Nx Documentation](https://nx.dev/angular) to learn more.
</br>
## ☁ Nx Cloud
## 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*** + ***libraries***) | `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 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`
Hier eine kurze Liste mit den wichtigsten Befehlen:
Nx Cloud pairs with Nx in order to enable you to build and test code more rapidly, by up to 10 times. Even teams that are new to Nx can connect to Nx Cloud and start saving time instantly.
`affected:*`: </br>
Bezieht sich meistens auf die von den lokalen Änderungen betroffenen Libraries, kann sich aber auch auf die betroffenen Projekte beziehen.
Teams using Nx gain the advantage of building full-stack applications with their preferred framework alongside Nx’s advanced code generation and project dependency graph, plus a unified experience for both frontend and backend developers.
-`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`)
Visit [Nx Cloud](https://nx.app/) to learn more.
`affected:apps`, `affected:e2e`, `affected:build` beziehen sich jeweils auf ganze Projekte/Apps.
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`
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*** + ***libraries***) | `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 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
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.
