Migrating ESLint 9 Older Config to new Flat Config using @angular-eslint/template-parser as template parser not working?

If you’re reading this, chances are you’re frustrated with the migration process from the older ESLint configuration to the new flat config, and the @angular-eslint/template-parser is not working as expected. Fear not, dear developer, for we’ve got you covered!

What’s changed in ESLint 9?

With the release of ESLint 9, the configuration format has undergone a significant overhaul. The new flat config is designed to be more intuitive and easier to maintain. However, this change has caused some growing pains, especially for those using the @angular-eslint/template-parser.

The Problem: @angular-eslint/template-parser not working

The @angular-eslint/template-parser is a popular choice for parsing Angular templates. However, when migrating to the new flat config, you might encounter issues with the parser not working as expected. This is often due to the changes in the configuration format and the way plugins are loaded.

Step-by-Step Migration Guide

Fear not, dear developer! We’ll guide you through the migration process step-by-step. By the end of this article, you’ll be enjoying the simplicity and elegance of the new flat config, and the @angular-eslint/template-parser will be working like a charm.

Step 1: Update your ESLint Config

The first step is to update your ESLint configuration to the new flat config. Create a new file called `.eslintrc.json` (or update the existing one) with the following content:

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@angular-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": {
    "@angular-eslint": {
      "template-parser": "angular-eslint-template-parser"
    }
  },
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"]
  }
}

Note the changes:

• The `root` property is set to `true` to enable the new flat config.
• The `extends` property is updated to include the `plugin:@angular-eslint/recommended` preset.
• The `parser` property is set to `@typescript-eslint/parser` to enable TypeScript support.
• The `parserOptions` property is updated to point to your `tsconfig.json` file.
• The `plugins` property is updated to include the `@angular-eslint` plugin with the `template-parser` set to `angular-eslint-template-parser`.

Step 2: Update your dependencies

Make sure you’ve installed the required dependencies, including `@angular-eslint` and `@typescript-eslint`:

npm install --save-dev @angular-eslint @typescript-eslint

Step 3: Configure the @angular-eslint/template-parser

Update your `angular.json` file to include the `@angular-eslint/template-parser` configuration:

{
  "projects": {
    "your-project": {
      ...
      "lint": {
        "builder": "@angular-eslint/builder:lint",
        "options": {
          "tsConfig": "./tsconfig.json",
          "templateParser": "angular-eslint-template-parser"
        }
      }
    }
  }
}

Note the changes:

• The `lint` configuration is updated to include the `@angular-eslint/builder:lint` builder.
• The `options` property is updated to include the `tsConfig` and `templateParser` configurations.

Troubleshooting Common Issues

During the migration process, you might encounter some common issues. Fear not, dear developer, for we’ve got solutions for you!

Issue 1: ESLint not recognizing the @angular-eslint/template-parser

If ESLint is not recognizing the @angular-eslint/template-parser, ensure that you’ve installed the required dependencies and updated your `eslintrc.json` file correctly. Check that the `plugins` property is correctly configured.

Issue 2: TypeScript errors when running ESLint

If you’re encountering TypeScript errors when running ESLint, ensure that your `tsconfig.json` file is correctly configured and that the `parserOptions` property in your `eslintrc.json` file is pointing to the correct `tsconfig.json` file.

Issue 3: Angular template parsing errors

If you’re encountering Angular template parsing errors, ensure that the `template-parser` property is correctly configured in your `angular.json` file. Check that the `templateParser` property is set to `angular-eslint-template-parser`.

Conclusion

Migrating your ESLint configuration to the new flat config can be a daunting task, especially when using the @angular-eslint/template-parser. However, by following these step-by-step instructions, you’ll be able to overcome the common issues and enjoy the benefits of the new configuration format.

Remember to:

• Update your ESLint configuration to the new flat config.
• Install the required dependencies, including `@angular-eslint` and `@typescript-eslint`.
• Configure the @angular-eslint/template-parser correctly in your `angular.json` file.

With these changes, you’ll be enjoying the simplicity and elegance of the new flat config, and the @angular-eslint/template-parser will be working like a charm. Happy coding!

ESLint Version	Config Format	Template Parser
ESLint 8 and below	Older config format	@angular-eslint/template-parser (works fine)
ESLint 9 and above	New flat config format	@angular-eslint/template-parser (may not work without proper configuration)

Note: The above table highlights the changes in ESLint versions and the corresponding config formats. The @angular-eslint/template-parser may not work as expected in ESLint 9 and above without proper configuration.

Frequently Asked Question

Are you struggling to migrate your ESLint older config to the new flat config using @angular-eslint/template-parser as the template parser? Don’t worry, we’ve got you covered! Here are some frequently asked questions to help you troubleshoot the issues.