使用Git子模块嵌套Angular项目出现编译错误

一、先修复ng serve同时编译两个项目的问题 #

Angular CLI会自动扫描子目录中的angular.json配置，导致运行项目A时触发项目B的编译。你可以通过修改项目A的angular.json排除项目B的目录：

1. 打开项目A的angular.json，找到projects -> [你的A项目名称] -> architect -> build -> options，添加exclude配置：

"options": {
  // 保留原有配置
  "exclude": ["path/to/project-b/**/*"]
}

2. 同样在architect -> serve -> options中添加相同的exclude配置，确保dev server不会扫描项目B的代码。

二、引用项目B的构建产物（推荐方案） #

直接复用项目B的构建产物比源码引用更稳定，步骤如下：

1. 单独构建项目B：进入项目B根目录，执行构建命令：

ng build --prod

构建完成后会在B的根目录生成dist/[project-b-name]目录（project-b-name是B的package.json中name字段的值）。

2. 本地链接依赖：

   • 进入B的dist/[project-b-name]目录，执行：

   npm link
   

   • 回到项目A根目录，执行：

   npm link [project-b-name]
   

3. 在项目A中使用：
   在A的模块中导入项目B的模块，示例：

   import { ProjectBModule } from 'project-b-name';
   
   @NgModule({
     imports: [
       // 其他模块
       ProjectBModule
     ]
   })
   export class AppModule { }
   

   之后即可正常使用B中的组件。

三、替代方案：采用Monorepo结构 #

如果后续还要扩展到项目C，推荐用Angular CLI工作区或Nx管理多项目：

• 创建空工作区：ng new my-workspace --create-application=false
• 将A、B、C作为工作区的应用依次添加：ng generate application project-a
• 在工作区中配置项目依赖，让A和C依赖B的源码或构建产物，编译时会自动处理依赖顺序，无需手动配置排除规则。

四、注意事项 #

• 确保项目B的package.json正确声明了导出模块和组件，构建产物的入口文件（main字段）配置无误。
• 如果想用tsconfig.json的paths直接引用B的源码，需在A的tsconfig.json中添加路径映射，但仍要保留A的编译排除配置，避免重复编译。

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