如何在ASP.NET MVC3项目中复用独立Angular5+ TypeScript项目组件？

我之前帮好几个团队搞定过这种新旧系统过渡的组件复用需求，结合你说的「新应用是独立TypeScript项目、最终要替换旧MVC3」这两个核心要求，下面给你几个经过实战验证的最佳方案，按落地优先级排序：

1. 首选方案：Angular Elements（Web Components 封装） #

这是最贴合你需求的方案——把Angular组件打包成标准的Web Components，完全独立于MVC项目，既能复用组件，又不破坏新应用的独立性。

具体步骤： #

• 第一步：在Angular5+项目中配置Elements
  安装依赖（Angular5已经支持Elements，需兼容旧浏览器的话加polyfill）：

  npm install @angular/elements document-register-element --save
  

• 第二步：将目标组件封装为自定义元素
  比如你要复用UserProfileComponent，在Angular模块中注册成自定义标签：

  import { NgModule, Injector } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { UserProfileComponent } from './user-profile/user-profile.component';
  import { createCustomElement } from '@angular/elements';
  
  @NgModule({
    imports: [BrowserModule],
    declarations: [UserProfileComponent],
    entryComponents: [UserProfileComponent] // 必须声明，因为不会在Angular模板中直接引用
  })
  export class AppModule {
    constructor(private injector: Injector) {
      // 把组件转为自定义元素
      const userProfileElement = createCustomElement(UserProfileComponent, { injector });
      // 注册为全局可用的自定义标签
      customElements.define('app-user-profile', userProfileElement);
    }
  
    ngDoBootstrap() {} // 禁用默认Angular启动逻辑，因为我们只输出自定义元素
  }
  

• 第三步：打包并合并为单个Bundle
  构建Angular项目后，把生成的runtime.js、polyfills.js、main.js合并成一个文件（方便MVC引用），可以用脚本或工具完成：

  concat dist/new-app/runtime.js dist/new-app/polyfills.js dist/new-app/main.js > dist/user-profile-bundle.js
  

• 第四步：在MVC3应用中引用
  把合并后的Bundle放到MVC的静态资源目录（比如~/Scripts/angular-elements/），然后在需要的视图（如Index.cshtml）中直接使用：

  <script src="~/Scripts/angular-elements/user-profile-bundle.js"></script>
  
  <!-- 像普通HTML标签一样使用，支持传参 -->
  <app-user-profile user-id="@Model.UserId"></app-user-profile>
  

方案优势： #

• 完全符合「新应用独立」的要求，Angular项目可以正常迭代，无需依赖MVC
• 组件是标准Web Components，未来完全替换旧应用后仍可复用
• 支持双向绑定和事件传递（比如组件内的事件可以在MVC页面中监听）

注意点： #

• 针对IE11等旧浏览器需要额外配置polyfill
• 首次加载Bundle会有一定体积开销，可以按需加载优化

2. 快速验证方案：Iframe嵌入 #

如果只是临时快速复用某个组件，不想折腾Elements配置，可以用Iframe嵌入，零改造成本。

具体步骤： #

• 在Angular项目中创建专门的嵌入路由页面，比如/embedded/user-profile，页面中只包含要复用的组件
• 在MVC视图中嵌入这个页面：

  <iframe src="https://your-new-app-domain.com/embedded/user-profile?userId=@Model.UserId" 
          width="100%" height="400px" frameborder="0"></iframe>
  

方案优势： #

• 零配置，Angular项目无需修改
• 新旧应用完全隔离，不会出现样式、JS冲突
• 快速实现组件复用

缺点： #

• 样式适配麻烦（比如iframe高度自适应需要额外处理）
• 跨域交互需要用postMessage，体验不如原生组件流畅

3. 不推荐方案：直接引入Angular打包文件 #

这个方案是把Angular的打包产物复制到MVC项目中直接引用，耦合度很高，仅适合极短期临时过渡：

具体步骤： #

• 把Angular打包后的runtime.js、polyfills.js、main.js和样式文件复制到MVC的Scripts、Content目录
• 在MVC视图中引入并指定Angular根元素：

  <link rel="stylesheet" href="~/Content/new-app/styles.css">
  <script src="~/Scripts/new-app/runtime.js"></script>
  <script src="~/Scripts/new-app/polyfills.js"></script>
  <script src="~/Scripts/new-app/main.js"></script>
  
  <div id="angular-root"></div>
  

缺点： #

• 耦合度极高，每次Angular更新都要手动复制文件到MVC项目
• 新旧应用的全局样式、JS容易冲突
• 不符合「新应用独立项目」的长期规划

总结 #

优先选择Angular Elements方案，它完美契合你的需求，既保证新应用的独立性，又能实现组件的无缝复用，为后续完全替换旧MVC应用做好铺垫。如果是临时验证，用Iframe快速实现即可。

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