wraping fromNetwork in existing service function

[sysmat]

trafficstars

I'm using angular http and can't get it to work in my component.

• service existing code:

search(criteria: string): Observable<OrgSearch[]> {
    return this.http
              .get<OrgSearch[]>(`api/info/search?q=${criteria}`, this.auth.getHttpAuthOpt())
              .pipe(catchError((error: Response) => observableThrowError(error)));
  }

• component existing code:

this.infoService
        .search(this.orgSearchCondition)
        .pipe(
          takeUntil(this.onDestroyComponent$),
          stopSpiner<OrgSearch[]>(() => this.isLoading = false),
          showError<OrgSearch[]>(() => {
            this.uiService.showErrorFlashMessage('prišlo je do napake pri iskanju članic!');
            return EMPTY;
          })
        )
        .subscribe(result => this.onSearchOk(result, this.orgSearchCondition));

• but when I wrap it, it's never triggered

search(criteria: string): Observable<OrgSearch[]> {
    return fromNetwork()
      .pipe(
        first(),
        switchMap(net => {
          console.log(`net=${net}`);
          return this.http
            .get<OrgSearch[]>(`api/info/search?q=${criteria}`, this.auth.getHttpAuthOpt())
            .pipe(catchError((error: Response) => observableThrowError(error)));
        })
      );
  }

• I'm doing something wrong?
• The idea of lib is great

Regards

[niklas-wortmann]

Hi thanks for your kind words. So I checked the code again, I could imagine, that your browser is maybe not supporting the network API, but then it should emit an error. Can you reproduce the behavior in a stackblitz and share the code with me, then I can have a more in-depth look into this. Sorry for the hassle

[sysmat]

Even if try directly subscribe, nothing happened, not even an error

<button (click)="rxjsWeb()">
    rxjsWeb
</button>

public rxjsWeb() {
    console.log('rxjsWeb');
    fromNetwork()
      .pipe(
        first(),
        map(net => { console.log(`net=${net}`); return true; })
      )
      .subscribe(
        result => console.log(`net=${result}`),
        err => console.error(`err=${err}`)
      );
  }

• In Edge(LTS) & Chrome(LTS) in web development console nothing
• In Firefox(LTS) in web development console I got err=Error: Network API is not fully supported
• When I'll have time, I'll provide a case in stackblitz Regards

[sysmat]

If I try by native API it works in any browser

const conn = (navigator as any).connection;
    if (conn) {
      const connectionlist = ['slow-2g', '2g', '3g', '4g'];
      const effectiveType = conn.effectiveType;
      console.log(effectiveType);
    }

[niklas-wortmann]

This is weird. Thanks a lot for the information, but I feat that I am not able to investigate in that without a reproduction. I would really appreciate if you could provide some kind of reproduction.

[sysmat]

Here is demo

• https://stackblitz.com/edit/angular-rxjs-web?file=src/app/hello.component.ts
• https://angular-rxjs-web.stackblitz.io

[niklas-wortmann]

thanks a lot, I will have a look and come back to you!