Support eslint new configuration style "flat file"

[PowerKiKi]

Description and reproduction of the issue

In a brand new project, I would like to use eslint new configuration style "flat file". This does not to work when running through ng lint, as shown with reproduction step below.

I am assuming there is something in @angular-eslint/builder that should be updated to support that new config style, but I might be wrong...

ng new my-app --no-routing --style css
cd my-app/
ng add @angular-eslint/schematics

# Replace old style config with new style config
rm .eslintrc.json 
nano  eslint.config.js

# This will error
ng lint

Content of eslint.config.js, straight from the documentation:

export default [
    {
        rules: {
            semi: "error",
            "prefer-const": "error"
        }
    }
]

And the error output would be:

Linting "my-app"...
An unhandled exception occurred: No ESLint configuration found in my-app/src/app.

Moving eslint.config.js into my-app/src/app/ will not change anything at all.

Versions

package	version
@angular-eslint/builder	15.2.0
ESLint	8.32.0
node	16.19.0

Angular CLI: 15.1.1
Node: 16.19.0
Package Manager: yarn 1.22.19
OS: linux x64

Angular: 15.1.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1501.1
@angular-devkit/build-angular   15.1.1
@angular-devkit/core            15.1.1
@angular-devkit/schematics      15.1.1
@angular/cli                    15.1.1
@schematics/angular             15.1.1
rxjs                            7.8.0
typescript                      4.9.4

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

[PowerKiKi]

Seems like I forgot to mention why I want to use the new flat config style. This is because it would help a lot to configure the rule @angular-eslint/template/i18n without manually duplicating the whole list of default values.

Right now my .eslintrc.json looks like:

{
    "root": true,
    "overrides": [
        {
            "files": ["*.html"],
            "extends": ["plugin:@angular-eslint/template/recommended"],
            "rules": {
                "@angular-eslint/template/i18n": [
                    "error",
                    {
                        "checkId": false,
                        "ignoreAttributes": [
                            "formArrayName",
                            "formControlName",
                            "formGroupName",
                             // ... suuuuuper long list of default values truncated for sake of brevity

                            "my-single-custom-attribute-that-should-not-be-i18n-ed"
                        ]
                    }
                ]
            }
        }
    ]
}

But with flat config file, I would avoid the trouble of keeping the list of default value up to date, and instead use:

import {i18nDefaultConfiguration} from '@angular-eslint/eslint-plugin-template';

export default [
    {
        files: ["*.html"],
        rules: {
            "@angular-eslint/template/i18n": [
                "error",
                {
                    "checkId": false,
                    "ignoreAttributes": [
                        ...i18nDefaultConfiguration.ignoreAttributes,
                        "my-single-custom-attribute-that-should-not-be-i18n-ed"
                    ]
                }
            ]
        }
    }
]

[pumano]

+1 for that feature. Also I use this rule for marking untranslated strings but not use native angular i18n feature. Prefer to using transloco, and auto fix for this rule only for native angular i18n. Would love if somehow add settings for changing auto-fix behaviour if use with non-native angular i18n. Currently I use eslint-plugin-disable-autofix for turning off auto-fix for that rule.

[JamesHenry]

v16 is now the latest release and eslint.config.js will be respected if it is already present. Note, we will not be generating or managing Flat Config files until they become the default way of configuring ESLint later in the year, so you will be on your own in terms of migrations etc

[ChrisMBarr]

I am using Angular 16 and am trying to upgrade to use the new ESLint flat config files. I have a monorepo where each project extends a base config file, and the non-Angular projects are working just fine.

In my Angular project I have this at /eslint.config.js

import tseslint from "typescript-eslint";
import baseAngularConfig from "../shared/ide-configs/eslint-angular.config.mjs";

export default tseslint.config(
  ...baseAngularConfig,
  {
    files: ["**/*.ts"],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.app.json", "./tsconfig.spec.json"],
      },
    },
  },
  {
    files: ["**/*.html"],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.app.json", "./tsconfig.spec.json"],
      },
    },
  },
);

when I run ng lint I get:

An unhandled exception occurred: No ESLint configuration found in C:\<project-path>\src\app

When I move the config file to the /src/app/ path, I get the same error.

If I open the angular.json and add "eslintConfig": "eslint.config.js" under project > [project-name] > architect > lint > options I now get this error

An unhandled exception occurred: Cannot read config file: C:\<project-path>\eslint.config.js
Error: Cannot use import statement outside a module
See "C:\Users\<username>\AppData\Local\Temp\ng-6uySEA\angular-errors.log" for further details.

Ok, so now it can see the file but I have to mark my project as a module, so I add "type": "module" to my package.json, and now I get this error

An unhandled exception occurred: Cannot read config file: C:\<project-path>\eslint.config.js
Error: require() of ES Module C:\<project-path>\eslint.config.js from C:\<project-path>\node_modules\@eslint\eslintrc\dist\eslintrc.cjs not supported.       
Instead change the require of eslint.config.js in C:\<project-path>\node_modules\@eslint\eslintrc\dist\eslintrc.cjs to a dynamic import() which is available in all CommonJS modules. 

ok, so let's change this to a *.mjs file instead... now apparently it has an error because it's trying to parse this as YAML for some reason!

[error] YAMLException: Cannot read config file: C:\<project-path>\eslint.config.mjs
Error: end of the stream or a document separator is expected (8:10)

 5 | export default tseslint.config(
 6 |   ...baseAngularConfig,
 7 |   {
 8 |     files: ["**/*.ts"],
--------------^
 9 |     languageOptions: {
 10 |       parserOptions: {

I just can't win here. Is this a limitation of Angular v16 that v17 has fixed?

[Lightiiy]

ok, so let's change this to a *.mjs file instead... now apparently it has an error because it's trying to parse this as YAML for some reason!

[error] YAMLException: Cannot read config file: C:\<project-path>\eslint.config.mjs
Error: end of the stream or a document separator is expected (8:10)

 5 | export default tseslint.config(
 6 |   ...baseAngularConfig,
 7 |   {
 8 |     files: ["**/*.ts"],
--------------^
 9 |     languageOptions: {
 10 |       parserOptions: {

I just can't win here. Is this a limitation of Angular v16 that v17 has fixed?

I'm running into the exact same issue. Troubling, as it seems that from eslint version 9 they encourage using the new flat config format.

[ilyakonrad]

Same here. The automatic eslint migration created an .mjs config file, I would expect ng lint to understand it.

[earshinov]

Just ran ng g @angular-eslint/schematics:add-eslint-to-project and got an old-style .eslintrc.json

#1280 (comment):

Note, we will not be generating or managing Flat Config files until they become the default way of configuring ESLint later in the year, so you will be on your own in terms of migrations etc

Has the end of year 2023 been postponed? Or is there something I am missing?

• Is there a schematic to generate flat config (for a project not having lint configuration)?
• Is there a schematic to convert old-style config into a flat config?

[beginor]

@earshinov

I have managed upgrade one of my angular project to eslint 9.0's new config format, please reffer beginor/net-core-app-client, but I think there is no any convert tools yet.