チュートリアル: Visual Studio で Angular を使用して ASP.NET Core アプリを作成する

[アーティクル]
01/24/2025

この記事では、API バックエンドとして機能する ASP.NET Core プロジェクトと、UI として機能する Angular プロジェクトを構築する方法について説明します。

Visual Studio には、Angular と React ASP.NET サポートするコアシングルページアプリケーション (SPA) テンプレートが含まれています。テンプレートには、各フレームワークの基本ファイルとフォルダーを含む、ASP.NET Core プロジェクトに組み込みのクライアントアプリフォルダーが用意されています。

この記事で説明されている方法を使用して、次のコアシングルページアプリケーション ASP.NET 作成できます。

ASP.NET Core プロジェクトの外部にある別のプロジェクトにクライアントアプリを配置する
コンピューターにインストールされているフレームワーク CLI に基づいてクライアントプロジェクトを作成する

手記

この記事では、Visual Studio 2022 バージョン 17.8 で更新されたテンプレートを使用したプロジェクト作成プロセスについて説明します。

前提条件

次のコードをインストールしてください。

ASP.NET および Web 開発 ワークロードがインストールされている Visual Studio 2022 バージョン 17.8 以降。 Visual Studio のダウンロードページに移動して、無料でインストールします。ワークロードをインストールする必要があり、既に Visual Studio がある場合は、Tools>ツールと機能の取得...に移動すると、Visual Studio インストーラーが開きます。 「ASP.NET と Web 開発」 ワークロードを選択した後、「変更」を選択します。
npm (https://www.npmjs.com/) (Node.js に含まれています)
お好みのバージョンを選択できるAngular CLI (https://angular.dev/tools/cli)。フロントエンドプロジェクトは、ローカルコンピューターにインストールしたフレームワーク CLI ツールを使用して作成されるため、テンプレートで使用される Angular バージョンが決まります。

フロントエンドアプリを作成する

[スタートウィンドウ] (開くには [ファイル] >[スタートウィンドウ] を選択) で、[新しいプロジェクト の作成]を選択します。

の作成を示すスクリーンショット
上部の検索バーで Angular を検索し、Angular と ASP.NET Core選択します。
プロジェクトに AngularWithASP と名前を付けてから、[次へ]を選択します。

[追加情報] ダイアログで、HTTPS の構成が有効になっていることを確認します。ほとんどのシナリオでは、他の設定は既定値のままにします。
[作成] を選択します。

ソリューションエクスプローラーには、次の内容が表示されます。

スタンドアロンの Angular テンプレートと比較すると、ASP.NET Core との統合のために新しいファイルと変更されたファイルがいくつか表示されます。
- aspnetcore-https.js
- proxy.conf.js
- package.json(変更)
- angular.json(変更)
- app.components.ts
- app.module.ts
これらのプロジェクトファイルの一部の詳細については、「次の手順を参照してください。

プロジェクトのプロパティを設定する

ソリューションエクスプローラーで、AngularWithASP.Server プロジェクト右クリックし、[プロパティ]選択します。
[プロパティ] ページで、[デバッグ] タブを開き、[デバッグ起動プロファイルの UI を開く] オプション選択します。 https プロファイル、または ASP.NET Core プロジェクトに名前が付けられたプロファイルが存在する場合は、そのプロファイルの Launch Browser オプションのチェックを外します。

この値により、ソース気象データを含む Web ページが開かなくなります。

手記

Visual Studio では、launch.json デバッグツールバーの [開始] ボタンに関連付けられているスタートアップ設定が格納されます。 launch.json は、.vscode フォルダーの下に配置する必要があります。
ソリューションエクスプローラーでソリューションを右クリックし、[プロパティ]選択します。 [スタートアッププロジェクト] 設定が 複数のプロジェクトに設定されていること、および両方のプロジェクトのアクションが開始に設定されていることを確認します。

プロジェクトを開始する

F5 押すか、ウィンドウの上部にある [スタート] ボタンを選択してアプリを起動します。次の 2 つのコマンドプロンプトが表示されます。

実行中の ASP.NET Core API プロジェクト
ng start コマンドを実行している Angular CLI

手記

メッセージのコンソール出力を確認します。たとえば、Node.jsを更新するメッセージが表示される場合があります。

Angular アプリが表示され、API を介して設定されます (localhost ポートはスクリーンショットとは異なる場合があります)。

天気予報アプリを示すスクリーンショット。

アプリが表示されない場合は、「トラブルシューティングの」を参照してください。

プロジェクトを発行する

Visual Studio 2022 バージョン 17.3 以降では、Visual Studio 発行ツールを使用して統合ソリューションを発行できます。

手記

発行を使用するには、Visual Studio 2022 バージョン 17.3 以降を使用して JavaScript プロジェクトを作成します。

ソリューションエクスプローラーで、AngularWithASP.Server プロジェクトを右クリックし、追加として>プロジェクト参照を選択します。

angularwithasp.client プロジェクトが選択されていることを確認します。
[OK]を選択して下さい。
ASP.NET Core プロジェクトをもう一度右クリックし、[プロジェクトファイルの編集]選択します。

これにより、プロジェクトの .csproj ファイルが開きます。
.csproj ファイルで、値が falseに設定された <ReferenceOutputAssembly> 要素がプロジェクト参照に含まれていることを確認します。

このリファレンスは次のようになります。
```
 <ProjectReference Include="..\angularwithasp.client\angularwithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>
```
ASP.NET Core プロジェクトを右クリックし、オプション が使用できる場合は [プロジェクトの再読み込み] を選択します。

Program.csで、次のコードが存在することを確認します。

app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

発行するには、ASP.NET Core プロジェクトを右クリックし、[の発行] 選択し、Azure やフォルダーへの発行など、目的の発行シナリオに合わせてオプションを選択します。

発行時に npm run build コマンドが呼び出されるため、ASP.NET Core プロジェクトの場合よりも発行プロセスに時間がかかります。 BuildCommand では npm run build が既定で実行されます。

フォルダーに発行する場合は、発行フォルダーに追加されたファイルの詳細については、ASP.NET Core ディレクトリ構造 参照してください。

トラブルシューティング

プロキシエラー

次のエラーが表示される場合があります。

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

この問題が発生した場合は、バックエンドの前にフロントエンドが開始された可能性が最も高くなります。

バックエンドコマンドプロンプトが起動して実行されているのが表示されたら、ブラウザーで Angular アプリを更新するだけです。
また、バックエンドがフロントエンドの前に開始するように構成されていることを確認します。確認するには、ソリューションエクスプローラーでソリューションを選択し、[プロジェクト] メニュー [プロパティ] を選択。次に、[スタートアッププロジェクト構成] を選択し、バックエンド ASP.NET Core プロジェクトが一覧の先頭にあることを確認します。最初でない場合は、プロジェクトを選択し、上方向ボタンを使用して起動リストの最初のプロジェクトにします。

ポートの確認

気象データが正しく読み込まれない場合は、ポートが正しいことを確認する必要がある場合もあります。

ASP.NET Core プロジェクトの launchSettings.json ファイル ([プロパティ] フォルダー) に移動します。 applicationUrl プロパティからポート番号を取得します。

複数の applicationUrl プロパティがある場合は、https エンドポイントを使用して 1 つを探します。見た目はhttps://localhost:7049に似ているべきです。
次に、Angular プロジェクトの proxy.conf.js ファイルに移動します (src フォルダーを参照してください)。 launchSettings.jsonの applicationUrl プロパティと一致するようにターゲットプロパティを更新します。更新すると、その値は次のようになります。
```
target: 'https://localhost:7049',
```

Docker

Docker サポート有効にしてプロジェクトを作成する場合は、次の手順を実行します。

アプリが読み込まれたら、Visual Studio の [コンテナー] ウィンドウを使用して Docker HTTPS ポートを取得します。 環境の または ポート タブを確認します。
Angular プロジェクトの proxy.conf.js ファイルを開きます。 [コンテナー] ウィンドウの HTTPS ポートと一致するように、target 変数を更新します。たとえば、次のコードでは次のようになります。
```
const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
   env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7209';
```
https://localhost:7209 を一致する HTTPS ポートに変更します (この例では、https://localhost:62958)。
アプリを再起動します。

次の手順

ASP.NET Core の SPA アプリケーションの詳細については、「シングルページアプリの開発のの Angular」セクションを参照してください。リンクされた記事では、aspnetcore-https.js や proxy.conf.jsなどのプロジェクトファイルの追加のコンテキストを提供しますが、プロジェクトテンプレートの違いにより実装の詳細は異なります。たとえば、ClientApp フォルダーの代わりに、Angular ファイルは別のプロジェクトに含まれます。

クライアントプロジェクトに固有の MSBuild 情報については、JSPSの MSBuild プロパティを参照してください。

次の方法で共有

チュートリアル: Visual Studio で Angular を使用して ASP.NET Core アプリを作成する

前提条件

フロントエンドアプリを作成する

プロジェクトのプロパティを設定する

プロジェクトを開始する

プロジェクトを発行する

トラブルシューティング

プロキシエラー

ポートの確認

Docker

次の手順

フィードバック

その他のリソース

次の方法で共有

チュートリアル: Visual Studio で Angular を使用して ASP.NET Core アプリを作成する

前提 条件

フロントエンド アプリを作成する

プロジェクトのプロパティを設定する

プロジェクトを開始する

プロジェクトを発行する

トラブルシューティング

プロキシ エラー

ポートの確認

Docker

次の手順

フィードバック

その他のリソース

前提条件

フロントエンドアプリを作成する

プロキシエラー