Skip to content

MS_ASPNETCoreAngularTemplate

Jump to bottom
nishi_74322014 edited this page Aug 21, 2026 · 1 revision

ASP.NET Core Angularテンプレート

概要

https://github.com/OpenTouryoProject/SampleProgram/blob/master/Template/SPATemplate/AngularTemplate

※ JavaScript Services も流行ってないので削除しました。
　IDE に標準のテンプレートとして表示されなくなっている（dotnet new コマンドには残っている）。

補足（原文の判断は正しかった）: サンプルを取り消し線で消し、
「流行ってないので削除しました」と記録しているこの判断は、
その後の経緯から見て正しかった。

【経緯】
   2017      JavaScript Services ベースの SPA テンプレートが登場
   2019-08   JavaScript Services の【廃止が告知】される
   .NET 5    パッケージの提供終了
   .NET 8    テンプレートが【.esproj ベース】に置き換わる ★

原文が「IDE に標準のテンプレートとして表示されなくなっている
（dotnet new コマンドには残っている）」と観察している状態は、
廃止の途中段階である。

【Microsoft の段階的な廃止のやり方】
   ① 新規プロジェクト ダイアログ（IDE）から外す ← 原文が観察した段階
   ② dotnet new のテンプレート一覧から外す
   ③ パッケージの提供を終了する

   → ①の時点で「もう推奨されていない」と読み取れる ★

テンプレートの増減は、Microsoft の推し方を映す——という
ASP.NET のプロジェクト・テンプレートの変遷 の
着眼が、ここでも当てはまる。

詳細

...

補足（Angular と ASP.NET Core の現在の組み合わせ方）: 原文の詳細は
空欄なので、現在の構成を補っておく。

① .NET 8 以降のテンプレート

# Angular テンプレート（現在も存在する）
dotnet new angular -o MyApp
【生成される構成（.NET 8 以降）】
   MyApp/
     ├ MyApp.Server/          … ASP.NET Core（Web API）
     │    └ MyApp.Server.csproj
     └ myapp.client/          … 【Angular（独立したプロジェクト）】★
          ├ package.json
          ├ angular.json
          └ myapp.client.esproj   ← [.esproj] 参照

   → 【2 つのプロジェクトに分かれた】
     （かつては 1 プロジェクトの ClientApp フォルダだった）

② 手で組む場合（推奨）

# フロント
npm install -g @angular/cli
ng new my-app

# バック
dotnet new webapi -o MyApp.Api
【開発時】
   Angular CLI（ng serve）  … localhost:4200
   ASP.NET Core             … localhost:5001
     → proxy.conf.json で /api を .NET 側へ転送する

【本番】
   ng build の出力（dist/）を静的配信
     ・ASP.NET Core の wwwroot に置く（MapFallbackToFile）
     ・または CDN / Azure Static Web Apps に置く ★

// proxy.conf.json（Angular 側）
{ "/api": { "target": "https://localhost:5001", "secure": false } }

③ 認証をどうするか

【SPA の認証は Cookie ではなくトークンが基本】
   ・OIDC の Authorization Code + PKCE
   ・angular-auth-oidc-client / MSAL Angular
   ・[ASP.NET Core Identity] を IdP にするなら Duende IdentityServer 等

【同一ドメインなら Cookie も選べる】
   ・BFF（Backend For Frontend）パターン
   ・トークンをブラウザに置かないので【XSS に強い】★
   → 現在はこちらが推奨されることが多い

参考

Visual Studio CodeによるSPA開発

開発基盤部会 Wiki

  • JavaScript（DNET_JavaScript.md）

Microsoft Learn

Tags: 移行, .NET開発, .NET Core, ASP.NET, ASP.NET Web API, ASP.NET SPA, JavaScript

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally