title: Cant understand the error: TypeError: Cannot read property 'subscribe' of undefined
body: <p>I have written an implementation to obtain data from API calls. However, while testing the functionality I am getting the following errors even before writing any meaningful test cases:</p>
  <pre><code>TypeError: Cannot read property 'subscribe' of undefined
      at DataComponent.ngOnInit (http://localhost:9876/_karma_webpack_/webpack:/src/app/dashboard/job/job.component.ts:48:10)
      at callHook (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:3405:1)
      at callHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:3375:1)
      at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:3327:1)
      at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:8573:1)
      at renderComponentOrTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:8672:1)
      at tickRootContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9885:1)
      at detectChangesInRootView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9910:1)
      at RootViewRef.detectChanges (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10320:1)
      at ComponentFixture._tick (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:243:1)
  </code></pre>
  <p>I'm not sure what I'm missing, any help would be appreciated.
  I looked into the following to get some understanding:</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/55958449/why-am-i-getting-a-failed-cannot-read-property-subscribe-of-undefined-while">Why am I getting a &quot;Failed: Cannot read property &#39;subscribe&#39; of undefined&quot; while running tests?</a>   -&gt; the solution did not work in my case</li>
  <li><a href="https://stackoverflow.com/questions/47942482/karma-typeerror-cannot-read-property-subscribe-of-undefined?rq=1">karma TypeError &quot;Cannot read property &#39;subscribe&#39; of undefined&quot;</a></li>
  </ul>
  <p>and some other references.</p>
  <p>Here are my code files. I have removed certain parts of my code that I felt were not relevant to the issue at hand.</p>
  <p>dataService.ts code:</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpErrorResponse } from '@angular/common/http';
  import { IData } from '../model/data.model';
  import { Observable, throwError } from 'rxjs';
  import {catchError, tap} from 'rxjs/operators';
  
  @Injectable({
    providedIn: 'root'
  })
  export class DataService {
  
    constructor(private http: HttpClient) { }
  
    public getData(): Observable&lt;IData[]&gt;{
      return this.http.get&lt;IData[]&gt;('url')
      .pipe(
        tap(data =&gt; console.log('Data Received')),
        catchError(this.handleError)
      );
    }
    private handleError(err: HttpErrorResponse){
     //handle error code
    }
  }
  
  </code></pre>
  <p>component I am testing -&gt; data.component.ts code:</p>
  <pre><code>import { Component, OnInit, Input} from '@angular/core';
  import { IData } from '../../model/data.model';
  import {DataService} from '../../service/data.service';
  
  @Component({
    selector: 'app-job',
    templateUrl: './job.component.html',
    styleUrls: ['./job.component.css']
  })
  export class JobComponent implements OnInit {
  
     @Input() appId: string;
  
     jobs: IData[] = [];
     
     constructor(   private dataService: DataService ) {}
  
     ngOnInit(): void {
        this.dataService.getData().subscribe({
           next: data =&gt; {
              this.data = data;
           },
           error: err =&gt; this.errorMessage = err
        });
     }
  //other implementation
  }
  </code></pre>
  <p>Testing file :  data.spec.ts:</p>
  <pre><code>import { ComponentFixture, TestBed } from '@angular/core/testing';
  import { DataComponent } from './job.component';
  import { IData } from 'src/app/model/job.model';
  import { DataService } from 'src/app/service/job-data.service';
  import { of, Observable } from 'rxjs';
  import { NO_ERRORS_SCHEMA } from '@angular/core';
  
  describe('DataComponent', () =&gt; {
    let component: DataComponent;
    let fixture: ComponentFixture&lt;DataComponent&gt;;
    let mockDataService ;
    let JOBS: IData[];
    
  
    beforeEach(async () =&gt; {
      mockJobDataService = jasmine.createSpyObj(['getData']);
      await TestBed.configureTestingModule({
        declarations: [ DataComponent ],
        providers: [
          {provide: DataService, useValue: mockDataService}
        ]
      })
      .compileComponents()
      .then(() =&gt; {
        DATA = [{id: 'CJH'}];
        fixture = TestBed.createComponent(DataComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();  //updates bindings
      });
    });
  
    it('should return true',() =&gt; {
          expect(true).toBe(true);
    })
    
  });
  
  </code></pre>
  <p>When I remove <code>fixture.detectChanges()</code>, the error gets removed. But in my understanding the test cases should work even if I use this call anywhere in my test.</p>