Comment installer une clib angulaire sur Ubuntu 20.04

Angular est le cadre le plus populaire utilisé pour créer des applications mobiles et Web. Angular est un cadre d'application Web open source développé par Google une grande communauté de personnes. À ce jour, Angular 10 est la dernière version disponible pour l'installation. Ce tutoriel vous aidera à installer un module de nœud CLI angulaire sur votre Ubuntu 20.04 Système Linux.

Étape 1 - Installation de nœud.js

NVM est un outil de ligne de commande pour installer et gérer le nœud.JS sur le système Linux. Nous devons donc d'abord installer NVM sur notre système. Connectez-vous à système avec l'utilisateur pour lequel vous devez installer le nœud.js, puis exécutez la commande ci-dessous pour installer nvm:

curl https: // brut.githubusercontent.com / créationix / nvm / maître / install.sh | frapper  

Après cela, vous pouvez installer n'importe quelle version de Node sur votre système. Vous pouvez également installer plusieurs versions de nœuds sur un seul système. Exécuter des commandes ci-dessous pour charger l'environnement et installer le dernier nœud.Version JS:

source ~ /.bashrc nœud d'installation NVM 

La commande ci-dessus affichera la version du nœud et du NPM installé sur votre système.

Étape 2 - Installation de CLI angulaire

Après avoir installé le nœud.JS et NPM sur votre système, utilisez les commandes suivantes pour installer l'outil CLI angulaire sur votre système.

NPM Install -g @ Angular / CLI 

La dernière version d'Angular CLI sera installée sur votre système Ubuntu Linux.

NPM Install -g @ Angular / [Email Protected]8 #Angulaire 8 NPM Install -g @ Angular / [Email Protected]9 #Angulaire 9 NPM Install -g @ Angular / [Email Protected]dix #Angulaire 10 

L'utilisation de la commande -g ci-dessus installera l'outil CLI angulaire à l'échelle mondiale. Il sera donc accessible à tous les utilisateurs et applications du système. Angular CLI fournit une commande not Utilisé pour les opérations de ligne de commande. Vérifions la version installée de NG sur votre système.

ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ | / △ \ | '_ \ / _' | | | | | / _ '| '__ | | | | | | | / ___ \ | | | | (_ | | | _ | | | | (_ | | | | | ___ | | ___ | | / _ / \ _ \ _ | | _ | \ __, | \ __, _ | _ | \ __, _ | _ | \ ____ | _____ | ___ | | ___ / CLI angulaire: 10.1.1 nœud: 14.dix.1 OS: Linux x64 Angular:… Ivy Workspace: Package Version ------------------------------------- ----------------- @ Angular-Devkit / Architect 0.1001.1 @ Angular-Devkit / Core 10.1.1 @ Angular-Devkit / Schematics 10.1.1 @ schémas / angulaire 10.1.1 @ schémas / mise à jour 0.1001.1 rxjs 6.6.2 

L'interface de ligne de commande angulaire a été installée sur votre système. Pour l'application existante, peut démarrer votre travail et ignorer l'article REST.

Suivez les étapes suivantes pour créer une nouvelle application angulaire sur votre système.

Étape 3 - Création d'une nouvelle application angulaire

Vous pouvez utiliser la commande NG pour créer une nouvelle application angulaire. Créer une application nommée Hello-World à l'aide de l'outil de ligne de commande angulaire. Exécutez la commande ci-dessous dans le terminal:

ng nouveau hello-world 

Sortir:

? Souhaitez-vous ajouter un routage angulaire? Oui ? Quel format de feuille de style aimeriez-vous utiliser? CSS Créer Hello-World / Readme.MD (1028 octets) Créer Hello-World /.EditorConfig (274 octets) Créer Hello-World /.Gitignore (631 octets) Créer Hello-World / Angular.JSON (3606 octets) Créer Hello-World / Package.JSON (1254 octets) Créer Hello-World / TSConfig.JSON (458 octets) Créer Hello-World / Tslint.JSON (3185 octets) Créer Hello-World /.BrowSerslistc (853 octets) Créer Hello-World / Karma.confli.JS (1023 octets) Créer Hello-World / TSConfig.appliquer.JSON (287 octets) Créer Hello-World / TSConfig.spécifier.JSON (333 octets) Créer Hello-World / Src / Favicon.ICO (948 octets) Créer Hello-World / Src / index.HTML (296 octets) Créer Hello-World / Src / Main.TS (372 octets) Créer Hello-World / SRC / Polyfills.TS (2835 octets) Créer Hello-World / SRC / Styles.CSS (80 octets) Créer Hello-World / SRC / Test.TS (753 octets) Créer Hello-World / Src / Assets /.GitKeep (0 octets) Créer Hello-World / Src / Environments / Environnement.faire un coup de pouce.TS (51 octets) Créer Hello-World / Src / Environments / Environnement.TS (662 octets) Créer Hello-World / Src / App / App-Rout.module.TS (245 octets) Créer Hello-World / Src / App / App.module.TS (393 octets) Créer Hello-World / Src / App / App.composant.CSS (0 octets) Créer Hello-World / Src / App / App.composant.HTML (25757 octets) Créer Hello-World / Src / App / App.composant.spécifier.TS (1072 octets) Créer Hello-World / Src / App / App.composant.TS (215 octets) Créer Hello-World / E2E / ProTracteur.confli.JS (869 octets) Créer Hello-World / E2E / TSConfig.JSON (294 octets) Créer Hello-World / E2E / SRC / App.E2E-Spec.TS (644 octets) Créer Hello-World / E2E / SRC / App.pote.TS (301 octets) ✔ Packages installés avec succès. Initialisé avec succès Git. 

Cela créera un répertoire nommé Hello-World dans votre répertoire actuel et créera tous les fichiers nécessitent une application angulaire.

Étape 4 - Servir l'application angulaire

Votre application angulaire de base est prête à servir. Passez au répertoire Hello-World, puis exécutez votre application angulaire à l'aide de la commande NG Serve.

CD Hello-World Ng servir 

Par défaut, l'application angulaire fonctionne sur le port 4200. Vous pouvez accéder à votre système sur le port 4200 pour ouvrir l'application angulaire, comme:

• http: // localhost: 4200

Vous pouvez modifier l'hôte et le port pour exécuter l'application angulaire en fournissant des arguments de ligne de commande-host et -port.

ng servir - host 0.0.0.0 --port 8080 

L'adresse IP 0.0.0.0 écoute sur toutes les interfaces et accessibles au public.

Conclusion

Dans ce tutoriel, vous avez appris à installer l'utilitaire de ligne de commande angulaire en tant que package de nœud. Ce tutoriel vous a également aidé à créer une nouvelle application angulaire. Maintenant, visitez ici pour configurer l'application angulaire derrière le serveur Apache.