如何将非SPA的AngularJS应用迁移到Angular，实现每页一个组件？

背景 #

我有一个规模较大的遗留ASP.Net MVC应用，包含约20个不同页面，每个页面使用独立的AngularJS控制器。应用共享大量模块、服务和指令，但从未使用AngularJS路由——每个页面都是独立的AngularJS应用，通过.NET MVC视图渲染时加载各自的ng-app标签实现动态交互，页面间路由完全由MVC处理。

我精通AngularJS，但对Angular 2+仅掌握基础（完成过Tour of Heroes教程和少量示例）。

预期实现模式 #

我计划沿用现有多页面独立交互的模式：将每个AngularJS控制器重写为Angular组件，在单个Angular项目内统一开发，通过Angular CLI构建后，把dist/目录下的脚本引入对应MVC视图，每个MVC视图仅加载并渲染一个Angular组件。

举个具体例子：

• 账单（Billing）MVC视图中嵌入：

<app-root>
   <app-billing-component></app-billing-component>
</app-root>

• 套餐（Plan）MVC视图中嵌入：

<app-root>
   <app-plan-component></app-plan-component>
</app-root>

实际遇到的问题 #

在做概念验证时，发现Angular CLI默认的构建逻辑是为单页应用（SPA）设计的：所有组件模板、逻辑都会被打包进main.js，仅生成一个带有空<app-root>标签的基础index.html。尝试在MVC视图中直接引用main.js并使用单个组件时完全无效，因为默认构建产物不支持多页面分别加载独立组件的场景。

核心疑问 #

我需要解决的问题是：

• 如何在不拆分多个独立Angular应用（避免为每个页面单独构建专属的main.js）的前提下，实现每个MVC视图对应加载一个Angular组件？
• 是否可以调整Angular的构建配置来适配这种多页面集成模式？
• 是否需要绕过ng build命令，直接将特定编译后的文件引入MVC视图？

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