Angular CLI - Linux で新しい Angular プロジェクトを作成する方法

Angular は、オープンソースで人気があり、拡張性の高いフロントエンドアプリケーション開発フレームワークであり、TypeScript/JavaScript を使用してモバイルアプリケーションや Web アプリケーションを構築するために使用されます。 Strong> およびその他の一般的な言語。

Angular は、Angular 2 を含む、AngularJS (または Angular バージョン 1.0) 以降のすべての Angular バージョンを総称した用語です。、そしてAngular 4です。

Angular は、小規模から大規模なアプリケーションを最初から構築するのに適しています。アプリケーション開発を支援する Angular プラットフォームの重要なコンポーネントの 1 つは、Angular CLI ユーティリティです。これは、アプリケーションの開発に使用されるシンプルで使いやすいコマンドラインツールです。、Angular アプリケーションを管理、構築、テストします。

この記事では、Angular コマンドラインツールを Linux システムにインストールする方法を説明し、このツールの基本的な例をいくつか学びます。

Linux への Node.js のインストール

Angular CLI をインストールするには、最新バージョンの Node.js と NPM が Linux システムにインストールされている必要があります。

Ubuntu に Node.js をインストールする

------------- 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

Debian に Node.js をインストールする

------------- 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

RHEL、CentOS、Fedora、Rocky、Alma Linux に Node.js をインストールする

------------- 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]

Linux への Angular CLI のインストール

上記のように Node.js と NPM をインストールしたら、npm パッケージマネージャーを使用してAngular CLIをインストールできます。は次のようになります (-g フラグは、すべてのシステムユーザーが使用できるようにツールをシステム全体にインストールすることを意味します)。

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

システムにインストールされている ng 実行可能ファイルを使用して Angular CLI を起動できます。次のコマンドを実行して、インストールされているAngular CLI のバージョンを確認します。

ng version
OR
ng --version

Angular CLI を使用した Angular プロジェクトの作成

このセクションでは、新しい基本的な Angular プロジェクトを作成、構築、提供する方法を示します。まず、サーバーのウェブルート ディレクトリに移動し、次のように新しい 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

ファイアウォールサービスを実行している場合は、Web ブラウザから新しいアプリにアクセスする前に、図に示すようにファイアウォール設定でポート 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

これで、Web ブラウザを開いて次のアドレスを使用して移動し、次のスクリーンショットに示すように新しいアプリが実行されることを確認できます。

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

注: 上記のように、コマンド ngserve を使用してアプリケーションを構築し、ローカルで提供する場合、サーバーはアプリケーションを自動的に再構築します。ソースファイルを変更すると、Web ページがリロードされます。

ng ツール の詳細については、次のコマンドを実行してください。

ng help

Angular CLI ホームページ: https://angular.io/cli

この記事では、さまざまな Linux ディストリビューションにAngular CLI をインストールする方法を説明しました。また、開発サーバー上で基本的な Angular アプリケーションを構築、コンパイル、提供する方法についても説明しました。ご質問やご意見がございましたら、以下のフィードバックフォームをご利用ください。