Angular CLI - Πώς να δημιουργήσετε ένα νέο Angular Project στο Linux


Το Angular είναι ένα ανοιχτού κώδικα, δημοφιλές και εξαιρετικά επεκτάσιμο πλαίσιο ανάπτυξης εφαρμογών διεπαφής, που χρησιμοποιείται για τη δημιουργία εφαρμογών για κινητές συσκευές και web χρησιμοποιώντας TypeScript/JavaScript και άλλες κοινές γλώσσες.

Το Angular είναι ένας γενικός όρος για όλες τις εκδόσεις Angular που έρχονται μετά το AngularJS (ή Angular έκδοση 1.0) συμπεριλαμβανομένου του Angular 2 και Angular 4.

Το Angular είναι κατάλληλο για τη δημιουργία εφαρμογών μικρής έως μεγάλης κλίμακας από την αρχή. Ένα από τα βασικά στοιχεία της πλατφόρμας Angular για να βοηθήσει την ανάπτυξη εφαρμογών είναι το βοηθητικό πρόγραμμα Angular CLI – είναι ένα απλό και εύχρηστο εργαλείο γραμμής εντολών που χρησιμοποιείται για τη δημιουργία , διαχείριση, δημιουργία και δοκιμή εφαρμογών Angular.

Σε αυτό το άρθρο, θα εξηγήσουμε πώς να εγκαταστήσετε το εργαλείο γραμμής εντολών Angular σε ένα σύστημα Linux και θα μάθουμε μερικά βασικά παραδείγματα αυτού του εργαλείου.

Εγκατάσταση του Node.js σε Linux

Για να εγκαταστήσετε το Angular CLI, πρέπει να έχετε εγκατεστημένη την πιο πρόσφατη έκδοση του Node.js και του NPM στο σύστημά σας Linux.

Εγκαταστήστε το Node.js στο 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

Εγκαταστήστε το Node.js στο 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

Εγκαταστήστε το Node.js σε 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

Επίσης, για να μεταγλωττίσετε και να εγκαταστήσετε εγγενή πρόσθετα από το NPM, ίσως χρειαστεί να εγκαταστήσετε εργαλεία ανάπτυξης στο σύστημά σας ως εξής.

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

Εγκατάσταση Angular CLI σε Linux

Αφού εγκαταστήσετε το Node.js και το NPM, όπως φαίνεται παραπάνω, μπορείτε να εγκαταστήσετε το Angular CLI χρησιμοποιώντας τη npm διαχείριση πακέτων ως εξής (η σημαία -g σημαίνει εγκατάσταση του εργαλείου σε όλο το σύστημα για χρήση από όλους τους χρήστες του συστήματος).

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

Μπορείτε να εκκινήσετε το Angular CLI χρησιμοποιώντας το εκτελέσιμο αρχείο ng που θα πρέπει τώρα να εγκατασταθεί στο σύστημά σας. Εκτελέστε την ακόλουθη εντολή για να ελέγξετε την εγκατεστημένη έκδοση του Angular CLI.

ng version
OR
ng --version

Δημιουργία ενός Angular Project με χρήση Angular CLI

Σε αυτήν την ενότητα, θα δείξουμε πώς να δημιουργήσετε, να δημιουργήσετε και να εξυπηρετήσετε ένα νέο, βασικό έργο Angular. Αρχικά, μετακινηθείτε στον κατάλογο webroot του διακομιστή σας και, στη συνέχεια, αρχικοποιήστε μια νέα εφαρμογή Angular ως εξής (θυμηθείτε να ακολουθήσετε τις οδηγίες):

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

Στη συνέχεια, μετακινηθείτε στον κατάλογο της εφαρμογής που μόλις δημιουργήθηκε και εξυπηρετήστε την εφαρμογή όπως φαίνεται.

cd tecmint-app
ls 			#list project files
ng serve

Για να μπορέσετε να αποκτήσετε πρόσβαση στη νέα σας εφαρμογή από ένα πρόγραμμα περιήγησης ιστού, εάν έχετε μια υπηρεσία τείχους προστασίας σε λειτουργία, πρέπει να ανοίξετε τη θύρα 4200 στη διαμόρφωση του τείχους προστασίας όπως φαίνεται.

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

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

Τώρα μπορείτε να ανοίξετε ένα πρόγραμμα περιήγησης ιστού και να πλοηγηθείτε χρησιμοποιώντας την παρακάτω διεύθυνση για να δείτε τη νέα εφαρμογή να εκτελείται όπως φαίνεται στο παρακάτω στιγμιότυπο οθόνης.

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

Σημείωση: Εάν χρησιμοποιήσετε την εντολή ng serve για να δημιουργήσετε μια εφαρμογή και να την εξυπηρετήσετε τοπικά, όπως φαίνεται παραπάνω, ο διακομιστής αναδημιουργεί αυτόματα την εφαρμογή και επαναφορτώνει τις ιστοσελίδες όταν αλλάζετε οποιοδήποτε από τα αρχεία προέλευσης.

Για περισσότερες πληροφορίες σχετικά με το ng tool, εκτελέστε την ακόλουθη εντολή.

ng help

Η αρχική σελίδα του Angular CLI: https://angular.io/cli

Σε αυτό το άρθρο, δείξαμε πώς να εγκαταστήσετε το Angular CLI σε διαφορετικές διανομές Linux. Καλύψαμε επίσης τον τρόπο δημιουργίας, μεταγλώττισης και εξυπηρέτησης μιας βασικής εφαρμογής Angular σε έναν διακομιστή ανάπτυξης. Για τυχόν απορίες ή σκέψεις που θέλετε να μοιραστείτε μαζί μας, χρησιμοποιήστε την παρακάτω φόρμα σχολίων.