非MVC的.Net aspx项目加载Angular组件/Modules的实现咨询

第一步：调整Angular项目配置（关闭路由、支持多组件独立挂载） #

• 新建Angular项目时不要选择引入路由模块，已有项目可直接删除路由配置文件、移除AppModule中路由相关的引用和注册逻辑
• 安装@angular/elements依赖，将需要对外暴露的Angular组件注册为原生自定义Web组件，无需默认挂载根App组件，参考配置如下：

import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
// 引入所有需要在ASPX页面使用的Angular组件
import { UserInfoComponent } from './components/user-info/user-info.component';
import { DataChartComponent } from './components/data-chart/data-chart.component';

@NgModule({
  declarations: [
    UserInfoComponent,
    DataChartComponent
  ],
  imports: [
    BrowserModule
  ],
  // 移除bootstrap根组件配置
  providers: []
})
export class AppModule {
  constructor(private injector: Injector) {
    // 逐个注册自定义组件，指定标签名
    const userInfoEle = createCustomElement(UserInfoComponent, { injector: this.injector });
    customElements.define('app-user-info', userInfoEle);

    const dataChartEle = createCustomElement(DataChartComponent, { injector: this.injector });
    customElements.define('app-data-chart', dataChartEle);
  }

  ngDoBootstrap() {}
}

如果你使用Angular 14及以上版本，可直接使用独立组件配合createCustomElement打包，无需配置NgModule，流程更简洁

• 执行ng build构建打包，得到runtime.js、polyfills.js、main.js、styles.css四个核心静态资源文件

第二步：在Master Page母版页全局引入Angular资源 #

• 将Angular构建出的静态资源放入.NET项目的静态资源目录，比如/assets/angular-dist/
• 在母版页的</body>闭合标签前按顺序引入资源，所有引用母版页的ASPX页面会自动加载，无需单页重复引入：

<script src="/assets/angular-dist/runtime.js"></script>
<script src="/assets/angular-dist/polyfills.js"></script>
<script src="/assets/angular-dist/main.js"></script>
<link rel="stylesheet" href="/assets/angular-dist/styles.css">

第三步：ASPX页面按需加载对应Angular组件 #

直接在需要展示组件的ASPX页面指定区域，写入你注册的自定义组件标签即可，也可以直接绑定后端输出的动态参数：

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2>用户中心</h2>
    <!-- 直接插入Angular用户信息组件，绑定后端输出的用户ID -->
    <app-user-info uid="<%= LoginUserId %>"></app-user-info>

    <div class="analysis-block">
        <h3>数据统计</h3>
        <!-- 插入Angular图表组件，传入统计类型参数 -->
        <app-data-chart type="user-trend"></app-data-chart>
    </div>
</asp:Content>

不同的ASPX页面根据需求使用对应的组件标签即可，完全不需要启用Angular路由，各个组件独立渲染互不影响。

可选优化 #

• 如果部分组件体积较大，可以拆分为多个独立Angular子项目单独构建，只在对应需要的ASPX页面单独引入对应组件的bundle，降低全局加载体积
• 组件和ASPX页面原生JS交互可以通过自定义事件实现：Angular组件用@Output()触发自定义事件，ASPX页面用addEventListener监听事件即可

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