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

  • [アーティクル]

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

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

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

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

Note

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

前提条件

次のものがインストールされていることを確認します。

  • Visual Studio 2022 バージョン 17.8 以降と、ASP.NET および Web 開発ワークロードがインストールされていること。 Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。 ワークロードをインストールする必要があり、既に Visual Studio がある場合は、 [ツール]>[ツールと機能を取得] の順に移動すると、Visual Studio インストーラーが開きます。 [ASP.NET と Web 開発] ワークロードを選択してから [変更] を選択します。
  • Node.js に付属の npm (https://www.npmjs.com/)
  • Angular CLI (https://angular.io/cli) これは、任意のバージョンを選ぶことができます

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

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

    Screenshot showing Create a new project

  2. 上部の検索バーで Angular を検索し、[Angular および ASP.NET Core (プレビュー)] を選択します。

    Screenshot showing choosing a template.

  3. プロジェクトに「AngularWithASP」という名前を付けて、[作成] を選択します。

    ソリューション エクスプローラーは次のとおりです。

    Screenshot showing Solution Explorer.

    スタンドアロン Angular テンプレートと比較して、ASP.NET Core との統合用の新しいファイルと変更されたファイルがいくつか表示されます。

    • aspnetcore-https.js
    • proxy.conf.js
    • package.json (変更済み)
    • angular.json (変更済み)
    • app.components.ts
    • app.module.ts

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

  1. ソリューション エクスプローラーで [AngularWithASP.Server] プロジェクトを右クリックし、[プロパティ] を選択します。

    Screenshot showing Open project properties.

  2. [プロパティ] ページで、[デバッグ] タブを開き、[デバッグ起動プロファイル UI を開く] オプションを選択します。 ASP.NET Core プロジェクト (または、存在する場合は https) にちなんで名前が付けられたプロファイルの [ブラウザーの起動] オプションのチェックをオフにします。

    Screenshot showing Debug launch profiles UI.

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

    Note

    Visual Studio では、launch.json に、[デバッグ] ツール バーの [スタート] ボタンに関連付けられたスタートアップ設定が格納されます。 launch.json は .vscode フォルダーの下に配置する必要があります。

プロジェクトを開始する

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

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

Note

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

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

プロジェクトの発行

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

Note

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

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

    angularwithasp.client プロジェクトが選択されていることを確認します。

  2. OK を選択します。

  3. ASP.NET Core プロジェクトを再び右クリックし、[プロジェクト ファイルの編集] を選択してください。

    これにより、プロジェクトの .csproj ファイルが開きます。

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

    この参照は次のようになります。

     <ProjectReference Include="..\angularwithasp.client\angularwithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>

  5. ASP.NET Core プロジェクトを右クリックし、[プロジェクトの再読み込み] を選択します (このオプションを使用できる場合)。

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

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

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

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

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

トラブルシューティング

プロキシ エラー

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

[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 アプリを更新してください。

ポートの検証

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

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

    複数の applicationUrl プロパティがある場合は、https エンドポイントを使用するものを探します。 https://localhost:7049 のようになっていると思います。

  2. 次に、Angular プロジェクトの proxy.conf.js ファイルに移動します (src フォルダー内にあります)。 launchSettings.json の applicationUrl プロパティと一致するようにターゲット プロパティを更新します。 更新すると、その値は次のようになります。

    target: 'https://localhost:7049',

次のステップ

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

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