如何将Angular4与现有ASP.NET MVC项目进行对接？

嘿，我来帮你把Angular 4整合到现有的ASP.NET MVC项目里，结合你给出的项目结构，咱们一步步来操作：

首先得确保本地装了这些适配Angular 4的工具：

• 安装Node.js（建议选8.x或10.x版本，Angular 4对过高版本Node的兼容性有限）
• 全局安装对应版本的Angular CLI，打开命令行执行：

  npm install -g @angular/cli@1.7.4
  

  这个CLI版本和Angular 4.3.x完美匹配，能避免大部分版本兼容问题。

打开命令行，导航到你的ASP.NET MVC项目根目录（就是包含Controllers、Views这些文件夹的目录），执行以下命令生成Angular项目：

ng new ClientApp --style css --routing false

这里ClientApp是存放Angular代码的专属文件夹，你也可以改成AngularApp这类自定义名称；--routing false是暂时不启用Angular路由，后续需要再添加即可。

等项目生成完成后，进入ClientApp目录执行npm install，确保所有依赖包都安装到位。

我们需要让Angular编译后的文件输出到MVC能识别的静态资源文件夹里，适配你现有项目的Scripts目录就很合适：

• 打开ClientApp/.angular-cli.json（老版本CLI的配置文件），找到outDir配置项，修改为：

  "outDir": "../Scripts/angular-dist"
  

  这样编译后的Angular文件会自动输出到MVC项目的Scripts/angular-dist文件夹，方便MVC视图直接引用。

选一个MVC视图作为Angular应用的载体，比如用Home/Index.cshtml：

• 打开Views/Home/Index.cshtml，清空原有内容，添加以下代码：

  <!-- Angular根组件的容器 -->
  <app-root></app-root>
  
  <!-- 引入Angular编译后的脚本和样式 -->
  <script src="~/Scripts/angular-dist/inline.bundle.js"></script>
  <script src="~/Scripts/angular-dist/polyfills.bundle.js"></script>
  <script src="~/Scripts/angular-dist/styles.bundle.js"></script>
  <script src="~/Scripts/angular-dist/vendor.bundle.js"></script>
  <script src="~/Scripts/angular-dist/main.bundle.js"></script>
  

  注意：文件名可能会根据你的Angular配置略有差异，编译后可以去Scripts/angular-dist目录确认实际文件名。

如果后续给Angular添加了路由，刷新页面可能出现404错误，这时候要配置MVC的 fallback路由：

• 打开App_Start/RouteConfig.cs，添加一条 fallback路由规则：

  routes.MapRoute(
      name: "AngularFallback",
      url: "{*url}",
      defaults: new { controller = "Home", action = "Index" }
  );
  

  这条规则会把所有MVC无法匹配的请求转发到Home/Index，交给Angular路由处理。

• 开发阶段：在ClientApp目录执行ng serve --watch，可以实时编译Angular代码，直接访问http://localhost:4200就能快速测试Angular应用，开发完成后再构建到MVC项目。
• 生产构建：在ClientApp目录执行ng build --prod，会生成优化后的生产版本文件到Scripts/angular-dist，运行MVC项目就能看到整合后的完整效果。

• 如果你的MVC项目包含API接口，Angular调用时直接用相对路径即可（比如/api/Values/Get），同一项目部署下不会有跨域问题。
• 若想保留MVC的_Layout.cshtml布局，可以把<app-root></app-root>放到布局的合适位置，再引入Angular的脚本和样式，但要注意避免布局内其他脚本和Angular产生冲突。

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