Angular封装VanillaJS组件时rootDir构建报错求助

问题原因 #

Angular CLI编译时强制要求所有源码文件必须落在rootDir指定的目录范围内，默认rootDir是项目的src文件夹。直接跨目录引用/lib/core的代码会超出默认范围；手动修改rootDir为../../无效，是因为Angular CLI会在编译过程中覆盖该配置，或是编译上下文限制导致不生效。

可行解决方案 #

1. 配置TypeScript路径别名（推荐） #

在Angular项目的tsconfig.json中，给/lib/core设置路径别名，让TypeScript能正确解析导入路径，同时符合Angular编译规则：

{
  "compilerOptions": {
    "baseUrl": "./src", // 保持默认值即可
    "paths": {
      "@foo/core": ["../../lib/core"] // 别名指向core目录
    },
    // 其他原有配置
  },
  "include": [
    "src/**/*",
    "../../lib/core/**/*" // 确保包含core目录的源码
  ]
}

之后在代码里用别名导入：

import { ExampleComponent as ExampleCoreComponent } from '@foo/core';

2. 将lib/core作为本地依赖引入 #

把/lib/core当作本地npm包引入，让Angular将其视为第三方依赖处理，避开rootDir限制：

1. 在Angular项目的package.json中添加本地依赖：

{
  "dependencies": {
    "@foo/core": "file:../../lib/core"
  }
}

2. 执行npm install或yarn install完成链接
3. 代码中正常导入即可，和引入第三方包完全一致：

import { ExampleComponent as ExampleCoreComponent } from '@foo/core';

注意：确保/lib/core目录下有package.json，且配置了main、types等字段，方便Angular识别模块和类型。

3. 调整Angular CLI的编译配置 #

修改Angular项目的angular.json，允许编译时包含外部目录的代码，并配置正确的TypeScript编译规则：

{
  "projects": {
    "project": {
      "architect": {
        "build": {
          "options": {
            "tsConfig": "./tsconfig.json",
            "allowedCommonJsDependencies": ["@foo/core"], // 若core是CommonJS模块需添加
            // 其他原有配置
          }
        }
      }
    }
  }
}

同时在tsconfig.json中确保include包含/lib/core的所有文件，并且通过继承根目录配置来设置正确的rootDir：

// Angular项目的tsconfig.json
{
  "extends": "../../../../tsconfig.json", // 继承根目录的tsconfig
  "compilerOptions": {
    "rootDir": "../../../../", // 指向foo目录，确保所有源码都在范围内
    // 其他Angular特定配置
  },
  "include": [
    "src/**/*",
    "../../../core/**/*"
  ]
}

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