new nx 20 workspace with typescript-eslint 8 is broken out of the box

[pumano]

Current Behavior

when create fresh nx 20 workspace with typescript-eslint 8 - it not working

error:

Linting "ui-kit"...

 NX   Cannot read properties of undefined (reading 'at')

Occurred while linting /Users/iam/oss/nx20/libs/ui-kit/src/index.html:2
Rule: "@typescript-eslint/ban-ts-comment"
Pass --verbose to see the stacktrace.

Expected Behavior

should works properly

GitHub Repo

No response

Steps to Reproduce

1. npx create-nx-workspace nx20
2. set angular app integrated
3. create lib folder into workspace
4. generate angular buildable library for example "ui-kit" (created with blank component inside lib)
5. nx lint ui-kit

Nx Report

Node : 20.17.0
OS : darwin-arm64
Native Target : aarch64-macos
npm : 10.8.2

nx : 20.0.0
@nx/js : 20.0.0
@nx/jest : 20.0.0
@nx/eslint : 20.0.0
@nx/workspace : 20.0.0
@nx/angular : 20.0.0
@nx/devkit : 20.0.0
@nx/eslint-plugin : 20.0.0
@nx/playwright : 20.0.0
@nx/vite : 20.0.0
@nx/web : 20.0.0
@nx/webpack : 20.0.0
typescript : 5.5.4

Registered Plugins:
@nx/playwright/plugin
@nx/eslint/plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[luchian94]

Same issue, looks like it's caused by ...nx.configs['flat/angular-template'], inside eslint.config

[paulstelzer]

This seems to be only an issue with typescirpt-eslint 8.8.1, with typescript-eslint 8.8.0 everything is working fine.

[nhhockeyplayer]

alot of stuff is broken
hoping for patch soon
be nice of QA was a more focus

[nhhockeyplayer]

why is @nx/angular-template
documented at https://nx.dev/nx-api/eslint-plugin

Angular
Contains configurations matching best practices when using Angular framework:

@nx/angular
@nx/angular-template

@nx/angular-template doesnt even exist... ???

npm view @nx/angular-template
npm error code E404
npm error 404 Not Found - GET https://registry.npmjs.org/@nx%2fangular-template - Not found
npm error 404
npm error 404  '@nx/angular-template@*' is not in this registry.
npm error 404
npm error 404 Note that you can also install from a
npm error 404 tarball, folder, http url, or git url.

react is javascript. javascript is unfit for commercial development. ever since these elite frameworks... angular, ngrx, nx have accommodated react its been disaster for these elite frameworks. why cant react go take a hike it doesn't even come close to what angular does at an elegant level.

[pumano]

@nhhockeyplayer

@nx/angular
@nx/angular-template

means plugins for eslint under namespace @nx

not a packages

[wizardnet972]

Here is a simple script that should be executed on each release to ensure everything is functioning correctly:

#!/bin/bash

# Remove any existing nx-repo directory
rm -rf nx-repo

# Create a new Nx workspace with the specified configuration
npx --yes create-nx-workspace@latest nx-repo \
  --pm=yarn \
  --preset=angular-monorepo \
  --appName=nx-ui \
  --style=scss \
  --bundler=esbuild \
  --ssr=false \
  --e2eTestRunner=playwright \
  --nxCloud=skip 

# Navigate to the newly created nx-repo directory
cd nx-repo

# Run build, lint, and test tasks for all projects
yarn nx run-many -t build,lint,test --all

# Generate a new Angular library in the libs/ng-lib directory
yarn nx g @nx/angular:lib ng-lib --buildable --directory libs/ng-lib

# Run build, lint, and test tasks for all projects
yarn nx run-many -t build,lint,test --all

This script ensures that a clean Nx workspace with Angular is set up, runs key project tasks, and generates a new library.

[luchian94]

This seems to be only an issue with typescirpt-eslint 8.8.1, with typescript-eslint 8.8.0 everything is working fine.

can confirm. for now I solved this issue by overriding it's version in package.json like so:

"pnpm": {
    "overrides": {
      "typescript-eslint": "8.8.0"
    }
  }