如何在Angular 15中集成Razor局部视图并部署至Kestrel/Apache

一、项目结构规划与初始化 #

• 在ASP.NET MVC项目根目录下，通过VS Code终端创建Angular子项目：

  ng new angular-components --routing false --style css
  

• 调整Angular项目输出路径：修改angular.json中projects.angular-components.architect.build.options.outputPath为../wwwroot/angular-dist，让打包产物直接输出到MVC的静态文件目录。

二、开发模式：MVC与Angular服务绑定 #

1. 配置Angular代理解决跨域 #

在Angular项目根目录创建proxy.conf.json，转发API请求到MVC站点：

{
  "/api/*": {
    "target": "https://localhost:7168",
    "secure": false,
    "changeOrigin": true
  }
}

启动Angular开发服务时指定代理：

ng serve --proxy-config proxy.conf.json --port 4200

2. MVC视图中动态加载Angular资源 #

在MVC的布局页（如_Layout.cshtml）或具体视图中，根据环境判断加载开发/生产环境的Angular脚本：

<!-- 挂载Angular应用的根容器 -->
<app-root id="angular-root"></app-root>

<!-- 动态加载Angular脚本 -->
@if (Environment.IsDevelopment())
{
    <script src="http://localhost:4200/runtime.js"></script>
    <script src="http://localhost:4200/polyfills.js"></script>
    <script src="http://localhost:4200/styles.js"></script>
    <script src="http://localhost:4200/vendor.js"></script>
    <script src="http://localhost:4200/main.js"></script>
}
else
{
    <script src="~/angular-dist/runtime.js"></script>
    <script src="~/angular-dist/polyfills.js"></script>
    <script src="~/angular-dist/styles.js"></script>
    <script src="~/angular-dist/vendor.js"></script>
    <script src="~/angular-dist/main.js"></script>
}

三、解决MVC原有脚本与Angular的冲突 #

1. 隔离全局变量污染 #

• 将MVC中的旧脚本（如jQuery、自定义全局函数）用IIFE包裹，避免污染全局作用域：

  (function(window, $) {
      // 原有脚本逻辑
      $(function() {
          // 初始化代码
      });
  })(window, jQuery.noConflict(true));
  

• 在Angular的angular.json中，将MVC依赖的第三方脚本添加到scripts数组，由Angular统一管理加载顺序：

  "scripts": [
      "../wwwroot/scripts/jquery.min.js",
      "../wwwroot/scripts/bootstrap.min.js"
  ]
  

2. 避免Zone.js冲突 #

如果MVC脚本中有异步操作（如AJAX、定时器）导致Angular变更检测失效，可将这类操作包裹在NgZone.runOutsideAngular中，或在操作完成后手动触发变更检测：

import { NgZone, ChangeDetectorRef } from '@angular/core';

constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}

loadMVCData() {
    this.ngZone.runOutsideAngular(() => {
        // 调用MVC的全局AJAX方法
        window['loadUserData']((data) => {
            this.ngZone.run(() => {
                this.userData = data;
                this.cdr.detectChanges();
            });
        });
    });
}

四、用Angular组件替换Razor局部视图 #

1. 创建对应Angular组件 #

以UserHeader.cshtml为例，创建Angular组件：

ng generate component user-header

在user-header.component.ts中定义输入属性，接收MVC传递的数据：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-user-header',
  templateUrl: './user-header.component.html',
  styleUrls: ['./user-header.component.css']
})
export class UserHeaderComponent {
  @Input() userName: string = '';
  @Input() userAvatar: string = '';
}

2. 在MVC视图中替换局部视图 #

将原有的@Html.Partial("_UserHeader")替换为Angular组件标签，并通过data-*属性或ViewBag传递数据：

<!-- 替换Razor局部视图 -->
<app-user-header 
    [userName]="'@ViewBag.UserName'" 
    [userAvatar]="'@ViewBag.UserAvatar'">
</app-user-header>

五、部署到Kestrel或Apache服务器 #

1. 打包Angular应用 #

执行打包命令，生成生产环境产物：

ng build --prod --base-href /angular-dist/

2. Kestrel部署 #

• 直接发布ASP.NET MVC项目（包含wwwroot/angular-dist目录），发布包部署到服务器后，通过命令启动Kestrel：

  dotnet YourMvcProject.dll --urls "http://*:5000;https://*:5001"
  

3. Apache部署 #

• 将MVC发布包上传到Apache服务器的网站根目录，修改httpd.conf或虚拟主机配置文件：

  <VirtualHost *:80>
      ServerName yourdomain.com
      DocumentRoot /var/www/your-mvc-project/wwwroot
  
      <Directory /var/www/your-mvc-project/wwwroot>
          AllowOverride All
          Require all granted
      </Directory>
  
      # 转发API请求到Kestrel（若MVC使用Kestrel作为后端）
      ProxyPass /api http://localhost:5000/api
      ProxyPassReverse /api http://localhost:5000/api
  </VirtualHost>
  

• 确保Apache启用mod_proxy和mod_proxy_http模块。

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