.NET 6 Angular SPA项目开发环境配置方案咨询

Hey there! I’ve gone through the exact same transition pain when moving from .NET 5 to .NET 6 for our Angular SPA projects—so I can share what worked smoothly for my team:

开发环境搭建（分开用VS做API，VS Code做Angular） #

.NET 6 shifted away from the old embedded SPA template structure, but you can replicate the familiar workflow with these steps:

• Step 1: Configure .NET 6 Web API for CORS
  Since your Angular dev server runs on http://localhost:4200, you need to allow cross-origin requests in your API. Open your Program.cs and add:

  // Add CORS policy before building the app
  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowAngularDev",
          policy => policy.WithOrigins("http://localhost:4200")
                          .AllowAnyHeader()
                          .AllowAnyMethod());
  });
  
  // Apply the policy after routing, before authorization
  app.UseRouting();
  app.UseCors("AllowAngularDev");
  app.UseAuthorization();
  

  Run your API as usual (VS will host it on a port like 5000 or 7000 by default).

• Step 2: Set up Angular project in VS Code
  Create your Angular app with ng new MyAngularUI as you always did. Update your environment.ts to point to your API’s dev URL:

  export const environment = {
    production: false,
    apiBaseUrl: 'http://localhost:5000/api' // Match your API's port
  };
  

  Start the Angular dev server with ng serve—it’ll run on 4200 just like before, and can call your API without CORS issues.

发布到Azure（单项目或分开部署） #

You can still get that seamless single-project publish experience, or split deployment if needed:

Option 1: Single-project publish (like .NET 5) #

If you want to bundle Angular and API into one deployment:

1. Build your Angular app for production: ng build --prod
2. Copy the contents of the dist/MyAngularUI folder into your .NET 6 project’s wwwroot directory (create the folder if it doesn’t exist)
3. Add static file serving to your Program.cs to serve the Angular app:

   app.UseStaticFiles();
   // Add this to support Angular's client-side routing
   app.MapFallbackToFile("index.html");
   

4. Publish the .NET 6 project directly to Azure App Service—this works exactly like your old .NET 5 workflow.

Option 2: Split deployment (API + Static Web App) #

For better scalability, many teams now deploy the API to Azure App Service and Angular to Azure Static Web Apps:

• Publish your .NET 6 API to App Service, then configure CORS in the App Service portal to allow your Static Web App’s domain.
• Build and deploy your Angular app to Static Web Apps (you can connect it directly to your GitHub/Azure DevOps repo for CI/CD).

Lots of developers have solved this transition by adapting to .NET 6’s simplified middleware model—you don’t lose any of your old workflow, just need to adjust a few configs!

内容的提问来源于stack exchange，提问作者Lafi