Angular5+.NET Core项目执行npm run dev-build后dist无HTML文件问题

首先给你明确结论：带着C#核心组件的项目完全可以通过npm run dev-build配合.NET Core后端正常运行，毕竟你的项目是前后端一体化架构，Angular负责前端静态资源，.NET Core则承担后端服务和SPA入口的路由工作。

为什么dist里看不到HTML文件？ #

这是正常情况！在.NET Core + Angular的典型模板配置里，主入口HTML（一般是index.html）不会被打包到dist文件夹，而是直接放在wwwroot目录下。因为.NET Core的静态文件中间件会默认把wwwroot作为静态资源根目录，直接读取这里的index.html作为SPA的入口，而dist文件夹只用来存放打包压缩后的JS、CSS、字体等前端资源。

怎么运行项目并访问页面？ #

你需要搭配前端打包和后端启动两步来操作：

• 第一步：执行npm run dev-build完成前端资源的编译打包，确保wwwroot/dist里的资源是最新版本
• 第二步：启动.NET Core后端服务，两种方式都可以：
  • 在VS2017里直接点工具栏的绿色启动按钮，或者右键项目选「调试>启动新实例」
  • 也可以打开命令行，进入项目根目录后执行dotnet run命令

后端启动后，会自动跳转到（或者你手动访问）项目的根地址，此时.NET Core会返回wwwroot下的index.html，这个页面会自动加载dist里的vendor.js、vendor.css等资源，你的Angular应用也就正常运行起来了。

小验证技巧 #

你可以去wwwroot目录里找一下，肯定能看到index.html文件，打开它会看到类似这样的资源引用：

<script src="dist/vendor.js"></script>
<script src="dist/main.bundle.js"></script>

如果真的找不到index.html，可以检查Angular5的配置文件.angular-cli.json，看apps数组里的index和outDir字段，确认主HTML文件的输出位置和资源打包路径。

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