Como Crear Un Proyecto Angular Usando Angular CLI

3 minuto(s)

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.

Proyecto de Angular Framework creado usando la Angular CLI — La Angular CLI te permite realizar diferentes tareas en proyectos creados con Angular Framework

Instalación de la Angular CLI

Lo primero que tienes que hacer es instalar la Angular CLI, ejecutando el siguiente comando:


npm install -g @angular/cli

added 231 packages in 11s

45 packages are looking for funding
  run `npm fund` for details

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):


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.

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:


/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

/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:


# 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/

# 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:

Proyecto de Angular Framework funcionando — Este proyecto es el que Angular crea por defecto

Así es como puedes crear un proyecto Angular usando Angular CLI.

Conoce las Mejores Prácticas Para Crear Un Proyecto en Angular.

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.

Angular
10-02-2024
14-03-2024
Crear un Post - Eventos Devs - Foro

Tutorial

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts