Angular如何从MonoRepo转PolyRepo并跨项目共享组件服务

你目前用@angular-architects/module-federation没法共享组件、服务，本质是配置和导出逻辑没写对，MF本身不限制共享的内容类型，NgModule、组件、服务、指令、管道都可以跨应用共享，以下是可直接落地的方案：

方案1：基于Module Federation运行时共享（适合业务类组件/服务动态复用） #

这个方案不需要单独建库、不需要额外发版，共享方更新代码部署后，消费方不需要重新构建就能拿到最新逻辑，适合跨应用嵌入业务模块、业务组件的场景：

• 第一步：统一导出入口
  被共享的组件、服务不要散落在业务代码里，在提供共享能力的应用（比如contacts项目）根目录新建public-api.ts文件，统一导出所有要对外暴露的能力：

  // src/public-api.ts
  export * from './contact-card/contact-card.component';
  export * from './services/auth.service';
  export * from './contact-list/contact-list.module';
  

• 第二步：配置共享方的MF规则
  修改共享方的webpack配置，在exposes字段声明要对外暴露的组件、服务路径，同时保证Angular核心依赖配置为单例，避免多实例冲突：

  // webpack.config.js（共享方配置）
  const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
  
  module.exports = withModuleFederationPlugin({
    name: 'contacts',
    exposes: {
      './ContactCard': './src/app/contact-card/contact-card.component.ts',
      './AuthService': './src/app/services/auth.service.ts',
      './ContactListModule': './src/app/contact-list/contact-list.module.ts'
    },
    shared: {
      ...shareAll({ 
        singleton: true, 
        strictVersion: true, 
        requiredVersion: 'auto' 
      }),
    },
  });
  

  注意：服务必须依赖单例的Angular核心上下文，所以@angular/core、@angular/common这类基础依赖必须开启singleton，不然会出现注入失败、状态不互通的问题
• 第三步：消费方配置与调用
  在消费方（比如main-app）的MF配置里声明远程应用的地址，之后就可以直接动态导入使用共享的组件、服务：

  // webpack.config.js（消费方配置）
  const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
  
  module.exports = withModuleFederationPlugin({
    remotes: {
      contacts: "contacts@http://你的contacts应用部署地址/remoteEntry.js"
    },
    shared: {
      ...shareAll({ 
        singleton: true, 
        strictVersion: true, 
        requiredVersion: 'auto' 
      }),
    },
  });
  

  组件调用示例：

  import { Component, ViewContainerRef, AfterViewInit } from '@angular/core';
  // 动态导入远程组件
  const ContactCardComponent = import('contacts/ContactCard');
  
  @Component({
    selector: 'app-container',
    template: `<ng-container #componentHost></ng-container>`
  })
  export class ContainerComponent implements AfterViewInit {
    constructor(private vcRef: ViewContainerRef) {}
    async ngAfterViewInit() {
      const { ContactCardComponent: Comp } = await ContactCardComponent;
      this.vcRef.createComponent(Comp);
    }
  }
  

  服务调用示例：

  import { Injectable, inject } from '@angular/core';
  const AuthServiceImport = import('contacts/AuthService');
  
  @Injectable({providedIn: 'root'})
  export class LocalService {
    private authService: Awaited<typeof AuthServiceImport>['AuthService'] | null = null;
    async init() {
      const { AuthService } = await AuthServiceImport;
      this.authService = inject(AuthService);
    }
  }
  

  注意：不要在消费方的providers数组里重复注册远程导入的服务，不然会覆盖单例，生成独立实例导致状态不同步

方案2：独立公共库共享（适合通用类组件/服务版本化复用） #

如果要共享的是无强业务属性的通用能力（比如UI组件、请求拦截器、工具服务），不要用MF做运行时共享，抽成标准Angular Library做版本化发布更稳定，完全适配PolyRepo模式：

• 你可以选择单独新建一个公共库仓库，也可以在现有任意业务仓库里用ng generate library ng-common生成标准Angular库项目，把通用组件、服务都放到库目录下，统一从库的public-api导出。
• 公共库不需要发布到公网npm，PolyRepo场景下两种引入方式即可满足需求：
  • 方式一：发版时执行ng build ng-common编译库产物，再执行npm pack生成tgz压缩包，把压缩包上传到内网存储地址或者直接放到项目目录，各个业务仓库在package.json里引用这个包即可，和普通npm包使用方式完全一致。
  • 方式二：直接用Git依赖，在package.json里引用公共库的Git仓库地址加版本tag，安装依赖时npm会自动拉取对应版本的代码编译使用，不需要搭建私有npm服务。
• 所有业务仓库按自己的迭代节奏升级公共库版本，不会出现一个应用改了通用逻辑导致所有线上应用崩溃的问题。

你现在已经是多仓库独立工作区、独立部署的结构，落地PolyRepo只要守住几个核心规则，就能避免跨仓库耦合混乱的问题：

• 统一基础依赖版本：所有关联的Angular应用必须锁定一致的Angular主版本、RxJS版本、全局状态库版本，不管是用MF共享还是公共库共享，基础依赖版本不一致是90%跨应用报错的根源。
• 共享能力分层明确：
  • 强业务属性的模块、组件、服务（比如联系人模块、业务专属的用户信息服务）：走MF运行时共享，业务迭代时只需要部署对应业务仓库，消费方自动更新，不需要联动发版。
  • 通用无业务属性的能力（比如统一的UI组件、日志服务、鉴权逻辑）：抽公共库做版本化发布，禁止通过MF运行时共享这类基础能力，避免全局故障。
• 禁止代码复制：不要为了省事把其他仓库的组件、服务代码直接复制到自己仓库，后续逻辑迭代时会出现多份代码不一致的问题，要么走MF动态共享，要么引用版本化公共库，不要留多份冗余代码。
• 本地联调配置：本地开发时，把消费方MF配置里的远程地址指向本地启动的对应应用端口（比如本地contacts应用启动在4201端口，就把remoteEntry地址改成http://localhost:4201/remoteEntry.js），可以直接本地联调跨应用的组件、服务，不需要部署到测试环境。
• 部署规则固定：每个应用独立构建、独立部署，部署后remoteEntry.js的访问路径固定，不要每次发版修改文件名或者路径，消费方不需要因为共享方发版调整配置。

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