Cómo instalar Angular en Ubuntu 20.04 LTS

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:

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.