嵌入Angular Elements Web组件后Angular外壳项目app-root渲染失效问题

渲染失效的核心原因是Web组件打包时未做依赖隔离，导致页面同时存在两份独立的Angular全局运行时实例。

• 你当前拼接生成的nav-bar.js，是将独立Angular项目常规构建的main.js、polyfill.js、runtime.js、vendor.js全量拼接的结果，这类常规构建产物是为独立运行的页面设计的，内置了完整的Angular核心、zone.js、RxJS、Bootstrap组件库等全部框架级依赖。
• 这类依赖大多通过补丁式修改全局API实现功能，尤其是zone.js，一旦页面同时加载两份不同来源的zone实例，会直接覆盖全局的变更检测上下文、打断外壳Angular应用的正常bootstrap流程，最终表现就是<app-root>因初始化流程被打断，始终渲染为空。
• 这套拼接产物在纯静态HTML页面里能正常运行，是因为页面上不存在另一套Angular应用，你拼接的运行时是页面唯一的一份，自然不会产生冲突。

不要再手动拼接常规Angular应用的构建产物，要针对Angular Elements的Web组件场景做定制化构建：

• 构建时将所有和宿主应用重复的框架级依赖（@angular/core、@angular/common、zone.js、RxJS、@ng-bootstrap/ng-bootstrap等公共依赖）标记为外部依赖，不要打包进最终的nav-bar.js文件。
• 最终产出的nav-bar.js只保留组件自身的业务逻辑、模块定义、createCustomElement和customElements.define的注册逻辑，所有框架级运行时完全复用宿主Angular应用已经加载的那一套，从根源上避免双实例冲突。
• 之前你发现去掉vendor.js后Web组件无法运行，本质是常规构建的vendor包包含了组件运行必需的框架代码；做外部依赖标记后，这部分代码会直接复用宿主应用已加载的副本，不需要额外打包进组件文件，自然不存在去掉vendor包就跑不起来的问题。

如果想快速确认根因，可以做简单测试：

• 从你当前拼接的nav-bar.js中，移除原项目polyfill.js、vendor.js对应的全部框架级代码，只保留组件自身的业务逻辑代码，再将脚本放入壳应用页面，就能看到<app-root>恢复正常渲染，同时nav-bar组件也可正常工作。

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