如何将Angular4应用嵌入ASP.NET MVC视图？项目改造方案咨询

I’ve gone through similar legacy component replacement scenarios, so here’s a practical, step-by-step guide tailored to your setup (Visual Studio 2015, IIS):

1. Prepare Your Angular 4 Build #

First, get your Angular app ready to embed in the MVC view:

• Run ng build --prod in your Angular project directory. This generates optimized production files in the dist folder.
• Adjust the base href to match the route of your MVC view (where you’ll replace the Silverlight component). For example, if your MVC view lives at http://your-app/Home/SilverlightReplacement, run:

  ng build --prod --base-href "/Home/SilverlightReplacement/"
  

  This ensures Angular’s routing and asset paths work correctly within the MVC context.

2. Integrate Angular into the MVC View #

Locate the .cshtml file that hosted the Silverlight component—look for the <div> container (e.g., <div id="silverlightHost">). Replace that section with these steps:

Step 2.1: Copy Angular Dist Files to MVC Project #

• Copy the entire dist folder from your Angular project into your MVC project. I recommend placing it in a dedicated folder like ~/AngularApp/SilverlightReplacement/ (create the folder if needed).
• In VS2015, right-click the new folder and select Include in Project to ensure it’s included in publish outputs.

Step 2.2: Update the CSHTML View #

Replace the old Silverlight host div with:

<!-- Angular App Root Container -->
<app-root></app-root>

<!-- Angular Styles -->
<link href="~/AngularApp/SilverlightReplacement/styles.bundle.css" rel="stylesheet" />

<!-- Angular Scripts (order matters!) -->
<script src="~/AngularApp/SilverlightReplacement/inline.bundle.js"></script>
<script src="~/AngularApp/SilverlightReplacement/polyfills.bundle.js"></script>
<script src="~/AngularApp/SilverlightReplacement/vendor.bundle.js"></script>
<script src="~/AngularApp/SilverlightReplacement/main.bundle.js"></script>

Note: Double-check bundle names against your dist folder—names might vary slightly based on your Angular 4 configuration.

3. Development Machine Setup (VS2015) #

To test locally without publishing:

• Auto-sync Angular builds: Use ng build --watch in your Angular project. This rebuilds the dist folder whenever you make changes. In VS2015, set the copied dist folder’s Copy to Output Directory property to Copy if newer—this ensures your MVC project picks up the latest Angular files on build.
• API CORS Handling: If you run Angular’s dev server (ng serve) separately and call your Web API, enable CORS in your Web API project to avoid cross-origin errors. Install the Microsoft.AspNet.WebApi.Cors NuGet package, then configure it in WebApiConfig.cs:

  using System.Web.Http.Cors;
  
  public static class WebApiConfig
  {
      public static void Register(HttpConfiguration config)
      {
          var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*");
          config.EnableCors(cors);
          // ... other Web API configuration
      }
  }
  

  If you embed the built Angular files directly in MVC, CORS won’t be an issue since they’re served from the same domain.

4. IIS Deployment Steps #

When deploying to IIS:

• Publish the MVC Project: Ensure the AngularApp/SilverlightReplacement folder (with dist files) is included in your publish profile. In VS2015, go to Project > Properties > Build > Output and confirm the folder is set to copy.
• IIS Configuration:
  • If your Angular app uses client-side routing, add a web.config file in the AngularApp/SilverlightReplacement folder to redirect all route requests back to the MVC view:

    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
        <rewrite>
          <rules>
            <rule name="Angular Routes" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
              <action type="Rewrite" url="/Home/SilverlightReplacement" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>
    

  • Make sure the IIS server has the URL Rewrite module installed (required for the above rule).
• Verify Base Href: Double-check that the base href in the Angular index.html (from the dist folder) matches the MVC view’s route—this is critical for routing and asset loading.

5. Troubleshooting Common Issues #

• Assets Not Loading: Confirm the base href is correct and the script/style paths in the CSHTML view match the actual location of the dist files.
• Angular Routing Broken: Use the IIS rewrite rule mentioned above, and ensure the base href is set to the MVC view’s route.
• Build Errors in VS2015: Make sure the Angular dist files are included in the MVC project and set to copy to output. If using ng build --watch, refresh the MVC project in VS2015 to pick up changes.

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