Ubuntu22.04にAngularCLIをインストールする方法– TecAdmin

Angular CLIは、開発者がAngularアプリケーションをすばやく作成してデプロイできるようにする強力なツールです。 ngベースのアプリケーションをすばやく作成および展開するための多数のコマンドを提供します。 また、AngularCLIのいくつかの機能についても説明します。 AngularCLIの機能は次のとおりです。

• 異なるテンプレートを使用した新しいプロジェクトの作成
• ファイルとアセットの操作
• 生産のためのプロジェクトの構築
• コードスキャフォールディングの生成

このブログ投稿では、Ubuntu22.04にAngularCLIをインストールする方法を紹介します。 始めましょう！

ステップ1-Node.jsをインストールする

Node.jsは、Angularアプリケーションを実行するための主要な要件です。 NVMコマンドラインユーティリティを使用して、必要なNode.jsをインストールできます。 Ubuntuシステムにログインし、次の手順に従います。

1. 次のコマンドを使用して、NVMをインストールします。

   curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash 
   

2. 次に、システムでNVM環境をアクティブにします。

   source ~/.bashrc
   

3. 現在、Angular 14は、Node.js14LTSおよび16LTSバージョンをサポートする最新バージョンです。 次のコマンドは、Node.js16をシステムにインストールします。

   nvm install v16
   

4. 以下のコマンドは、システムにインストールされているノードとnpmのバージョンを表示します。

   node -v
   npm -v
   

ステップ2–AngularCLIのインストール

node.jsとnpmをシステムにインストールした後、次のコマンドを使用してAngularCLIツールをシステムにインストールします。

npm install @angular/cli --location=global

最新バージョンのAngularCLIがUbuntuLinuxシステムにインストールされます。

上記の-gコマンドを使用すると、AngularCLIツールがグローバルにインストールされます。 したがって、システム上のすべてのユーザーとアプリケーションがアクセスできます。 AngularCLIはコマンドを提供します ng コマンドライン操作に使用されます。 システムにインストールされているngのバージョンを確認しましょう。

ng version 

Angularコマンドラインインターフェイスがシステムにインストールされています。 既存のアプリケーションの場合、作業を開始して残りの記事を無視できます。

次の手順に従って、システムに新しいAngularアプリケーションを作成します。

ステップ3–新しいAngularアプリケーションを作成する

ngコマンドを使用して、新しいAngularアプリケーションを作成できます。 Angularコマンドラインツールを使用して、hello-worldという名前のアプリケーションを作成します。 ターミナルで以下のコマンドを実行します。

ng new hello-world

Ouput
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE hello-world/README.md (1064 bytes)
CREATE hello-world/.editorconfig (274 bytes)
CREATE hello-world/.gitignore (548 bytes)
CREATE hello-world/angular.json (2947 bytes)
CREATE hello-world/package.json (1042 bytes)
CREATE hello-world/tsconfig.json (863 bytes)
CREATE hello-world/.browserslistrc (600 bytes)
CREATE hello-world/karma.conf.js (1428 bytes)
CREATE hello-world/tsconfig.app.json (287 bytes)
CREATE hello-world/tsconfig.spec.json (333 bytes)
CREATE hello-world/.vscode/extensions.json (130 bytes)
CREATE hello-world/.vscode/launch.json (474 bytes)
CREATE hello-world/.vscode/tasks.json (938 bytes)
CREATE hello-world/src/favicon.ico (948 bytes)
CREATE hello-world/src/index.html (296 bytes)
CREATE hello-world/src/main.ts (372 bytes)
CREATE hello-world/src/polyfills.ts (2338 bytes)
CREATE hello-world/src/styles.css (80 bytes)
CREATE hello-world/src/test.ts (749 bytes)
CREATE hello-world/src/assets/.gitkeep (0 bytes)
CREATE hello-world/src/environments/environment.prod.ts (51 bytes)
CREATE hello-world/src/environments/environment.ts (658 bytes)
CREATE hello-world/src/app/app-routing.module.ts (245 bytes)
CREATE hello-world/src/app/app.module.ts (393 bytes)
CREATE hello-world/src/app/app.component.css (0 bytes)
CREATE hello-world/src/app/app.component.html (23364 bytes)
CREATE hello-world/src/app/app.component.spec.ts (1088 bytes)
CREATE hello-world/src/app/app.component.ts (215 bytes)
 Packages installed successfully.

これにより、現在のディレクトリにhello-worldという名前のディレクトリが作成され、Angularアプリケーションに必要なすべてのファイルが作成されます。

ステップ4–Angularアプリケーションを提供する

基本的なAngularアプリケーションを提供する準備が整いました。 ディレクトリhello-worldに切り替えてから、ngserveコマンドを使用してAngularアプリケーションを実行します。

cd hello-world
ng serve

デフォルトでは、Angularアプリケーションはポート4200で実行されます。ポート4200でシステムにアクセスして、次のようにAngularアプリケーションを開くことができます。

–hostおよび–portコマンドライン引数を指定することで、Angularアプリケーションを実行するためのホストとポートを変更できます。

ng serve --host 0.0.0.0 --port 3001

ホストアドレス0.0.0.0を使用すると、アプリケーションはすべてのインターフェイスでリッスンでき、パブリックにアクセスできます。

結論

結論として、この記事では、Ubuntu22.04にAngularCLIをインストールする方法を説明しました。 このチュートリアルは、新しいAngularアプリケーションの作成にも役立ちました。 ここで、Apacheサーバーの背後にあるAngularアプリケーションを構成するには、ここにアクセスしてください。 問題が発生した場合や質問がある場合は、下にコメントを残してください。できる限りサポートさせていただきます。 読んでくれてありがとう！。