NX Monorepo问题：应用引用库源码而非dist编译文件

核心问题 #

构建时工具链优先加载了库的源码（.tsx文件），而主应用的TypeScript配置未启用JSX编译支持，导致报错。需要确保主应用引用的是库编译后的dist文件，而非源码。

具体步骤 #

1. 配置库的package.json入口 #

在packages/somelib/package.json中明确指定编译产物的入口，让Node/Webpack优先识别这些路径：

{
  "name": "@lib/somelib",
  "main": "./dist/packages/somelib/index.js", // CommonJS格式入口
  "module": "./dist/packages/somelib/index.esm.js", // ES模块格式入口（如果库输出了该格式）
  "types": "./dist/packages/somelib/index.d.ts", // TS类型文件路径
  "files": ["dist"] // 仅暴露dist目录，避免工具链读取源码
}

2. 修正tsconfig.base.json的paths配置 #

将原指向源码的路径改为指向库的根目录（工具链会自动读取package.json的入口配置）：

{
  "compilerOptions": {
    // ... 其他原有配置
    "paths": {
       "@lib/somelib": ["packages/somelib"]
    }
  }
}

这样TypeScript会通过库的package.json找到types字段指向的类型文件，Webpack会根据main/module字段加载编译后的JS文件，不会再读取源码。

3. 调整Webpack配置（移除冗余别名，确保路径插件生效） #

• 移除Webpack配置中手动添加的@lib/somelib别名，避免与TsconfigPathsPlugin冲突
• 确保TsconfigPathsPlugin使用根目录的tsconfig.base.json：

resolve: {
    modules: ['node_modules', path.resolve(__dirname, '../../packages')],
    plugins: [new TsconfigPathsPlugin({ configFile: '../../tsconfig.base.json' })],
    extensions: ['.tsx', '.ts', '.js', '.css', '.html']
},

4. 清理缓存并重新构建 #

NX的缓存机制可能导致旧配置残留，执行以下命令：

# 清理NX缓存
npx nx reset

# 重新构建Web Components库
npx nx build somelib

# 构建主AngularJS应用
npx nx build your-angularjs-app-name

5. 验证主应用的TS配置 #

确保主应用的tsconfig.json中不需要开启JSX相关配置（因为库已经编译完成），如果主应用的TS配置有jsx字段，可设置为"jsx": "react-jsx"或直接移除（AngularJS应用不需要JSX编译）。

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