Vyhledávání na webu

Angular CLI - Jak vytvořit nový Angular projekt v Linuxu


Angular je open source, populární a vysoce rozšiřitelný rámec pro vývoj front-end aplikací, který se používá k vytváření mobilních a webových aplikací pomocí TypeScript/JavaScriptu a další běžné jazyky.

Angular je zastřešující termín pro všechny verze Angular, které následují po AngularJS (nebo Angular verzi 1.0), včetně Angular 2 a Angular 4.

Angular se dobře hodí pro vytváření malých i velkých aplikací od začátku. Jednou z klíčových součástí platformy Angular pro podporu vývoje aplikací je nástroj Angular CLI – je to jednoduchý a snadno použitelný nástroj příkazového řádku, který se používá k vytváření , spravovat, sestavovat a testovat aplikace Angular.

V tomto článku vysvětlíme, jak nainstalovat nástroj příkazového řádku Angular v systému Linux, a naučíme se některé základní příklady tohoto nástroje.

Instalace Node.js v Linuxu

Chcete-li nainstalovat Angular CLI, musíte mít na svém systému Linux nainstalovanou nejnovější verzi Node.js a NPM.

Nainstalujte Node.js na Ubuntu

------------- For Node.js v19.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

Nainstalujte Node.js na Debian

------------- For Node.js v19.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v18.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v16.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v14.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
sudo apt-get install -y nodejs

Nainstalujte Node.js na RHEL, CentOS, Fedora, Rocky & Alma Linux

------------- For Node.js v19.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v18.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v16.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v14.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs

Chcete-li také zkompilovat a nainstalovat nativní doplňky z NPM, budete možná muset do systému nainstalovat vývojové nástroje následujícím způsobem.

sudo apt install -y build-essential  [On Debian/Ubuntu]
sudo yum install gcc-c++ make        [On RHEL Systems]

Instalace Angular CLI v Linuxu

Jakmile budete mít nainstalované Node.js a NPM, jak je uvedeno výše, můžete nainstalovat Angular CLI pomocí správce balíčků npm následovně (příznak -g znamená instalaci nástroje pro celý systém, aby jej mohli používat všichni uživatelé systému).

npm install -g @angular/cli
OR
sudo npm install -g @angular/cli

Angular CLI můžete spustit pomocí spustitelného souboru ng, který by měl být nyní nainstalován na váš systém. Spuštěním následujícího příkazu zkontrolujte nainstalovanou verzi Angular CLI.

ng version
OR
ng --version

Vytvoření úhlového projektu pomocí Angular CLI

V této části si ukážeme, jak vytvořit, sestavit a obsluhovat nový základní projekt Angular. Nejprve se přesuňte do adresáře webroot vašeho serveru a poté inicializujte novou aplikaci Angular následovně (nezapomeňte postupovat podle pokynů):

cd /var/www/html/
ng new tecmint-app			#as root
OR
sudo ng new tecmint-app		#non-root user

Dále se přesuňte do adresáře aplikace, který byl právě vytvořen, a obsluhujte aplikaci podle obrázku.

cd tecmint-app
ls 			#list project files
ng serve

Pokud máte spuštěnou službu brány firewall, abyste mohli přistupovat k nové aplikaci z webového prohlížeče, musíte v konfiguraci brány firewall otevřít port 4200, jak je znázorněno.

---------- On Firewalld ---------- 
firewall-cmd --permanent --zone=public --add-port=4200/tcp 
firewall-cmd --reload

---------- On UFW ----------
sudo ufw allow 4200/tcp
sudo ufw reload

Nyní můžete otevřít webový prohlížeč a procházet pomocí následující adresy, abyste viděli spuštění nové aplikace, jak je znázorněno na následujícím snímku obrazovky.

http://localhost:4200/ 
or 
http://SERVER_IP:4200 

Poznámka: Pokud použijete příkaz ng serve k vytvoření aplikace a budete ji sloužit místně, jak je uvedeno výše, server aplikaci automaticky znovu sestaví a znovu načte webovou stránku (stránky), když změníte některý ze zdrojových souborů.

Další informace o nástroji ng získáte spuštěním následujícího příkazu.

ng help

Domovská stránka Angular CLI: https://angular.io/cli

V tomto článku jsme si ukázali, jak nainstalovat Angular CLI na různé distribuce Linuxu. Také jsme se zabývali tím, jak sestavit, zkompilovat a obsluhovat základní aplikaci Angular na vývojovém serveru. Máte-li jakékoli dotazy nebo myšlenky, o které se s námi chcete podělit, použijte níže uvedený formulář zpětné vazby.