Angular与MVC集成启动失败求助（附依赖配置及错误信息）

看起来你在把Angular 6和ASP.NET MVC集成时遇到了静态资源加载失败的问题——这个zone.js:1050 GET http://localhost:50803/node_modul...的错误，本质是MVC没有正确配置来提供node_modules目录下的资源，同时Angular的构建输出路径可能也没和MVC的静态文件系统对齐。我来给你一步步解决：

1. 配置MVC的静态文件访问权限 #

根据你使用的MVC版本（Core或传统MVC），选择对应的配置方式：

如果你用的是ASP.NET Core MVC #

在Startup.cs的Configure方法中，添加静态文件中间件，明确允许访问node_modules目录：

using System.IO;
using Microsoft.AspNetCore.StaticFiles;

// ...

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 先启用默认静态文件访问（wwwroot目录）
    app.UseStaticFiles();

    // 配置允许访问node_modules目录
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(env.ContentRootPath, "node_modules")),
        RequestPath = "/node_modules"
    });

    // 其他中间件配置（比如路由、MVC等）
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });
}

如果你用的是传统ASP.NET MVC（非Core） #

在项目根目录的Web.config中，添加静态文件处理规则和MIME类型映射：

<system.webServer>
  <staticContent>
    <!-- 添加Angular所需的MIME类型 -->
    <mimeMap fileExtension=".json" mimeType="application/json" />
    <mimeMap fileExtension=".js" mimeType="application/javascript" />
    <mimeMap fileExtension=".css" mimeType="text/css" />
  </staticContent>
  <handlers>
    <!-- 允许访问node_modules下的静态文件 -->
    <add name="NodeModulesStaticFile" path="node_modules/*" verb="GET" 
         modules="StaticFileModule" resourceType="File" requireAccess="Read" />
  </handlers>
</system.webServer>

2. 调整Angular的构建输出路径 #

确保Angular构建后的文件输出到MVC能识别的静态目录（比如wwwroot/dist）：

1. 打开Angular项目根目录的angular.json文件
2. 修改architect.build.options.outputPath为MVC项目的wwwroot/dist路径（根据你的项目结构调整相对路径）：

"architect": {
  "build": {
    "options": {
      "outputPath": "../wwwroot/dist",
      // 其他配置保持不变
      "index": "src/index.html",
      "main": "src/main.ts",
      // ...
    }
  }
}

3. 在MVC的视图（比如Home/Index.cshtml）中，正确引用Angular构建后的脚本文件：

<!-- 引用Angular构建后的资源 -->
<script src="~/dist/runtime.js"></script>
<script src="~/dist/polyfills.js"></script>
<script src="~/dist/styles.js"></script>
<script src="~/dist/vendor.js"></script>
<script src="~/dist/main.js"></script>

3. 验证依赖兼容性并重新构建 #

你的package.json依赖配置是兼容Angular 6的，但建议执行以下步骤确保依赖完整：

• 清理现有依赖：运行 npm ci（或npm clean install）
• 重新构建Angular项目：运行 ng build --prod（开发环境用ng build）
• 重启MVC应用程序

完成这些步骤后，应该就能解决资源加载失败的问题，成功启动集成后的项目了。

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