Como Crear Un Proyecto Angular Usando Angular CLI

3 minuto(s)

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.

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/