迁移Angular到Nx时@nrwl/nx/enforce-module-boundaries规则报错解决方案
我最近在将Angular代码库迁移到Nx 12.x版本时,对@nrwl/nx/enforce-module-boundaries这条规则的报错十分困惑,希望这篇内容能帮助其他刚开始从Angular迁移到Nx的开发者。
本次迁移的是一个体积较小、目前已在生产环境使用的单代码库。使用Nx时,遵循monorepo的推荐规范是最佳实践,这样后续代码库规模增长时可以充分发挥monorepo的优势,比如本场景下需要避免当前代码库的代码过度暴露。
我将代码库存放在my-org/apps/my-small-repo路径下,执行lint操作时遇到了@nrwl/nx/enforce-module-boundaries规则报错的问题。我尝试了多种映射my-org/apps/my-small-repo下src/app路径的方案,均出现编译器、linter单独或同时报错的情况。
最终我找到了以下两种解决方案:
只需要在apps/my-small-repo/tsconfig.json的根节点添加如下配置:
"compilerOptions": { "baseUrl": "src" },
然后将apps/my-small-repo内部所有的导入路径替换为以app开头的路径即可。DashboardComponent的导入示例:
import { DashboardComponent } from 'app/components/dashboard/dashboard.component';
该方案已在Nx 13.x版本验证通过,大概率也适用于更早的Nx版本。
首先在仓库根目录tsconfig.base.json的compilerOptions下的paths中添加如下配置:
"app/*": ["apps/my-org/src/app/*"]
随后在仓库根目录的eslint配置中,为@nrwl/nx/enforce-module-boundaries规则添加"allowCircularSelfDependency": true配置。
我们选择配置"allowCircularSelfDependency": true是为了避免在应用中使用../../../../../这类冗长的相对路径,同时我们也希望所有库的命名空间都统一在tsconfig.base.json中维护。
该规则的源码可在Nx官方仓库的packages/eslint-plugin-nx/src/rules/enforce-module-boundaries.ts路径下查阅。
内容的提问来源于stack exchange,提问作者Juri Sinitson

