Angular CLI 16.2.0中@foo/模块名导入失败问题求助

按以下步骤逐一排查配置：

1. 配置foo库的package.json #

打开projects/foo/package.json，确保以下字段正确：

• name 设置为@foo（作为你要使用的根命名空间）
• 添加exports字段，映射子模块路径到对应文件：

  "exports": {
    "./foofoo": "./src/lib/foofoo/public-api.ts"
  }
  

  若foofoo模块没有单独的public-api.ts，可直接指向模块文件："./src/lib/foofoo/foofoo.module.ts"

2. 暴露foofoo模块到库的公共API #

如果foofoo模块没有单独的public-api.ts，在projects/foo/src/public-api.ts中添加导出：

export * from './lib/foofoo/foofoo.module';

若有单独的projects/foo/src/lib/foofoo/public-api.ts，确保里面导出目标模块：

export { FoofooModule } from './foofoo.module';

3. 配置工作区根tsconfig.json的paths #

打开根目录tsconfig.json，在compilerOptions.paths中添加路径映射：

"paths": {
  "@foo/*": ["projects/foo/src/lib/*"]
}

确认foo-app的tsconfig.app.json继承了根配置（默认extends": "../tsconfig.json"无需修改），且未覆盖paths字段。

4. 构建foo库（关键步骤） #

Angular库必须构建后才能被应用正确解析导入路径，执行构建命令：

ng build foo

开发阶段可使用watch模式实时更新产物：

ng build foo --watch

5. 在foo-app中导入测试 #

现在可以在foo-app的组件或模块中正常导入：

import { FoofooModule } from '@foo/foofoo';

将FoofooModule添加到NgModule的imports数组即可使用。

额外排查点 #

• 检查foo库的tsconfig.lib.json，确保rootDir为./src、outDir为../../dist/foo（默认配置无需修改）
• 重启VS Code等编辑器，确保TS配置更新生效
• 核对模块名、路径的拼写和大小写是否完全一致

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