Heap size differences

summary-1.component.ts

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Apollo } from 'apollo-angular';
import { Observable } from 'rxjs/Observable';
import { map, pluck, switchMap } from 'rxjs/operators';

import { query, User, SummaryResponse } from './summary.graphql';

@Component({
  selector: 'cw-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SummaryComponent {

  user$: Observable<User> = this.route.parent.params.pipe(
      pluck('id'),
      switchMap(id => {
        return this.apollo.watchQuery<SummaryResponse>({
          query,
          variables: { id },
        }).valueChanges;
      }),
      map(({ data }) => data.user),
    );

  constructor(
    private apollo: Apollo,
    private route: ActivatedRoute,
  ) { }

}

summary-2.component.ts

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Apollo } from 'apollo-angular';
import { Observable } from 'rxjs/Observable';
import { map, pluck, switchMap } from 'rxjs/operators';

import { query, User, SummaryResponse } from './summary.graphql';

@Component({
  selector: 'cw-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SummaryComponent {

  user$: Observable<User>;

  constructor(
    apollo: Apollo,
    route: ActivatedRoute,
  ) {
    this.user$ = route.parent.params.pipe(
      pluck('id'),
      switchMap(id => {
        return apollo.watchQuery<SummaryResponse>({
          query,
          variables: { id },
        }).valueChanges;
      }),
      map(({ data }) => data.user),
    );
  }

}

summary-1: 472 retained size
summary-2: 232 retained size