As you can see this PR was a huge amount of work to add support for ESLint v9 and Flat Config while still maintaining backwards compatibility with ESLint v8 and eslintrc configs. This was done in my personal time at the expense of other things. If you are able to and feel like buying me a coffee or two to support my work, you can find my link here:

https://buymeacoffee.com/jameshenry

Thank you 🙏

As usual, we align our major release with the Angular framework/Angular CLI.

Main highlights/TODO list before merge, which will also be called out in the release notes as part of the stable release:

• update to Angular v18, drop Angular v17
• deprecate no-host-metadata-property rule and remove from recommended config of @angular-eslint/eslint-plugin
• update links from angular.io to angular.dev
• drop support for ESLint v7
• add support for ESLint v9 (maintaining support for the final version of ESLint v8 - 8.57.0).
• migrate test related utils out of @angular-eslint/utils into new @angular-eslint/test-utils package
• generate new configs as the new default flat config with ESLint v9 and typescript-eslint v8 prereleases
• add the new angular-eslint core package for use in ESLint v9 workspaces
• Update documentation

Updating existing Angular CLI workspaces to v18

After you have updated your Angular CLI version, simply run:

ng update @angular-eslint/schematics@rc-v18

NOTE: There will not be any migration of your setup to ESLint v9 or flat configs for existing workspaces in v18.

The ESLint team are working on automigrate tooling which we will leverage in an opt-in conversion generator once it is ready in a v18 minor release and consider full automigration in v19 in six months (aligned with Angular major release schedule as always).

If you want to manually migrate your workspace to use ESLint v9, typescript-eslint v8, and flat config you are welcome to and it should be fully support in v18 (which is how the next section is possible).

If you are going to attempt this, I strongly recommended creating a fresh Angular v18 workspace and adding angular-eslint to it per the instructions below and then copying the dependencies and configs that it applies into your existing workspace

Here is an example of what the new flat config with angular-eslint v18, typescript-eslint v8, and ESLint v9 looks like:

Adding to New Angular Workspaces in v18

There is a decision to be made when adding to new Angular v18 workspaces.

Just as before, if you want to add angular-eslint to a workspace with no existing lint setup, you leverage ng add with the @angular-eslint/schematics package.

The difference is in v18, you have the option of using either:

• the latest version of ESLint v9, with the latest default so called "flat config" (eslint.config.js) alongside the latest prerelease of typescript-eslint v8 (https://typescript-eslint.io/blog/announcing-typescript-eslint-v8-beta)
  OR
• the final stable version of ESLint v8, with the legacy so called "eslintrc" config (.eslintrc.json) and the latest stable version of typescript-eslint v7

The ESLint v9 option is the default scenario if you simply run ng add with no other changes. If you want to signal to angular-eslint that you instead want to go with the ESLint v8 option, simply add an eslint v8 (the exact version does not matter, it just needs to be less than 9) devDependency in your package.json before running the ng add. That's it - you don't even need to install the eslint package, it just needs to be listed there.

E.g.

Here are example "after" root package.json files from the two scenarios:

1. No eslint devDependency specified before running ng add, use the default ESLint v9 setup. This will use the new angular-eslint and typescript-eslint core packages, so you will see much fewer individual devDependencies added:

2. eslint v8 devDependency is specified before running ng-add. Use ESlint 8.57.0 and the traditional @typescript-eslint/ and @angular-eslint/ packages.