Angular新手求助：能否跨多项目共享组件？求实现方法

当然可以实现！这在Angular开发里是非常常见（而且明智）的需求——跨项目复用组件能帮你省下超多后续维护的时间。下面就给你一步步讲清楚具体怎么做：

方法一：创建Angular库（官方推荐） #

这是Angular官方主推的组件复用方案，特别适合需要长期维护、多人共享的通用组件。

• 步骤1：生成库工作区
  打开终端，找个空目录运行下面的命令，创建一个不带默认应用的工作区，专门用来放共享组件：

  ng new shared-components-workspace --create-application=false
  cd shared-components-workspace
  ng generate library customer-crud
  

  执行完后，你会得到一个projects/customer-crud目录，这就是存放CustomerComponent的地方。

• 步骤2：迁移你的组件到库中
  把原来项目里CustomerComponent的.ts、.html、.css（或.scss）文件，复制到projects/customer-crud/src/lib目录下。然后记得修改库根目录的public-api.ts，把组件（和它所属的模块）导出，这样其他项目才能引用到：

  export * from './lib/customer.component';
  export * from './lib/customer.module'; // 如果组件属于某个模块的话一定要加这个
  

• 步骤3：构建并共享库

  • 本地测试用：先构建库

    ng build customer-crud
    

    然后去项目A或B的终端，通过本地路径安装这个库：

    npm install ../shared-components-workspace/dist/customer-crud
    

  • 团队共享用：发布到npm仓库（不管是公共还是私有仓库都可以）
    先登录你的npm账号，然后进入构建好的目录发布：

    cd dist/customer-crud
    npm publish
    

• 步骤4：在项目里使用组件
  比如在项目A的AppModule里导入库的模块：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { CustomerModule } from 'customer-crud'; // 从库中导入模块
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, CustomerModule],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

  之后就能在模板里直接用组件了：

  <app-customer></app-customer>
  

方法二：Git子模块（小团队快速方案） #

如果不想折腾库的发布流程，小团队内部可以用Git子模块快速共享组件：

• 步骤1：把组件放到独立Git仓库
  把CustomerComponent和相关文件单独放到一个Git仓库里，比如命名为shared-customer-component。

• 步骤2：在项目中添加子模块
  打开项目A的终端，运行命令把这个仓库作为子模块导入到项目里：

  git submodule add <你的Git仓库地址> src/app/shared/customer-component
  

  这样组件就会出现在项目的指定目录下了。

• 步骤3：在项目中引入使用
  和你在单个项目里用组件一样，在模块里声明或导入这个组件，然后在模板里调用就行。

  提示：这种方式的缺点是，组件更新后，每个项目都要手动拉取子模块的更新，维护起来不如库的方式省心。

后续维护小贴士 #

• 以后要修改CustomerComponent的话，只需要在库（或子模块仓库）里改一次，重新构建发布（或提交Git更新），然后在项目A/B里更新依赖（或拉取子模块）就搞定了，不用再挨个项目改代码。
• 如果你的组件依赖了其他库（比如Angular Material），记得在库的package.json里把这些依赖声明清楚，避免使用的项目出现依赖缺失的问题。

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