Recreate Steps

1. Create a new Angular 13 project using ng new
2. Add ESLint to the project using ng add @angular-eslint/schematics
3. Install plugin using npm install --save-dev eslint-plugin-ngxs-style-guide
4. Add plugin to ESLint configuration file
5. Attempt to run via ng lint or npm run lint

Error Message

An unhandled exception occurred: 
  Failed to load plugin 'ngxs-style-guide' declared in '.eslintrc.json#overrides[0]': 
    Class extends value undefined is not a constructor or null

Referenced from: <project_path>\.eslintrc.json
See "<temp_dir>\ng-mlwbyZ\angular-errors.log" for further details.

Environment Information

• Node.js version: 16.13.0
• Angular CLI version: 13.0.3
• eslint version: 8.2.0
• eslint-plugin-ngxs-style-guide version: 2.0.2
• Platform: Windows 10

ESLint Configuration File

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:rxjs/recommended",
        "plugin:ngxs-style-guide/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "plugins": ["ngxs-style-guide", "rxjs"],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "rxjs/no-unsafe-takeuntil": [
          "error",
          {
            "alias": ["untilDestroyed"]
          }
        ],
        "quotes": [
          2,
          "single",
          {
            "avoidEscape": true,
            "allowTemplateLiterals": true
          }
        ],
        "indent": ["error", 4],
        "init-declarations": "off"
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}

Hi there!

Thanks for the great plugin @unlight !

We're already using it in some of our TypeScript 3.x projects. We wanted to use it in a new project with TypeScript 4.x as well, but sadly the plugin itself have a dependency to TypeScript 3.x. Could you please fix it and allow TypeScript 4.x as well?

Best,
Sven

Hi @unlight ,

could you please describe the new rule, that you've added with release 2.0 of this great plugin: ngxs-style-guide/no-pipe-dispatch? Maybe you get a source or explanation by hand, showing why it's important to avoid a pipe(...) after a dispatch(...)?

I'm asking because I thought this plugin serves as an ESLint plugin for the official best practices: https://www.ngxs.io/recipes/style-guide (even if this plugin is not authored by the NGXS creator) And I can't find a recommendation regarding the pipe-dispatch there.

Best,
Sven

Hi @unlight,

I already noticed that you have

return observable from action

on your todo list (see the README.md). I would be really happy if you could implement it. But with a slight modification. From my understanding (please compare with https://www.ngxs.io/concepts/state#defining-actions) the following return values for actions seems to be valid:

• void
• Observable<T>
• Promise<T>

So it would be really helpful to have a rule in this great plugin to have an eye on this requirement as well.

What do you think about?

Best,
Sven