Angular+Nx Monorepo构建问题：解决rootDir报错与重复端点冗余

问题背景 #

基于@nx和@angular搭建的Monorepo，目录结构如下：

libs
- ui-components
--_components
---atoms
----alert
---molecules
----datepicker
--alert
--datepicker

原配置中，tsconfig.base.json为库配置了secondary endpoints：

"@library-name/ui-components/alert": ["libs/ui-components/alert/index.ts"],
"@library-name/ui-components/datepicker": ["libs/ui-components/datepicker/index.ts"],

alert、datepicker目录仅含index.ts和ng-package.json，其中index.ts通过相对路径导出_components下的对应组件：

export * from '../_components/atoms/alert';

项目运行及Storybook调试正常，但构建时报错：

/_components/atoms/alert/index.ts' is not under 'rootDir' '

尝试为_components下的组件添加ng-package.json并改用包路径导出，虽解决报错但生成重复端点，导致package.json字符数超出GitLab限制，现需无需secondary entries的解决方案。

无需Secondary Entries的解决方案 #

方案一：单一入口组件库 #

1. 清理冗余配置与目录

• 删除tsconfig.base.json中所有secondary endpoints映射条目
• 删除ui-components下的alert、datepicker子目录

2. 统一导出组件

在ui-components根目录的index.ts中直接导出所有组件：

export * from './_components/atoms/alert';
export * from './_components/molecules/datepicker';

3. 配置ng-packagr

更新libs/ui-components/ng-package.json，确保包含_components目录的所有文件：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/ui-components",
  "lib": {
    "entryFile": "index.ts",
    "include": [
      "_components/**/*",
      "index.ts"
    ]
  }
}

4. 调整TS编译配置

在libs/ui-components/tsconfig.lib.json中设置正确的rootDir与文件范围：

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "../../dist/out-tsc/libs/ui-components"
  },
  "include": ["index.ts", "_components/**/*"],
  "exclude": ["**/*.spec.ts"]
}

方案二：保留子入口但避免重复端点 #

若需保留@library-name/ui-components/alert这类对外入口，可通过TS路径映射实现，无需secondary entries：

1. 重构入口文件

• 删除alert、datepicker子目录下的ng-package.json
• 将alert/index.ts、datepicker/index.ts移至ui-components根目录，重命名为alert.ts、datepicker.ts

2. 配置TS路径映射

在tsconfig.base.json中添加路径映射：

"@library-name/ui-components/alert": ["libs/ui-components/alert.ts"],
"@library-name/ui-components/datepicker": ["libs/ui-components/datepicker.ts"]

3. 更新ng-packagr配置

确保libs/ui-components/ng-package.json包含新增的入口文件：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/ui-components",
  "lib": {
    "entryFile": "index.ts",
    "include": [
      "_components/**/*",
      "index.ts",
      "alert.ts",
      "datepicker.ts"
    ]
  }
}

两种方案均不会生成重复端点，且能解决构建时的rootDir报错问题。

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