如何正确创建Angular 6项目？两种方式的差异与优劣分析

Great question! Let’s break down the key differences between these two Angular project creation approaches, and weigh their pros and cons specifically for building clients that communicate with an ASP.NET Core API.

1. Project Structure & Ownership #

• ng new app-name-here: This generates a pure, standalone Angular project managed entirely by the Angular CLI. The structure follows standard Angular conventions (with src/, angular.json, package.json, etc.) and has no inherent ties to .NET. It’s a fully independent frontend codebase.
• dotnet new angular app-name-here: This creates a hybrid ASP.NET Core + Angular project. The root directory is a .NET project (with .csproj, Program.cs, Controllers/, etc.), and your Angular code lives inside a ClientApp subfolder. The entire project is orchestrated by the .NET CLI, which integrates Angular’s build pipeline into its own workflows.

2. Tooling & Build Workflows #

• ng new: Uses npm/yarn for dependency management, and all development tasks (serving, building, testing) are handled via Angular CLI commands like ng serve or ng build. It’s a pure frontend toolchain, familiar to most Angular developers.
• dotnet new angular: Still uses npm for Angular dependencies (inside ClientApp), but you can run and build the entire stack with .NET commands like dotnet run—this automatically triggers Angular’s build and spins up the ASP.NET Core server. You can still use Angular CLI commands directly in ClientApp, but deployment is unified via dotnet publish.

3. API Integration Configuration #

• ng new: Since the frontend runs independently (usually on port 4200) and your ASP.NET Core API runs on a different port, you’ll need to manually configure CORS (Cross-Origin Resource Sharing) on the API side, and set up the base URL for API requests in your Angular code. This adds initial setup overhead.
• dotnet new angular: Comes with a built-in reverse proxy for development. When you run dotnet run, frontend API requests are automatically forwarded to the ASP.NET Core backend—no CORS configuration needed in dev. In production, Angular’s static files are hosted directly by ASP.NET Core, so frontend and API share the same domain, eliminating cross-origin issues entirely.

For ng new (Pure Angular Project) #

Pros #

• Frontend-first independence: You can use your full frontend toolchain (VS Code Angular extensions, standalone CI/CD for frontend) without worrying about .NET configurations. Ideal for teams where frontend and backend are developed separately, or for architectures where frontend is deployed to a CDN and API to a separate .NET host.
• Deployment flexibility: Deploy the Angular app to static site hosts like Netlify, Vercel, or Azure Static Web Apps, while hosting the API independently. This decouples your frontend and backend scaling strategies.
• Clean separation of concerns: Frontend and backend code can live in separate repos (or distinct folders in one repo), making it easier to manage version control and team responsibilities.

Cons #

• Extra cross-origin setup: You’ll spend time configuring CORS on the API and setting up base URL logic in Angular (e.g., environment-specific endpoints).
• Dual runtime management: During development, you’ll need to start both the Angular dev server and the ASP.NET Core API separately. Deployment also requires separate steps for frontend and backend.

For dotnet new angular (Hybrid Project) #

Pros #

• Seamless out-of-the-box integration: Run dotnet run once to start both frontend and backend, with automatic request forwarding. No CORS hoops to jump through in development—perfect for rapid prototyping or small teams.
• Unified deployment: A single dotnet publish command builds the Angular app and packages it with the .NET backend, so you can deploy the entire stack to any ASP.NET Core-compatible host (like Azure App Service) in one step.
• No production cross-origin issues: Since the frontend is hosted by ASP.NET Core in production, everything runs on the same domain. No need to maintain CORS policies or deal with related security concerns.

Cons #

• Toolchain coupling: Frontend developers will need to familiarize themselves with .NET CLI commands and project structure, which adds a learning curve if they’re not already .NET-savvy.
• Limited deployment flexibility: Deploying the frontend to a CDN requires extra work to extract the built Angular files from the .NET publish output, which isn’t as straightforward as with a pure Angular project.
• Complex project structure: The hybrid directory can be confusing for frontend-only developers, with .NET and Angular files coexisting in the same repo root.

• Use dotnet new angular if you’re building a small-to-medium app with tight frontend-backend integration, want a simplified development/deployment workflow, or work in a team where everyone is comfortable with both .NET and Angular.
• Use ng new if you need full frontend independence, plan to deploy frontend and backend separately, or have a frontend team that prefers to work with a pure Angular toolchain.

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