在ASP.Net MVC 5项目中集成Angular 5导致构建失败

我之前帮同事处理过几乎一模一样的ASP.NET MVC 5 + Angular 5集成构建问题，结合你给出的环境细节，咱们一步步拆解可能的故障点和对应的解决办法：

毕竟是通过.csproj触发的Angular构建，首先要确认脱离ASP.NET项目后，Angular本身能不能正常构建：

• 切换到Angular项目的根目录（就是有package.json的文件夹），手动执行ng build --extract-css命令，看是否能正常生成dist文件夹。如果手动执行就失败，那问题出在Angular项目本身：
  • 检查依赖版本兼容性：Angular 5.2.0和cli 1.7.4是匹配的，但要确保所有@angular/*包的版本都是5.2.0，避免版本不一致冲突。可以运行npm ls @angular/core查看依赖树，找出版本不匹配的包并修正。
  • 检查.angular-cli.json配置：cli 1.7.4用的是这个配置文件，确认outputPath设为dist，assets、styles、scripts里的路径没有引用不存在的文件。
  • 检查TypeScript版本：Angular 5.2.0对应TypeScript 2.4.x~2.6.x，如果你的项目用了更高版本的TS语法（比如可选链?.），会导致编译失败，要么把TS版本降到兼容范围，要么修改代码适配旧版TS。

如果手动构建Angular没问题，但通过ASP.NET项目构建就失败，那要检查MSBuild的触发配置：

• 打开你的.csproj文件，找到触发Angular构建的目标代码，比如类似这样的片段：

<Target Name="BuildAngular" BeforeTargets="Build">
  <Exec Command="npm run build" WorkingDirectory="$(ProjectDir)ClientApp" />
</Target>

• 确认WorkingDirectory指向的是Angular项目的根目录，路径错了会导致找不到package.json或npm命令。
• 确认npm命令的正确性：要么你的package.json的scripts里有"build": "ng build --extract-css"，要么直接在Exec Command里写完整的构建命令，比如$(AppData)\npm\ng.cmd build --extract-css（确保ng命令在MSBuild的环境变量里能被找到）。
• 查看MSBuild输出日志：在Visual Studio的“输出”窗口选择“生成”选项，仔细看构建时的错误提示——是npm命令执行失败，还是Angular构建过程中抛出的具体错误，这能精准定位问题。

如果Angular构建成功，但ASP.NET项目构建失败，大概率是BundleConfig引用的资源路径有问题：

• 确认dist文件夹的生成位置：如果Angular项目在ASP.NET项目的子文件夹（比如ClientApp）里，那dist会在ClientApp/dist下，BundleConfig里的路径要对应，比如：

bundles.Add(new ScriptBundle("~/bundles/angular").Include(
    "~/ClientApp/dist/main.js",
    "~/ClientApp/dist/polyfills.js",
    "~/ClientApp/dist/runtime.js"));

bundles.Add(new StyleBundle("~/Content/angular").Include(
    "~/ClientApp/dist/styles.css"));

• 检查文件是否存在：--extract-css参数会把CSS提取到单独的styles.css文件，要确保这个文件确实生成在dist目录，且BundleConfig里正确引用了它。
• 确认dist文件夹被纳入项目：如果dist文件夹没被包含在ASP.NET项目里，或者设置为“不复制到输出目录”，会导致构建时找不到文件。可以在.csproj里添加以下配置：

<Content Include="ClientApp/dist/**/*">
  <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>

因为你的Angular应用运行在www.mydomain.com/app路径，要确保Angular的base href配置正确，否则可能在构建时出现资源路径相关的错误：

• 在.angular-cli.json里设置"baseHref": "/app/"，或者在ng build命令里追加--base-href /app/，这样Angular生成的资源路径会自动适配/app前缀，避免构建时出现资源引用异常。

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