angular-eslint-injection-context

ESLint rules for Angular injection context.

Checks that inject() and similar functions (takeUntilDestroyed(), toSignal(), resource(), form()...) are called in an injection context, to avoid the NG0203 runtime error.

A blog post on Dev.to explains the context and the purpose of this tool in more details.

Requirements

• TypeScript ESLint v8
• New flat ESLint configuration (eslint.config.js or equivalent)

Getting started

1. Installation

npm install angular-eslint-injection-context --save-dev

2. ESLint flat configuration (eslint.config.js or equivalent)

const eslint = require("@eslint/js");
const { defineConfig } = require("eslint/config");
const tsEslint = require("typescript-eslint");
const angularEslintInjectionContext = require("angular-eslint-injection-context"); // ⬅️ add this

module.exports = defineConfig({
  files: ["**/*.ts"],
  languageOptions: {
    parserOptions: {
      projectService: true,
    },
  },
  extends: [
    eslint.configs.recommended,
    tsEslint.configs.strictTypeChecked,
    tsEslint.configs.stylisticTypeChecked,
    angularEslintInjectionContext.configs.recommended, // ⬅️ add this
  ],
  rules: {},
});

3. npm run lint

Rules

Rule & documentation	in recommended
inject-in-injection-context	✅
inject-async-in-injection-context	✅
effect-in-injection-context	✅
after-every-render-in-injection-context	✅
after-next-render-in-injection-context	✅
after-render-effect-in-injection-context	✅
signal-form-in-injection-context	✅
resource-in-injection-context	✅
rx-resource-in-injection-context	✅
take-until-destroyed-in-injection-context	✅
to-observable-in-injection-context	✅
to-signal-in-injection-context	✅
pending-until-event-in-injection-context	✅
custom-function-in-injection-context	❌

FAQ

Why not in Angular ESLint?

I proposed a Pull Request, but it has been ignored for months now. So I decided to publish the rule by myself, and to add many more.

Is Angular ESLint required?

No. When extracting the initial rule in its own repository, I took the opportunity to only depend on TypeScript ESLint.

Is typed linting required?

Typed linting is not required for now, but it could change in the future as some cases may require it.

What difference with @angular-eslint/no-implicit-take-until-destroyed?

The Angular ESLint rule for takeUntilDestroyed() was the inspiration for all the rules in this package. The angular-eslint-injection-context/take-until-destroyed-in-injection-context version here is more accurate because it checks a lot more cases.

But they serve the same purpose, so it is not recommended to enable both of them at the same time. It is not enabled by default in Angular ESLint recommended preset; it is enabled by default in the recommended preset here.

Can I check a custom function?

Yes, with the custom-function-in-injection-context rule.

Why not one rule for all functions?

First, to be able to disable specific rules if a project does not use some functions.

Second, because while similar, there are some differences in the functions signatures and in special contexts where a function makes sense or not.

Yes, with the custom-function-in-injection-context rule.

Is adding a plugin making the project heavier?

No, the package has 0 dependency. It just add lint rules using TypeScript ESLint, which is already installed in the project.

Where are the tests?

The tests are already done and passing in the Angular ESLint Pull Request. I may migrate them here later, but it takes time.

License

MIT