title: TypeError during cleanup of component
body: <p>I am trying to figure out why my angular component test is failing. Looking at the stack trace the issue seems to be coming from the fact that the <code>_subscriptions</code> object is <code>undefined</code> but I don't understand how that's possible or why this is happeing. That is the full stack that I am getting when the test fails:</p>
  
  <pre><code>HeadlessChrome 79.0.3945 (Windows 10.0.0): Executed 8 of 26 SUCCESS (0 secs / 0.191 secs)
  ERROR: 'Error during cleanup of component', Object{component: PlayerComponent{...}, _subscriptions: Object{routerSubscription: ...}}, stacktrace: TypeError: Cannot read property 'unsubscribe' of undefined
  TypeError: Cannot read property 'unsubscribe' of undefined
      at http://localhost:9876/_karma_webpack_/src/app/player/player.component.ts:58:29
      at Array.map (&lt;anonymous&gt;)
      at PlayerComponent.ngOnDestroy (http://localhost:9876/_karma_webpack_/src/app/web-player/web-player.component.ts:57:36)
      at callProviderLifecycles (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28212:1)
      at callElementProvidersLifecycles (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28171:1)
      at callLifecycleHooksChildrenFirst (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28153:1)
      at destroyView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:38603:1)
      at callWithDebugContext (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:39716:1)
      at Object.debugDestroyView [as destroyView] (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:39313:1)
      at ViewRef_.destroy (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:27128:1)}
  HeadlessChrome 79.0.3945 (Windows 10.0.0): Executed 9 of 26 SUCCESS (0 secs / 0.207 secs)
  ERROR: 'Error during cleanup of component', Object{component: PlayerComponent{router: Object{navigate: ..., events: ...}, _subscriptions: Object{routerSubscription: ...}}, stacktrace: TypeError: Cannot read property 'unsubscribe' of undefined
  TypeError: Cannot read property 'unsubscribe' of undefined
      at http://localhost:9876/_karma_webpack_/src/app/web-player/web-player.component.ts:58:29
      at Array.map (&lt;anonymous&gt;)
      at PlayerComponent.ngOnDestroy (http://localhost:9876/_karma_webpack_/src/app/web-player/web-player.component.ts:57:36)
      at callProviderLifecycles (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28212:1)
      at callElementProvidersLifecycles (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28171:1)
      at callLifecycleHooksChildrenFirst (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28153:1)
      at destroyView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:38603:1)
      at callWithDebugContext (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:39716:1)
      at Object.debugDestroyView [as destroyView] (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:39313:1)
  </code></pre>
  
  <p>That is my PlayerComponent.ts:</p>
  
  <pre><code>import { Component, OnInit, OnDestroy, Input } from '@angular/core';
  import { Router, RouterEvent, NavigationStart } from '@angular/router';
  import { combineLatest, Subscription } from 'rxjs';
  
  export class WebPlayerComponent implements OnInit, OnDestroy {
      private _subscriptions: { [key: string]: Subscription } = {};
  
      constructor(
          private readonly router: Router
      ) { }
  
      ngOnInit() {
          this._subscriptions ["routerSubscription"] = this.router.events.subscribe((event: RouterEvent) =&gt; {
              // other logic here
          });
      }
  
      ngOnDestroy() {
          Object.keys(this._subscriptions).map((key) =&gt; {
              this._subscriptions[key].unsubscribe();
          });
      }
  }
  </code></pre>
  
  <p>That is the test for it:</p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { Router } from '@angular/router';
  
  describe('PlayerComponent', () =&gt; {
      let component: PlayerComponent;
      let fixture: ComponentFixture&lt;PlayerComponent&gt;;
  
      beforeEach(async(() =&gt; {
          let router = {
              navigate: jasmine.createSpy(),
              events: {
                  subscribe: jasmine.createSpy(),
                  unsubscribe: jasmine.createSpy()
              }
          };
  
  
          TestBed.configureTestingModule({
              providers: [
                  { provide: Router, useValue: router },
              ],
              declarations: [ PlayerComponent ]
          })
          .compileComponents();
      }));
  
      beforeEach(() =&gt; {
          fixture = TestBed.createComponent(PlayerComponent);
          fixture.detectChanges();
          component = fixture.componentInstance;
  
      });
  
      it('should create', () =&gt; {
          expect(component).toBeTruthy();
      });
  });
  </code></pre>