Angular est un framework d'applications Web open source pour la création d'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 créer des applications à petite et grande échelle à partir de zéro. Il est livré avec un utilitaire CLI angulaire qui vous aide à créer, gérer, construire et tester des applications angulaires.
Dans ce tutoriel, nous allons vous montrer comment installer Angular sur Ubuntu 20.04.
Prérequis
- Un serveur exécutant Ubuntu 20.04.
- Un mot de passe root est configuré sur le serveur.
Installer Node.js
Avant de commencer, vous devrez installer Node.js et npm sur votre système. Par défaut, la dernière version de Node.js n'est pas disponible dans le référentiel par défaut d'Ubuntu 20.04. Vous devrez donc ajouter le référentiel Node.js à votre système.
Tout d'abord, ajoutez le dépôt Node.js avec la commande suivante :
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Une fois ajouté, installez le Node.js avec la commande suivante :
apt-get install nodejs -y
Une fois installé, vérifiez la version installée de Node.js avec la commande suivante :
node --version
Vous devriez voir le résultat suivant :
v14.7.0
Ensuite, mettez à jour la version npm vers la dernière version en exécutant la commande suivante :
npm install [email protected] -g
Ensuite, vérifiez la version de npm avec la commande suivante :
npm --version
Vous devriez obtenir le résultat suivant :
6.14.7
Installer angulaire
Vous pouvez installer Angular en utilisant le npm comme indiqué ci-dessous :
npm install -g @angular/cli
Une fois installé, vérifiez la version installée d'Angular à l'aide de la commande suivante :
ng version
Vous devriez voir le résultat suivant :
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
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 angulaire
À ce stade, Angular est installé sur votre système. Il est temps de créer un nouveau projet avec Angular.
Tout d'abord, changez le répertoire en /opt et créez un nouveau projet nommé myproject avec la commande suivante :
cd /opt
ng new myproject
Ensuite, changez le répertoire en myproject et servez le projet avec la commande suivante :
cd myproject
ng serve --host your-server-ip --port 8088
Vous devriez voir le résultat suivant :
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 angulaire
À ce stade, le projet Angular est déployé et écoute sur le port 8088. Vous pouvez y accéder à l'aide de l'URL http://your-server-ip:8088. Vous devriez voir l'écran suivant :
Conclusion
Toutes nos félicitations! vous avez installé avec succès Angular sur Ubuntu 20.04. Vous pouvez maintenant commencer à déployer votre premier projet avec Angular. L'une des grandes fonctionnalités d'Angular est le rechargement à chaud du webpack qui déploie le changement en direct et vous fait gagner beaucoup de temps.