如何访问另一Angular项目指定资源以实现自定义主题实时预览

以下三种方案均无需合并两个仓库，也不需要全量拉取App-B的代码，可结合你的实际场景选择：

方案1：私有依赖包共享 #

• App-B仓库内新增独立的资源导出配置，将scss目录、指定libs模块封装为内部私有npm包，仅暴露你需要的资源，不涉及App-B的业务代码
• 本地开发时可通过npm link将本地App-B仓库中的这个私有包目录链接到App-A的依赖目录，修改App-B的资源后App-A可实时同步效果
• 上线前按版本发布私有包到内部npm源，App-A安装对应版本的包即可，可实现资源版本的精准管控，避免不同步问题

方案2：静态资源代理挂载 #

• App-B将需要共享的scss、指定libs模块统一构建为独立的静态资源集，托管在App-B服务的固定路径下（例如/shared-assets/）
• 本地开发阶段，给App-A的开发服务配置代理规则，将/shared-assets/前缀的请求转发到App-B的本地开发服务地址，直接在App-A中引入对应路径的资源即可
• 线上环境因为两个应用部署在同一台服务器，可直接通过Nginx配置把App-B的静态资源路径挂载到App-A同域的对应路径，无需跨域处理

方案3：iframe沙箱预览（最贴合主题预览需求） #

• App-B新增一个精简的预览路由，该路由仅渲染你需要的两个预览模块，同时预留postMessage消息监听接口，可接收外部传入的自定义主题变量，动态替换页面样式
• App-A直接通过iframe嵌套该预览路由，用户在App-A修改主题配置后，通过postMessage将变量传递给iframe内的预览页面，实时渲染修改效果
• 该方案的预览效果和App-B实际运行效果完全一致，且样式、JS逻辑完全隔离，不会和App-A的代码产生冲突，是大部分主题配置平台的主流实现方式

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