Angular & Eslint - no-floating-promises error with this.router.navigate(['/'])

Question

I've got the following eslint error:

Promises must be handled appropriately or explicitly marked as ignored with the void operator.eslint@typescript-eslint/no-floating-promises

with this code:

this.router.navigate(['/']);

the router is imported like this: import { Router } from '@angular/router'; and assigned in the constructor of the class.

My eslint config:

module.exports = {
  extends: [
    "plugin:@angular-eslint/recommended",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    // "plugin:@angular-eslint/template/process-inline-templates",
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.eslint.json',
    sourceType: 'module',
    ecmaVersion: 2020,
  },
  plugins: ['@typescript-eslint', '@angular-eslint', 'prettier'],
  rules: {
    "prettier/prettier": [
      "error",
      {
        "printWidth": 140,
        "singleQuote": true,
        "useTabs": false,
        "tabWidth": 2,
        "semi": true,
        "bracketSpacing": true,
        "endOfLine": "lf"
      },
    ],
  },
};

Is my config wrong oder what's the problem? I feel like router.navigate shouldn't be an eslint error in an angular project.

Answer 1

The rule #no-floating-promises says:

This rule forbids usage of Promise-like values in statements without handling their errors appropriately

So here you are not handling this.router.navigate appropriately because it returns a Promise.

You can either:

1. Wait for it to return

   await this.router.navigate(['/']);
   

2. Explicitly mark it as intentionally not awaited

   void this.router.navigate(['/']);
   

3. Disable the rule for this specific line

   // eslint-disable-next-line @typescript-eslint/no-floating-promises
   this.router.navigate(['/']);