能否在ASP.NET MVC网站中添加Angular 2组件作为SPA？求实现示例

Absolutely! You can totally integrate Angular 2+ components/modules into an existing ASP.NET MVC website, and even set up a dedicated single-page application (SPA) section as part of it. This is a common scenario and fully achievable. Let me break down the main approaches and key details to make this work:

There are two primary ways to go about this, depending on whether you want a full SPA section or just embed individual Angular components in existing MVC views.

Option 1: Host a Full Angular SPA as a Dedicated MVC Route #

This is ideal if you want a self-contained SPA that lives within your MVC site (e.g., a /dashboard section that acts entirely as an Angular SPA).

• First, create a standalone Angular project using the Angular CLI:

  ng new my-angular-spa
  

• Build the Angular project for production to generate optimized static files:

  ng build --prod
  

• In your ASP.NET MVC project, add a new controller (e.g., SpaController) with an Index action that returns a view.
• Copy the contents of the Angular project's dist folder into a dedicated directory in your MVC project (like ~/AngularSpa/).
• Update the MVC view for Spa/Index to mirror the structure of Angular's index.html: include the root component tag (<app-root></app-root>), and reference the Angular CSS and JS files with paths pointing to your ~/AngularSpa/ directory (adjust relative paths to use MVC's root tilde ~).
• Configure MVC routing to catch all requests for your SPA path and route them to the Spa/Index view. In RouteConfig.cs, add:

  routes.MapRoute(
      name: "Spa",
      url: "spa/{*catchall}",
      defaults: new { controller = "Spa", action = "Index" }
  );
  

  This ensures any request starting with /spa (or your chosen path) is handled by Angular's front-end router.

Option 2: Embed Individual Angular Components in MVC Views #

If you just want to add specific Angular components (like a dynamic form or data grid) to existing MVC pages, follow these steps:

• Create an Angular project and configure it to build standalone components (modify angular.json to target individual components or build a single bundle that includes only the components you need).
• Build the project to get the compiled JS, CSS, and dependency files.
• Copy these files into your MVC project's Scripts and Content directories.
• In the target MVC view, add the component's tag (e.g., <app-user-form></app-user-form>) where you want the Angular component to render.
• Add references to the Angular scripts (including polyfills and Zone.js) at the bottom of the MVC view, then initialize the Angular module:

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { UserFormModule } from './user-form.module';
  
  platformBrowserDynamic().bootstrapModule(UserFormModule)
    .catch(err => console.error(err));
  

• Route Conflicts: Make sure MVC server-side routes and Angular client-side routes don't overlap. Use a unique prefix (like /spa) for your Angular sections to keep things separated.
• Static File Access: Update your MVC project's Web.config to allow access to Angular's static files (JS, CSS, assets). You can add a <staticContent> section to define allowed file types.
• Shared Data: If you need to pass data from MVC to Angular, you can render initial data as JSON in a hidden HTML element, then have Angular read it on initialization. For ongoing state, use cookies, session storage, or an API endpoint.
• Automated Builds: To streamline development, set up a build pipeline (like MSBuild targets or npm scripts) that automatically builds the Angular project and copies the output to your MVC project whenever you make changes.

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