このガイドでは、Angular CLIを使用してAngular開発環境をセットアップする方法を説明します。 これには、CLIのインストール、初期ワークスペースとスターターアプリケーションの作成、およびセットアップを確認するためにそのアプリケーションをローカルで実行する方法に関する情報が含まれています。
ローカルセットアップなしでAngularを試す
Angularを初めて使用する場合は、ブラウザでAngularの基本を紹介する今すぐ試す！から始めることをお勧めします。 このスタンドアロンチュートリアルは、オンライン開発のためのインタラクティブなStackBlitz環境を利用しています。 準備が整うまで、ローカル環境をセットアップする必要はありません。
始める前に
Angular CLIを使用するには、以下の知識が必要です。
また、コマンドラインインターフェース(CLI)ツールの使用法に精通し、コマンドシェルについて一般的な理解がある必要があります。 TypeScriptの知識があると役立ちますが、必須ではありません。
依存関係
ローカルシステムにAngular CLIをインストールするには、Node.jsをインストールする必要があります。 Angular CLIは、Nodeとその関連パッケージマネージャーであるnpmを使用して、ブラウザ外でJavaScriptツールをインストールおよび実行します。
Node.jsをダウンロードしてインストールする。これにはnpm CLIも含まれます。
Angularには、アクティブLTSまたはメンテナンスLTSバージョンのNode.jsが必要です。
詳細については、Angularのバージョン互換性ガイドを参照してください。
Angular CLIのインストール
Angular CLIをインストールするには、ターミナルウィンドウを開き、次のコマンドを実行します。
npm
npm install -g @angular/clipnpm
pnpm install -g @angular/cliyarn
yarn global add @angular/clibun
bun install -g @angular/cliPowerShell実行ポリシー
Windowsクライアントコンピューターでは、PowerShellスクリプトの実行はデフォルトで無効になっているため、上記のコマンドはエラーで失敗する可能性があります。 npmグローバルバイナリに必要なPowerShellスクリプトの実行を許可するには、次の実行ポリシーを設定する必要があります。
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSignedコマンド実行後に表示されるメッセージを注意深く読み、指示に従ってください。実行ポリシーを設定することの意味を理解していることを確認してください。
Unixパーミッション
一部のUnix系環境では、グローバルスクリプトがrootユーザーによって所有されている場合があり、上記のコマンドはパーミッションエラーで失敗する可能性があります。
rootユーザーとしてコマンドを実行するにはsudoを付けて実行し、プロンプトが表示されたらパスワードを入力します。
npm
sudo npm install -g @angular/clipnpm
sudo pnpm install -g @angular/cliyarn
sudo yarn global add @angular/clibun
sudo bun install -g @angular/clirootとしてコマンドを実行することの意味を理解していることを確認してください。
ワークスペースと初期アプリケーションの作成
Angularワークスペースのコンテキストでアプリケーションを開発します。
新しいワークスペースと初期スターターアプリケーションを作成するには、CLIコマンドng newを実行し、ここに示されているようにmy-appという名前を指定してから、含める機能に関するプロンプトに回答します。
ng new my-appAngular CLIは、必要なAngular npmパッケージとその他の依存関係をインストールします。 これには数分かかる場合があります。
CLIは、新しいワークスペースと、ワークスペースと同じ名前の新しいディレクトリに小さなウェルカムアプリケーションを作成し、すぐに実行できる状態にします。 後続のコマンドがこのワークスペースを使用するように、新しいディレクトリに移動します。
cd my-appアプリケーションを実行する
Angular CLIには開発サーバーが含まれており、アプリケーションをローカルでビルドして提供できます。次のコマンドを実行してください。
ng serve --openng serveコマンドはサーバーを起動し、ファイルを監視し、それらのファイルに変更を加えるとアプリケーションを再ビルドしてブラウザをリロードします。
--open（または単に-o）オプションは、ブラウザをhttp://localhost:4200/に自動的に開き、生成されたアプリケーションを表示します。
ワークスペースとプロジェクトファイル
ng newコマンドは、Angularワークスペースフォルダーを作成し、その中に新しいアプリケーションを生成します。
ワークスペースには、複数のアプリケーションとライブラリを含めることができます。
ng newコマンドによって作成された初期アプリケーションは、ワークスペースのルートディレクトリにあります。
既存のワークスペースで追加のアプリケーションまたはライブラリを生成すると、デフォルトでprojects/サブフォルダーに配置されます。
新しく生成されたアプリケーションには、ルートコンポーネントとテンプレートのソースファイルが含まれています。
各アプリケーションには、そのコンポーネント、データ、およびアセットを含むsrcフォルダーがあります。
生成されたファイルを直接編集したり、CLIコマンドを使用して追加および変更したりできます。
ng generateコマンドを使用して、追加のコンポーネント、ディレクティブ、パイプ、サービスなどの新しいファイルを追加します。
ng addやng generateのようなコマンドは、アプリケーションやライブラリを作成または操作するため、実行する必要があります
ワークスペース内から。対照的に、ng newのようなコマンドは、新しいワークスペースを作成するため、ワークスペースの外で実行する必要があります。