Angular 6, subscribe to activateRoute.queryParamMap, WebStorm gives "Promise returned from subscribe is ignored" warning

Question

I have the following code in Angular 6:

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";

...

export class someComponent implements OnInit {

  life: string;

  constructor(
    private route: ActivatedRoute
  ) {}

  ngOnInit(): void {

    this.route.queryParamMap.subscribe(urlParams => this.life = urlParams.get('foo'));
  }

  ...

}

I have instantiated route from ActivatedRoute, and my goal is to assign the query parameters foo from the url to one of my variables called life . However, I am receiving the following warnings(Green curly lines, so I am not sure if they are warnings or errors or something else) on WebStorm:

1. when I hover my mouse to subscribe I get Promise returned from subscribe is ignored ,
2. When I hover my mouse to urlParams I get Argument type (urlParams: any) => void is not assignable to parameter type PushSubscriptionOptionsInit | undefined Argument type (urlParams: any) => void is not assignable to parameter type PushSubscriptionOptionsInit | undefined

Answer 1

In Angular (currently on Angular-6) .subscribe() is a method on the Observable type. The Observable type is a utility that asynchronously or synchronously streams data to a variety of components or services that have subscribed to the observable.

this._route.paramMap.pipe(
  switchMap((params: ParamMap) => {
      this.FID = params.get('id');
      return this._serviceXXX();
    }
  )
).subscribe(data => {
  // then code
});

Answer 2

安装所有模块（npm i）并刷新WebStorm索引（在node_modules上同步命令）后，我遇到了同样的问题。

Answer 3

IntelliJ Ultimate complains about this pattern for me as well.

I think it's an issue with the indexes/types the IDE builds/uses. For some reason it appears to confuse the subscribe method as being from the PushManager interface accessible via the ServiceWorkerRegistration pushManager property.

Two things that work for me:

1. Close your IDE, delete your node_modules, reinstall your packages and open the IDE back up so it will re-index your code and maybe stop complaining

2. Move your anonymous function out of the subscribe call and into a tap operator. See below for that example.

 this.route.queryParamMap .pipe( tap((urlParams: Array<string>): Array<string> => { this.life = urlParams.get('foo'); return urlParams; }), ) .subscribe();

Answer 4

Had the same issue in Webstorm with angular 12.

Removal of node_modules and restart of Webstorm didn't help me.

Instead, try to add node_modules in Libraries for JS:

1. Webstorm Preferences -> Languages & Frameworks -> JavaScript -> Libraries.
2. Click Add... button
3. Fill in the showed form
4. Wait for IDEA to index the dependencies