eslint 规则 @nrwl/nx/enforce-module-boundaries 失败

Question

介绍

当我最近将 Ng 代码库移植到 Nx 12.x 时，我对这条规则感到非常困惑。我希望这篇文章可以帮助其他开始从 Ng 迁移到 Nx 的人。

上面的代码库是一个相当小的单个存储库，现在已在生产中使用。使用 Nx 时，最好遵循 monorepo 的建议，以便将来随着代码库的增长能够使用 monorepo 的优势。（例如，这里我避免过度暴露当前存储库中的代码）。

我将上面的代码库放入my-org/apps/my-small-repo. 通过 linting，我对规则的失败感到困惑@nrwl/nx/enforce-module-boundaries。因此，我尝试了不同的可能性来映射编译器或 linter 或两者都失败的地方src/app。my-org/apps/my-small-repo

我想出了以下解决方案。

解决方案1

就放

  "compilerOptions": {
    "baseUrl": "src"
  },

进入 的根目录apps/my-small-repo/tsconfig.json，并将 中的所有导入替换apps/my-small-repo为以 开头的导入app。

示例DashboardComponent：

import { DashboardComponent } from 'app/components/dashboard/dashboard.component';

可能是更好的解决方案

该解决方案在 nx 13.x 上进行了测试，但它可能也适用于以前版本的 nx。

放

import { DashboardComponent } from 'app/components/dashboard/dashboard.component';

到您的存储库根paths目录中。然后将规则放入存储库根目录中。compilerOptionstsconfig.base.json"allowCircularSelfDependency": true,@nrwl/nx/enforce-module-boundaries

我们决定"allowCircularSelfDependency": true,避免使用丑陋的相对路径，例如../../../../../应用程序中的这个路径。我们还希望仅包含库名称空间tsconfig.base.json。

规则的文档

https://github.com/nrwl/nx/blob/master/packages/eslint-plugin-nx/src/rules/enforce-module-boundaries.ts

Answer 1

对于那些在这个问题没有得到解决的情况下来到这里的人。（nx monorepo 用法）

解决 2 个错误（TS 错误和 lint 错误）：

首先是别名错误： Cannot find module '@account/components/something' or its corresponding type declarations.

1. 在您的基础 tsconfig.base.json（不是您的应用程序下的 tsconfig.json，因为它被覆盖）上，添加：

 "compilerOptions":{
       ...
       baseUrl:"." // Try "src" as well incase of boiler plates or if your resolved path (on the error) is missing an src.
       path: {
       "@account/*": ["app/*"],
       "@account/components/*": ["app/components/*"] 
     }
   },

以上将解决：

import { authMiddleware } from '@account/components/something';

从

import { authMiddleware } from '../../../components/something';

对于 lint 错误： 项目应使用相对导入从同一项目中的其他文件导入 - eslint 规则 @nrwl/nx/enforce-module-boundaries 失败`

1. 添加“allowCircularSelfDependency”：true。

        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "allowCircularSelfDependency": true, -> This may solve the lint error.
            "allow": ["@account/**"], -> // White list the lint error.
             ...
          }

2. 将文件夹列入白名单：添加“allow”：[@foldername]

        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            
            "allow": ["@account/**"], -> // White list the lint error.
             ...
           }

那应该解决它。

Answer 2

要使其正常工作：

1. 在您的基地tsconfig.base.json或当地tsconfig.json。我建议在tsconfig.base.json

考虑你的道路apps/my-org/src/app/*

    "compilerOptions":{
       ...
       baseUrl:"src"
       path: {
       "@app/*": ["app/*"] // << Here is the change
       }
   },

2. 从这里导入您的代码文件apps/my-org/src/app/* 到这里@app/*