title: Argument of type 'MonoTypeOperatorFunction<T>' is not assignable to parameter of type 'OperatorFunction<T | undefined, T>'
body: <p>I am trying to make Generic Firestore Service.
  Here is my script,</p>
  <pre><code>doc$(id: string): Observable&lt;T&gt; {
  return this.firestore.doc&lt;T&gt;(`${this.basePath}/${id}`).valueChanges().pipe(
    tap(r =&gt; {
      if (!environment.production) {
        console.groupCollapsed(`Firestore Streaming [${this.basePath}] [doc$] ${id}`);
        console.log(r);
        console.groupEnd();
      }
    }),
   );
  }
  </code></pre>
  <p>Warning popup as,</p>
  <blockquote>
  <p>Argument of type 'MonoTypeOperatorFunction' is not assignable to parameter of type 'OperatorFunction&lt;T | undefined, T&gt;'.</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/wJmGc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wJmGc.png" alt="enter image description here" /></a></p>
  <p>Here is my full code,</p>
  <pre><code>import {Inject, Injectable} from '@angular/core';
  import {AngularFirestore, QueryFn} from '@angular/fire/firestore';
  import {Observable} from 'rxjs';
  import {tap} from 'rxjs/operators';
  import { environment } from 'src/environments/environment';
  
  @Injectable({
    providedIn: 'root'
  })
  export abstract class FirestoreService&lt;T&gt; {
  
    protected abstract basePath: string;
  
    constructor(
      @Inject(AngularFirestore) protected firestore: AngularFirestore,
    ) {
    }
  
    doc$(id: string): Observable&lt;T&gt; {
      return this.firestore.doc&lt;T&gt; 
      (`${this.basePath}/${id}`).valueChanges().pipe(
         tap(r =&gt; {
              if (!environment.production) {
                    console.groupCollapsed(`Firestore Streaming 
                       [${this.basePath}] [doc$] ${id}`);
              console.log(r);
              console.groupEnd();
         }
       }),
      );
     }
  
     collection$(queryFn?: QueryFn): Observable&lt;T[]&gt; {
       return this.firestore.collection&lt;T&gt;(`${this.basePath}`, 
           queryFn).valueChanges().pipe(
             tap(r =&gt; {
               if (!environment.production) {
                    console.groupCollapsed(`Firestore Streaming 
                     [${this.basePath}] [collection$]`);
                    console.table(r);
                    console.groupEnd();
               }
           }),
       );
     }
  
    create(value: T) {
       const id = this.firestore.createId();
       return this.collection.doc(id).set(Object.assign({}, { id }, 
            value)).then(_ =&gt; {
                  if (!environment.production) {
                       console.groupCollapsed(`Firestore Service 
                          [${this.basePath}] [create]`);
                       console.log('[Id]', id, value);
                       console.groupEnd();
                  }
            });
       }
  
    delete(id: string) {
        return this.collection.doc(id).delete().then(_ =&gt; {
           if (!environment.production) {
               console.groupCollapsed(`Firestore Service [${this.basePath}] 
                   [delete]`);
               console.log('[Id]', id);
               console.groupEnd();
           }
        });
   }
  
   private get collection() {
          return this.firestore.collection(`${this.basePath}`);
   }
  }
  </code></pre>
  <p>package.json file :</p>
  <pre><code>{
     &quot;name&quot;: &quot;adm-management&quot;,
     &quot;version&quot;: &quot;0.0.0&quot;,
     &quot;scripts&quot;: {
        &quot;ng&quot;: &quot;ng&quot;,
        &quot;start&quot;: &quot;ng serve&quot;,
        &quot;build&quot;: &quot;ng build&quot;,
        &quot;test&quot;: &quot;ng test&quot;,
        &quot;lint&quot;: &quot;ng lint&quot;,
        &quot;e2e&quot;: &quot;ng e2e&quot;
   },
   &quot;private&quot;: true,
   &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/cdk&quot;: &quot;^11.0.1&quot;,
      &quot;@angular/common&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/compiler&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/core&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/fire&quot;: &quot;^6.1.4&quot;,
      &quot;@angular/forms&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/material&quot;: &quot;^11.0.1&quot;,
      &quot;@angular/platform-browser&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/router&quot;: &quot;~11.0.0&quot;,
      &quot;@fortawesome/angular-fontawesome&quot;: &quot;^0.8.0&quot;,
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.32&quot;,
      &quot;@fortawesome/free-brands-svg-icons&quot;: &quot;^5.15.1&quot;,
      &quot;@fortawesome/free-regular-svg-icons&quot;: &quot;^5.15.1&quot;,
      &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.1&quot;,
      &quot;rxjs&quot;: &quot;~6.6.0&quot;,
      &quot;tslib&quot;: &quot;^2.0.0&quot;,
      &quot;zone.js&quot;: &quot;~0.10.2&quot;,
      &quot;firebase&quot;: &quot;^7.0 || ^8.0&quot;
   },
   &quot;devDependencies&quot;: {
      &quot;@angular-devkit/build-angular&quot;: &quot;~0.1100.0&quot;,
      &quot;@angular/cli&quot;: &quot;~11.0.0&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;~11.0.0&quot;,
      &quot;@types/jasmine&quot;: &quot;~3.6.0&quot;,
      &quot;@types/node&quot;: &quot;^12.11.1&quot;,
      &quot;codelyzer&quot;: &quot;^6.0.0&quot;,
      &quot;jasmine-core&quot;: &quot;~3.6.0&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~5.0.0&quot;,
      &quot;karma&quot;: &quot;~5.1.0&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
      &quot;karma-coverage&quot;: &quot;~2.0.3&quot;,
      &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^1.5.0&quot;,
      &quot;protractor&quot;: &quot;~7.0.0&quot;,
      &quot;ts-node&quot;: &quot;~8.3.0&quot;,
      &quot;tslint&quot;: &quot;~6.1.0&quot;,
      &quot;typescript&quot;: &quot;~4.0.2&quot;,
      &quot;@angular-devkit/architect&quot;: &quot;&gt;= 0.900 &lt; 0.1200&quot;,
      &quot;firebase-tools&quot;: &quot;^8.0.0&quot;,
      &quot;fuzzy&quot;: &quot;^0.1.3&quot;,
      &quot;inquirer&quot;: &quot;^6.2.2&quot;,
      &quot;inquirer-autocomplete-prompt&quot;: &quot;^1.0.1&quot;,
      &quot;open&quot;: &quot;^7.0.3&quot;
    }
  }
  </code></pre>
  <p>Any solution?</p>
  <p>(This is the link I referred - <a href="https://www.toptal.com/angular/state-management-in-angular-using-firebase" rel="nofollow noreferrer">https://www.toptal.com/angular/state-management-in-angular-using-firebase</a>)</p>