title: ngOnInit is not called and Component won't load unless route clicked twice
body: <p>My Home component won't load unless I click on it's routerLink but it should load on application start.</p>
  
  <p>I have properties on my components that are nested in side of it and which get fed data on load of the Home component.</p>
  
  <pre><code>export class HomeComponent implements OnInit, OnDestroy {
     public subscription: Subscription;
     constructor(public router: Router, public userService:UserSettingsService, public safetyService: SafetyService) {
        var self = this;
        // Is called and data is loaded.
        self.loadDataForSafety(userService.defaultFilterObject);
        this.subscription = this.userService.filterObjectAnnounced$.subscribe(
            filtered =&gt; {
                self.selectedFilters = filtered;
                self.loadDataForSafety(self.selectedFilters);
            }
        );
     }
  
  }
  
  ngOnInit() {
    var self = this;
    this.subscription = this.userService.filterObjectAnnounced$.subscribe(
        filtered =&gt; {
            self.selectedFilters = filtered;
            self.loadDataForSafety(self.selectedFilters);
        }
    );
  }
  
  loadDataForSafety(filterObj) {
     var filterObj = filterObj;
     var self = this;
     var lowestDataLevel = 'RegionNum';
  this.components.forEach(function(cardElem){
    if(cardElem.id == "safetyWidget"){
        self.safetyService.getAllSafetyElements(filterObj)
        .map(data =&gt; {
           // Itterate through array of objects returned
           Object.keys(cardElem.cardData).forEach(card =&gt; {
             var keyID = '';
             if(card == '3'){
               keyID = 'SBOWT';
             }else if(card == '2'){
               keyID = 'RWT';
             }else if(card == '4'){
               keyID = 'BHOIT';
             }else if(card == '0'){
               keyID = 'Backing';
             }
             data.forEach(elem =&gt;{
               cardElem.cardData[card].push({
                 "text": elem[lowestDataLevel],
                 "id": elem[lowestDataLevel],
                 "value": elem[keyID],
                 "percent": (Math.random() * (99 - 20) + 20) + "%"
               });
             })
           })
           // DATA IS PRESENT
           return cardElem.cardData;
        })
        .subscribe(data =&gt; {
          // DATA IS PRESENT HERE
          cardElem["cardData"] = data;
        })
    }
  })
  </code></pre>
  
  <p>}</p>
  
  <p>The constructor is kicked off but ngOnInit is never kicked off because the component does not rendered.</p>
  
  <p>There is no error being logged either.</p>