ワークスペースとプロジェクトファイルの構造

Angularワークスペースのコンテキストでアプリケーションを開発します。 ワークスペースには、1つ以上のプロジェクトのファイルが含まれています。 プロジェクトとは、アプリケーションまたは共有可能なライブラリを構成するファイルセットのことです。

Angular CLIの ng new コマンドは、ワークスペースを作成します。

      
ng new my-project
    

このコマンドを実行すると、CLIは、my-project という名前のルートレベルのアプリケーションを含む、新しいワークスペースに、必要なAngular npmパッケージとその他の依存関係をインストールします。

デフォルトでは、ng new は、ワークスペースのルートレベルに、エンドツーエンドテストと共に、初期のスケルトンアプリケーションを作成します。 このスケルトンは、実行準備が整っていて、簡単に修正できる単純なウェルカムアプリケーション用です。 ルートレベルのアプリケーションは、ワークスペースと同じ名前を持ち、ソースファイルはワークスペースの src/ サブフォルダーにあります。

このデフォルトの動作は、各アプリケーションが独自のワークスペースに存在する、一般的な「マルチリポジトリ」開発スタイルに適しています。 初心者や中級者は、ng new を使用して、各アプリケーションに別々のワークスペースを作成することをお勧めします。

Angularは、複数のプロジェクト を持つワークスペースもサポートしています。 このタイプの開発環境は、共有可能なライブラリを開発している上級ユーザーや、 すべてのAngularプロジェクトに単一のレポジトリとグローバル構成を使用する「モノリポ」開発スタイルを使用する企業に適しています。

モノリポジトリワークスペースを設定するには、ルートアプリケーションの作成をスキップする必要があります。 以下のマルチプロジェクトワークスペースの設定 を参照してください。

ワークスペース構成ファイル

ワークスペース内のすべてのプロジェクトは、構成 を共有します。 ワークスペースの最上位レベルには、ワークスペース全体の構成ファイル、ルートレベルのアプリケーションの構成ファイル、ルートレベルのアプリケーションのソースファイルとテストファイルのサブフォルダーが含まれています。

アプリケーションプロジェクトファイル

デフォルトでは、CLIコマンド ng new my-app は、"my-app" という名前のワークスペースフォルダーを作成し、ワークスペースの最上位レベルの src/ フォルダーに新しいアプリケーションスケルトンを生成します。 新しく生成されたアプリケーションには、ルートモジュール用のソースファイルが含まれており、ルートコンポーネントとテンプレートが含まれています。

ワークスペースファイル構造が整ったら、コマンドラインで ng generate コマンドを使用して、機能とデータをアプリケーションに追加できます。 この初期のルートレベルアプリケーションは、CLIコマンドのデフォルトのアプリケーションです（追加のアプリケーション を作成した後にデフォルトを変更しない限り）。

単一アプリケーションのワークスペースの場合、ワークスペースの src サブフォルダーには、ルートアプリケーションのソースファイル（アプリケーションロジック、データ、資産）が含まれています。 マルチプロジェクトのワークスペースの場合、projects フォルダー内の追加のプロジェクトには、project-name/src/ サブフォルダーが含まれており、同じ構造になっています。

アプリケーションソースファイル

src/ の最上位レベルにあるファイルは、アプリケーションの実行をサポートします。 サブフォルダーには、アプリケーションのソースとアプリケーション固有の構成が含まれています。

src フォルダー内では、app フォルダーにプロジェクトのロジックとデータが含まれています。 Angularコンポーネント、テンプレート、スタイルはここにあります。

アプリケーション構成ファイル

ルートアプリケーションのアプリケーション固有の構成ファイルは、ワークスペースのルートレベルにあります。 マルチプロジェクトのワークスペースの場合、プロジェクト固有の構成ファイルは、projects/project-name/ の下のプロジェクトルートにあります。

プロジェクト固有の TypeScript 構成ファイルは、ワークスペース全体の tsconfig.json から継承します。

複数のプロジェクト

マルチプロジェクトのワークスペースは、複数のAngularプロジェクトに単一のレポジトリとグローバル構成を使用する組織（「モノリポ」モデル）に適しています。 マルチプロジェクトのワークスペースは、ライブラリの開発もサポートしています。

マルチプロジェクトワークスペースの設定

ワークスペースに複数のプロジェクトを含める場合は、ワークスペースを作成するときに、初期のアプリケーションの生成をスキップし、ワークスペースに一意の名前を付けることができます。 次のコマンドは、ワークスペース全体の構成ファイルはすべて作成しますが、ルートレベルのアプリケーションは作成しません。

      
ng new my-workspace --no-create-application
    

その後、ワークスペース内で一意の名前を持つアプリケーションとライブラリを生成できます。

      
cd my-workspaceng generate application my-appng generate library my-lib
    

複数のプロジェクトのファイル構造

最初に明示的に生成されたアプリケーションは、projects フォルダーに、ワークスペース内の他のすべてのプロジェクトと共に格納されます。 新しく生成されたライブラリも projects の下に追加されます。 このようにプロジェクトを作成すると、ワークスペースのファイル構造は、ワークスペース構成ファイル の構造 (angular.json) と完全に一致しています。

      
my-workspace/  ├── …                (ワークスペース全体の構成ファイル)  └── projects/        (アプリケーションとライブラリ)      ├── my-app/      (明示的に生成されたアプリケーション)      │   └── …        (アプリケーション固有のコードと構成)      └── my-lib/      (生成されたライブラリ)          └── …        (ライブラリ固有のコードと構成)
    

ライブラリプロジェクトファイル

CLIを使用してライブラリを生成する（ng generate library my-lib などのコマンド）と、生成されたファイルはワークスペースの projects/ フォルダーに格納されます。 独自のライブラリを作成する方法の詳細については、ライブラリの作成 を参照してください。

アプリケーションとは異なり、ライブラリには独自の package.json 構成ファイルがあります。

projects/ フォルダーの下には、my-lib フォルダーにライブラリコードが含まれています。