Angular(Client)と.NET 6(Server)で開発する

背景と問題点

VisualStudio 2022では標準でAngular12と.NET 6のTemplateが付属しており、メニューのファイル->新規作成から簡単に作成することができる。このTemplateはVisualStudio上で、一つのプロジェクト内にClient-SideとServer-Sideが存在している構成である。開発規模が小さい場合は、このように一つのプロジェクト内にClientとServerを構築することがある。この理由は、「ClientからServerへ接続し、DatabaseからDataを取得してClientまで返す」という一連の基本動作を簡単にデバッグできるようになるため、開発効率が良くなるためである。
問題点として、Angularと.NETそれぞれの理解が必要であり、ファイル構成や動作が複雑になりやすい。そのため、きちんとそれぞれの機能やファイル構成を整理して理解する必要がある。以下でその内容をまとめる。

概要図

以下が基本的な概念図である。基本的にAngularと.NETはClientとServerの別個のFrameworkと考えて良いため、Client-Server間で一般的なREST-APIを使用してデータ(json形式)の送受信を行う。

ファイル構成

VisualStudio 2022のTemplateを利用すると、プロジェクト内にClientAppフォルダが作成される。このClientAppがAngularのファイル群であり、Angularはこのフォルダより外にアクセスすることはできない。
AngularCLIはこのClientApp内で動作させることができるが、AngularCLI(ng server -o)を利用してテストサーバとClientを起動しても.NET 6 側（Server-Side）は起動していないため、AngularCLIではClient-Serverを連動させてデバッグすることはできない。
そのため、VisualStudio上で、このプロジェクトファイルに対してDebug（Ctrl+F5）を行う必要がある。

以上