En esta página:
La mejor manera y recomendada por el equipo de Angular, para crear un nuevo proyecto, es usando la Angular CLI.
Cuando creas un proyecto con Angular CLI, se hace de manera rápida y sigue el patrón correcto de Angular.
En este tutorial, aprenderás a Como Crear Un Proyecto Angular Usando Angular CLI, vamos con ello.
Instalación de la Angular CLI
Lo primero que tienes que hacer es instalar la Angular CLI, ejecutando el siguiente comando:
|
1 2 3 4 5 6 7 8 |
npm install -g @angular/cli added 231 packages in 11s 45 packages are looking for funding run `npm fund` for details |
Luego de ejecutar el comando anterior, se nos ha instalado no solo Angular CLI sino también Angular Framework para poder usarlo correctamente.
Creación de Proyecto Angular con la Angular CLI
Ahora vamos a crear un nuevo proyecto usando la Angular CLI.
También nos servirá para verificar que la Angular CLI se ha instalado correctamente.
Ejecuta el siguiente comando para crear un nuevo proyecto usando la Angular CLI (le daré el nombre miproyectoangular, tu le puedes poner tu propio nombre):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
ng new miproyectoangular CREATE miproyectoangular/angular.json (2742 bytes) CREATE miproyectoangular/package.json (1086 bytes) CREATE miproyectoangular/README.md (1098 bytes) CREATE miproyectoangular/tsconfig.json (936 bytes) CREATE miproyectoangular/.editorconfig (290 bytes) CREATE miproyectoangular/.gitignore (590 bytes) CREATE miproyectoangular/tsconfig.app.json (277 bytes) CREATE miproyectoangular/tsconfig.spec.json (287 bytes) CREATE miproyectoangular/.vscode/extensions.json (134 bytes) CREATE miproyectoangular/.vscode/launch.json (490 bytes) CREATE miproyectoangular/.vscode/tasks.json (980 bytes) CREATE miproyectoangular/src/main.ts (256 bytes) CREATE miproyectoangular/src/favicon.ico (15086 bytes) CREATE miproyectoangular/src/index.html (316 bytes) CREATE miproyectoangular/src/styles.css (81 bytes) CREATE miproyectoangular/src/app/app.component.html (20239 bytes) CREATE miproyectoangular/src/app/app.component.spec.ts (978 bytes) CREATE miproyectoangular/src/app/app.component.ts (326 bytes) CREATE miproyectoangular/src/app/app.component.css (0 bytes) CREATE miproyectoangular/src/app/app.config.ts (235 bytes) CREATE miproyectoangular/src/app/app.routes.ts (80 bytes) CREATE miproyectoangular/src/assets/.gitkeep (0 bytes) - Installing packages (npm)... √ Packages installed successfully. Successfully initialized git. |
Tras ejecutar el comando anterior, se me ha creado un directorio con el nombre miproyectoangular y en el hay un conjunto de directorios y archivos indispensables para que el proyecto funcione correctamente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/miproyectoangular ├── .vscode/ // Este directorio solo te aparece si usas Visual Studio Code ├── node_modules/ ├── src/ ├── .editorconfig ├── .gitignore ├── angular.json ├── package.json ├── package-lock.json ├── README.md ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json |
Ahora probemos si el proyecto se creo correctamente.
Probando el Proyecto Creado con la Angular CLI
Ingresamos al directorio del proyecto y luego ejecutamos el servidor de Angular Framework:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
# Ingresamos al directorio del proyecto cd miproyectoangular # Iniciamos el servidor de desarrollo de Angular Framework ng serve - Building... Initial Chunk Files | Names | Raw Size polyfills.js | polyfills | 83.46 kB | main.js | main | 22.10 kB | styles.css | styles | 95 bytes | | Initial Total | 105.65 kB Application bundle generation complete. [1.488 seconds] Watch mode enabled. Watching for file changes... ➜ Local: http://localhost:4200/ |
Vamos al navegador y abrimos la ruta http://localhost:4200/ y podemos ver que nuestro proyecto se ha creado correctamente:
Así es como puedes crear un proyecto Angular usando Angular CLI.
Conclusión
En este tutorial has aprendido a Como Crear Un Proyecto Angular Usando Angular CLI.
Te servirá como base para crear proyectos con Angular Framework más avanzados.
Recuerda practicar mucho, ya que la practica hace al maestro.
Nota(s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.