Error in Angular-ESLint Integration: Unique Name Issue in Monorepo Project

[JanHeinemeyer88]

We have a monorepo in our project setup, similar to the others, where Nx is not utilized. However, due to the integration of Angular-eslint, Nx has become a required dependency. Since our recent upgrade to Angular 17, we are encountering an error in one specific project within the monorepo, indicating that the name must be unique. This error arises because, for unknown reasons, the dist folder is being considered, leading to the duplicate identification within the dist directory.

Additionally, we are seeking clarification on why Nx is being shipped with the package. This situation is somewhat inconvenient as it results in the inclusion of numerous dependencies in our project that we do not utilize.

The above-mentioned project is set up similarly to others in our monorepo, yet it is the only one leading to this error. Renaming the project resolves the error, but this is not a feasible solution.

The error message when we try to lint any project:

An unhandled exception occurred: The following projects are defined in multiple locations:
- project-name: 
  - projects/project-name/dist
  - projects/project-name

To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
See "/some/path/angular-errors.log" for further details.

Versions

package	version
@angular-eslint/builder	17.3.0
ESLint	8.57.0
node	18.19.0

Angular CLI: 17.3.0
Node: 18.14.0
Package Manager: npm 9.3.1
OS: darwin arm64

Angular: 17.3.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1703.0
@angular-devkit/build-angular      17.3.0
@angular-devkit/core               17.3.0
@angular-devkit/schematics         17.3.0
@angular-devkit/schematics-cli     17.3.0
@angular/cdk                       16.2.3
@angular/cdk-experimental          16.2.3
@angular/material                  16.2.3
@angular/material-experimental     16.2.3
@angular/material-moment-adapter   16.2.3
@schematics/angular                17.3.0
ng-packagr                         17.3.0
rxjs                               7.8.1
typescript                         5.3.3
zone.js                            0.14.4

• I have updated to the latest supported version of the packages and checked my ng version output per the instructions given here.

[abaran30]

@JanHeinemeyer88 could you share any more info about your monorepo setup?

• You mentioned you're not using Nx, are you using any other monorepo tooling?
• What does the angular.json (or project.json, depending) for the problematic project look like?
• Was angular-eslint added like documented here?

A repo that reproduces this issue would be very helpful, if possible.

[json-derulo]

I agree that a minimal reproduction would help a lot to get this issue fixed. To answer your other question on why Angular ESLint has a dependency to Nx, actually it's just the @angular-eslint/schematics and @angular-eslint/builder packages. There, @nx/devkit utils are used for easier and more robust implementations for working with Angular config files. However it may be possible to remove the nx dependency, this would remove some dependencies.

[JamesHenry]

@JanHeinemeyer88 I'm happy to help here if you can share a bit more about the structure of the project.

Are package manager workspaces being used? If so which package manager and what is the config?

I am guessing there is a nested package.json in projects/project-name/dist?

[JanHeinemeyer88]

We don't use any specific monorepo tooling. We use npm workspaces alongside the angular cli.

We have one angular.json in the workspace, in which we defined a newProjectRoot and then defined some projects.
angular.json:

{
 …
 "newProjectRoot": "projects",
 "projects": {
   "main-app": {
     "root": "",
     "sourceRoot": "src",
     "projectType": "application",
     "prefix": "app",
     "architect": {
       "build": {
         "builder": "@angular-devkit/build-angular:browser",
         "options": {
           "outputPath": "dist",
           "deleteOutputPath": true,
           "index": "src/index.html",
           "main": "src/main.ts",
           "polyfills": "src/polyfills.ts",
           "tsConfig": "tsconfig.app.json",
           "vendorChunk": true,
           "buildOptimizer": false,
           "sourceMap": true,
           "optimization": false,
           "namedChunks": true
         },
         …
       },
       "serve": {
         "builder": "@angular-devkit/build-angular:dev-server",
         …
       },
       …
       "lint": {
         "builder": "@angular-eslint/builder:lint",
         "options": {
           "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"],
           "eslintConfig": ".eslintrc.json"
         }
       }
     }
   },
      "project01": {
     "projectType": "library",
     "root": "projects/project01",
     "sourceRoot": "projects/project01/src",
     "prefix": "p01",
     "schematics": {
       "@schematics/angular:component": {
         "style": "scss",
         "changeDetection": "OnPush"
       }
     },
     "architect": {
       "build": {
         "builder": "@angular-devkit/build-angular:ng-packagr",
         "configurations": {
           "production": {
             "tsConfig": "projects/project01/tsconfig.lib.prod.json",
             "project": "projects/project01/ng-package.json"
           },
           "development": {
             "tsConfig": "projects/project01/tsconfig.lib.prod.json",
             "project": "projects/project01/ng-package-dev.json"
           }
         },
         "defaultConfiguration": "production"
       },
       "test": {
         "builder": "@angular-devkit/build-angular:karma",
         "options": {
           "main": "projects/project01/src/test.ts",
           "tsConfig": "projects/project01/tsconfig.spec.json",
           "karmaConfig": "projects/project01/karma.conf.js"
         }
       },
       "lint": {
         "builder": "@angular-eslint/builder:lint",
         "options": {
           "lintFilePatterns": ["projects/project01/src/**/*.ts", "projects/project01/src/**/*.html"],
           "eslintConfig": "projects/project01/.eslintrc.json"
         }
       }
     }
   },
   "problematic-project": {
     "projectType": "library",
     "root": "projects/problematic-project",
     "sourceRoot": "projects/problematic-project/src",
     "prefix": "p02",
     "architect": {
       "build": {
         "builder": "@angular-devkit/build-angular:ng-packagr",
         "options": {
           "project": "projects/problematic-project/ng-package.json"
         },
         "configurations": {
           "production": {
             "tsConfig": "projects/problematic-project/tsconfig.lib.prod.json"
           },
           "development": {
             "tsConfig": "projects/problematic-project/tsconfig.lib.json"
           }
         },
       },
     }
   },
 "schematics": {
   "@angular-eslint/schematics:application": {
     "setParserOptionsProject": true
   },
   "@angular-eslint/schematics:library": {
     "setParserOptionsProject": true
   }
 }
}

package.json of project that has the problem:

{
 "name": "problematic-project",
 "version": "0.0.1",
 "scripts": {
   "build": "ng build problematic-project",
   "watch": "npm run build -- --watch --configuration development & npm run build:sass -- --watch",
   "postbuild": "npm run build:sass && npm run build:schematics",
   "build:schematics": "tsc -p tsconfig.schematics.json",
   "build:sass": "sass --load-path=../../node_modules --style=compressed --no-source-map src/lib/styles/problematic-project.scss:dist/styles/problematic-project.css"
 },
 "schematics": "./schematics/collection.json"
}

Also, we store the build output (from ng-packagr) of the libraries directly in the respective project folder (e.g., project/project-name/dist) and reference it in the package.json off the app.

App package.json:

{
  ...
  "workspaces": [
    "projects/problematic-project/dist",
  ],
...
}