|
1 | | -# Ngelements |
| 1 | +## Angular Elements with React and Angular |
2 | 2 |
|
3 | | -This project was generated using [Nx](https://nx.dev). |
| 3 | +This is an example using Nx and the Angular CLI to create Angular Elements. NX is used to scaffold the React and Angular apps in a monorepo using the same commands to run the app. |
4 | 4 |
|
5 | | -<p align="center"><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png" width="450"></p> |
| 5 | +**Init Project** |
| 6 | +* Build Elements `ng build core --output-hashing none --single-bundle true --keep-polyfills true` |
| 7 | +* Serve app `ng serve <appname>` e.g `ng serve angularapp` |
6 | 8 |
|
7 | | -🔎 **Nx is a set of Angular CLI power-ups for modern development.** |
| 9 | +**Slides** |
| 10 | +(English): TBD |
8 | 11 |
|
9 | | -## Quick Start & Documentation |
| 12 | +**Post** |
| 13 | +TBD |
10 | 14 |
|
11 | | -[Nx Documentation](https://nx.dev) |
| 15 | +**Follow me in** [Twitter](https://twitter.com/malvarezcr) | [Medium](https://medium.com/@mahcr) | [Linkedin](https://www.linkedin.com/in/mahcr/) |
12 | 16 |
|
13 | | -[30-minute video showing all Nx features](https://nx.dev/getting-started/what-is-nx) |
| 17 | +**Follow** the Angular Community in Costa Rica |
14 | 18 |
|
15 | | -[Interactive Tutorial](https://nx.dev/tutorial/01-create-application) |
| 19 | +[Facebook](https://www.facebook.com/angularcostarica/) | [Twitter](https://twitter.com/AngularCR) | [Medium](https://medium.com/angularcostarica) | [YouTube](https://www.youtube.com/channel/UC4vCnqA5s8IR2zCcSXp63_w) |
16 | 20 |
|
17 | | -## Adding capabilities to your workspace |
| 21 | +--- |
18 | 22 |
|
19 | | -Nx supports many plugins which add capabilities for developing different types of applications and different tools. |
| 23 | +## Angular Elements con React y Angular |
20 | 24 |
|
21 | | -These capabilities include generating applications, libraries, .etc as well as the devtools to test, and build projects as well. |
| 25 | +Este es un ejemplo utilizando Nx y el Angular CLI para crear Angular Elements. Nx es usado para generar las aplicaciones en React y Angular en un monorepo, a su vez permitiendo usar los mismos comandos. |
22 | 26 |
|
23 | | -Below are some plugins which you can add to your workspace: |
| 27 | +**Inciar el Proyecto** |
| 28 | +* Build Elements `ng build core --output-hashing none --single-bundle true --keep-polyfills true` |
| 29 | +* Serve app `ng serve <appname>` e.g `ng serve angularapp` |
24 | 30 |
|
25 | | -- [Angular](https://angular.io) |
26 | | - - `ng add @nrwl/angular` |
27 | | -- [React](https://reactjs.org) |
28 | | - - `ng add @nrwl/react` |
29 | | -- Web (no framework frontends) |
30 | | - - `ng add @nrwl/web` |
31 | | -- [Nest](https://nestjs.com) |
32 | | - - `ng add @nrwl/nest` |
33 | | -- [Express](https://expressjs.com) |
34 | | - - `ng add @nrwl/express` |
35 | | -- [Node](https://nodejs.org) |
36 | | - - `ng add @nrwl/node` |
| 31 | +**Presentación** |
| 32 | +Spanish: TBD |
37 | 33 |
|
38 | | -## Generate an application |
| 34 | +**Pueden seguirme:** [Twitter](https://twitter.com/malvarezcr) | [Medium](https://medium.com/@mahcr) | [Linkedin](https://www.linkedin.com/in/mahcr/) |
39 | 35 |
|
40 | | -Run `ng g @nrwl/angular:app my-app` to generate an application. |
41 | | - |
42 | | -> You can use any of the plugins above to generate applications as well. |
43 | | -
|
44 | | -When using Nx, you can create multiple applications and libraries in the same workspace. |
45 | | - |
46 | | -## Generate a library |
47 | | - |
48 | | -Run `ng g @nrwl/angular:lib my-lib` to generate a library. |
49 | | - |
50 | | -> You can also use any of the plugins above to generate libraries as well. |
51 | | -
|
52 | | -Libraries are sharable across libraries and applications. They can be imported from `@ngelements/mylib`. |
53 | | - |
54 | | -## Development server |
55 | | - |
56 | | -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. |
57 | | - |
58 | | -## Code scaffolding |
59 | | - |
60 | | -Run `ng g component my-component --project=my-app` to generate a new component. |
61 | | - |
62 | | -## Build |
63 | | - |
64 | | -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. |
65 | | - |
66 | | -## Running unit tests |
67 | | - |
68 | | -Run `ng test my-app` to execute the unit tests via [Jest](https://jestjs.io). |
69 | | - |
70 | | -Run `npm run affected:test` to execute the unit tests affected by a change. |
71 | | - |
72 | | -## Running end-to-end tests |
73 | | - |
74 | | -Run `ng e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io). |
75 | | - |
76 | | -Run `npm run affected:e2e` to execute the end-to-end tests affected by a change. |
77 | | - |
78 | | -## Understand your workspace |
79 | | - |
80 | | -Run `npm run dep-graph` to see a diagram of the dependencies of your projects. |
81 | | - |
82 | | -## Further help |
83 | | - |
84 | | -Visit the [Nx Documentation](https://nx.dev) to learn more. |
| 36 | +**Sigan** la comunidad de Angular en Costa Rica: |
| 37 | +[Facebook](https://www.facebook.com/angularcostarica/) | [Twitter](https://twitter.com/AngularCR) | [Medium](https://medium.com/angularcostarica) | [YouTube](https://www.youtube.com/channel/UC4vCnqA5s8IR2zCcSXp63_w) |
0 commit comments