title: karma TypeError "Cannot read property 'subscribe' of undefined"
body: <p>While testing a simple component that has a shared service, the following error message appears, and I cannot manage to make it work, I've tried everything!</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'subscribe' of undefined</p>
  </blockquote>
  
  <p><strong>lr.component.ts</strong></p>
  
  <pre><code>export class LrComponent implements OnDestroy {
    currentRouter: string;
    private subscription: Subscription;
  
    constructor(private lrService: LrService) {
      this.subscription = this.lrService.lrNavigation$.subscribe(
        (currentNav: string) =&gt; {
          this.currentRouter = currentNav;
        },
        (error) =&gt; {
          console.warn(error);
        }
      );
    }
  
    ngOnDestroy() {
      if (this.subscription) {
        this.subscription.unsubscribe();
      }
    }
  }
  </code></pre>
  
  <p><strong>lr.service.ts</strong></p>
  
  <pre><code>@Injectable()
  export class LrService {
    // Observables for our components to subscribe to.
    lrNavigation$: Observable&lt;string&gt;;
  
    // Subjects to return data to subscribed components
    private lrNavigationSubject = new Subject&lt;string&gt;();
  
    constructor() {
      this.lrNavigation$ = this.lrNavigationSubject.asObservable();
    }
  
    // Triggers subscribed components
    lrNavigate(currentNav: string) {
      this.lrNavigationSubject.next(currentNav);
    }
  }
  </code></pre>
  
  <p><strong>any-random.component.ts</strong></p>
  
  <pre><code>// In another component we send the string that we want the subscribed component (LrComponent) to receieve
  this.lrService.lrNavigate('LR');
  </code></pre>
  
  <p><strong>lr.component.spec.ts</strong></p>
  
  <pre><code>class MockRouter {
    navigate = jasmine.createSpy('navigate');
  }
  
  class MockActivatedRoute {
    params = jasmine.createSpy('params');
  }
  
  class MockLrService extends LrService {
    lrNavigation$: Observable&lt;string&gt; = new Subject&lt;string&gt;().asObservable();
  
    constructor() {
      super();
    }
  
    lrNavigate(currentRouter: string) {
      return Observable.of(['LR']);
    }
  }
  
  export function main() {
    describe('LrComponent', () =&gt; {
      let fixture: ComponentFixture&lt;LrComponent&gt;;
      let component: LrComponent;
      let lrService: LrService;
  
      beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
          declarations: [
            LrComponent,
            LrMappingsComponent,
            LrCategoriesComponent,
          ],
          imports: [
            RouterTestingModule,
            CommonModule,
            LrRoutingModule,
            SharedModule,
            AgGridModule.withComponents(
              [
                CaseSensitiveFilterComponent,
                ButtonComponent,
                ColumnHeaderComponent,
                TypeaheadEditorComponent,
                ButtonGroupComponent
              ]
            )
          ],
          providers: [
            { provide: LrService, useClass: MockLrService },
            { provide: Router, useClass: MockRouter },
            { provide: ActivatedRoute, useClass: MockActivatedRoute },
          ]
        }).compileComponents();
      }));
  
      beforeEach(() =&gt; {
        fixture = TestBed.createComponent(LrComponent);
        component = fixture.componentInstance;
        lrService = fixture.debugElement.injector.get(LrService);
      });
  
      it('should create LrComponent', () =&gt; {
        fixture.detectChanges();
        expect(component).toBeDefined();
      });
  
      it('should have the current router set', async(() =&gt; {
        fixture.detectChanges();
        expect(component.currentRouter).toEqual('LR', 'the data should be `LR`');
      }));
    });
  }
  </code></pre>
  
  <p><strong>ERROR</strong></p>
  
  <p><a href="https://i.stack.imgur.com/TSJcz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TSJcz.jpg" alt="enter image description here"></a></p>
  
  <p><strong>NOTE:</strong></p>
  
  <p>If I use <strong>ONLY</strong> Jasmine, with no Angular testing framework stuff, it works. But that's not how I want to test <code>@Component</code>'s.</p>
  
  <p>Example:</p>
  
  <pre><code>export function main() {
    describe('LrComponent', () =&gt; {
      let fixture: ComponentFixture&lt;LrComponent&gt;;
      let component: LrComponent;
      let lrService: LrService;
  
      beforeEach(() =&gt; {
        lrService = new MockLrService();
        component = new LrComponent(lrService);
      });
  
      it('should create LrComponent', () =&gt; {
        fixture.detectChanges();
        expect(component).toBeDefined();
      });
    });
  }
  </code></pre>
  
  <p>This works, but is not what I want.</p>
  
  <p>Any clue on how to solve this issue? I really tried many things and none worked...</p>