HowtoForge

Tutoriels Linux

Comment installer Angular sur Ubuntu 20.04 LTS

Angular est un framework d’application Web open-source permettant de créer des applications Web mobiles et de bureau. Il est écrit en TypeScript/JavaScript et a été créé en 2009 par Google. Il est spécialement conçu pour construire des applications de petite à grande échelle à partir de zéro. Il est livré avec un utilitaire Angular CLI qui t’aide à créer, gérer, construire et tester des applications Angular.

Dans ce tutoriel, nous allons te montrer comment installer Angular sur Ubuntu 20.04.

Conditions préalables

  • Un serveur exécutant Ubuntu 20.04.
  • Un mot de passe root est configuré sur le serveur.

Installe Node.js

Avant de commencer, tu dois installer Node.js et npm dans ton système. Par défaut, la dernière version de Node.js n’est pas disponible dans le dépôt par défaut d’Ubuntu 20.04. Tu devras donc ajouter le dépôt Node.js à ton système.

Tout d’abord, ajoute le dépôt Node.js avec la commande suivante :

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

Une fois ajouté, installe le Node.js avec la commande suivante :

apt-get install nodejs -y

Une fois installé, vérifie la version installée de Node.js avec la commande suivante :

node --version

Tu devrais voir la sortie suivante :

v14.7.0

Ensuite, mets à jour la version de npm à la dernière version en exécutant la commande suivante :

npm install [email protected] -g

Ensuite, vérifie la version de npm avec la commande suivante :

npm --version

Tu devrais obtenir le résultat suivant :

6.14.7

Installe Angular

Tu peux installer Angular en utilisant le npm comme indiqué ci-dessous :

npm install -g @angular/cli

Une fois installé, vérifie la version installée d’Angular à l’aide de la commande suivante :

ng version

Tu devrais obtenir la sortie suivante :

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

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

Créer un projet Angular

À ce stade, Angular est installé dans ton système. Il est temps de créer un nouveau projet avec Angular.

Tout d’abord, change le répertoire en /opt et crée un nouveau projet nommé myproject à l’aide de la commande suivante :

cd /opt
ng new myproject

Ensuite, change le répertoire en myproject et sers le projet avec la commande suivante :

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

Tu devrais voir la sortie suivante :

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.

Accéder à l’interface Web Angular

À ce stade, le projet Angular est déployé et écoute sur le port 8088. Tu peux y accéder en utilisant l’URL http://your-server-ip:8088. Tu devrais voir l’écran suivant :

Projet Angular JS

Conclusion

Félicitations ! Tu as réussi à installer Angular sur Ubuntu 20.04. Tu peux maintenant commencer à déployer ton premier projet avec Angular. L’une des grandes caractéristiques d’Angular est le rechargement à chaud de webpack qui déploie les modifications en direct et te fait gagner beaucoup de temps.

Vous aimerez aussi...