Cómo instalar Angular en Ubuntu 20.04 LTS

proyecto js angular

Angular es un marco de aplicaci√≥n web de c√≥digo abierto para crear aplicaciones web m√≥viles y de escritorio. Est√° escrito en TypeScript/JavaScript y fue creado en 2009 por Google. Est√° especialmente dise√Īado para crear aplicaciones de peque√Īa a gran escala desde cero. Viene con una utilidad Angular CLI que lo ayuda a crear, administrar, construir y probar aplicaciones Angular.

En este tutorial, le mostraremos cómo instalar Angular en Ubuntu 20.04.

requisitos previos

  • Un servidor con Ubuntu 20.04.
  • Una contrase√Īa de root est√° configurada en el servidor.

Instalar Node.js

Antes de comenzar, deber√° instalar Node.js y npm en su sistema. De forma predeterminada, la √ļltima versi√≥n de Node.js no est√° disponible en el repositorio predeterminado de Ubuntu 20.04. Por lo tanto, deber√° agregar el repositorio Node.js a su sistema.

Primero, agregue el repositorio Node.js con el siguiente comando:

curl -sL https://deb.nodesource.com/setup_14.x | bash -

Una vez agregado, instale Node.js con el siguiente comando:

apt-get install nodejs -y

Una vez instalado, verifique la versión instalada de Node.js con el siguiente comando:

node --version

Debería ver el siguiente resultado:

v14.7.0

A continuaci√≥n, actualice la versi√≥n de npm a la √ļltima versi√≥n ejecutando el siguiente comando:

npm install [email protected] -g

A continuación, verifique la versión de npm con el siguiente comando:

npm --version

Deberías obtener el siguiente resultado:

6.14.7

instalar angular

Puede instalar Angular usando npm como se muestra a continuación:

npm install -g @angular/cli

Una vez instalado, verifique la versión instalada de Angular usando el siguiente comando:

ng version

Debería ver el siguiente resultado:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.5
Node: 14.7.0
OS: linux x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1000.5
@angular-devkit/core         10.0.5
@angular-devkit/schematics   10.0.5
@schematics/angular          10.0.5
@schematics/update           0.1000.5
rxjs                         6.5.5

Crear Proyecto Angular

En este punto, Angular est√° instalado en su sistema. Es hora de crear un nuevo proyecto con Angular.

Primero, cambia el directorio a /opt y crea un nuevo proyecto llamado myproject con el siguiente comando:

cd /opt
ng new myproject

A continuación, cambie el directorio a myproject y sirva el proyecto con el siguiente comando:

cd myproject
ng serve --host your-server-ip --port 8088

Debería ver el siguiente resultado:

WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.65 MB [initial] [rendered]
Date: 2020-08-09T14:10:36.644Z - Hash: a053188b5496361814a2 - Time: 14873ms
** Angular Live Development Server is listening on 69.87.218.220:8088, open your browser on http://69.87.218.220:8088/ **
: Compiled successfully.

Acceder a la interfaz web angular

En este punto, el proyecto Angular está implementado y escuchando en el puerto 8088. Puede acceder a él mediante la URL http://your-server-ip:8088. Debería ver la siguiente pantalla:

proyecto js angular

Conclusión

¡Felicidades! Ha instalado correctamente Angular en Ubuntu 20.04. Ahora puede comenzar a implementar su primer proyecto con Angular. Una de las mejores características de Angular es la recarga en caliente del paquete web que implementa el cambio en vivo y le ahorra mucho tiempo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *