Angular 8 : result fetched from reducer using ngRx/store is not updating the UI in async (html)

1 answer
My issue is similar to <https://stackoverflow.com/questions/53123304/angular-using-ngrx-store-and-pipe-async-not-get-update-in-the-dom>. 

import { Component, OnDestroy, OnInit } from '@angular/core';  import { Store } from '@ngrx/store';  import { Observable, Subscription } from 'rxjs';  import { Ingredient } from '../shared/ingredient.model';  import { ShoppingListService } from './shopping-list.service';      @Component({    selector: 'app-shopping-list',    templateUrl: './shopping-list.component.html',    styleUrls: ['./shopping-list.component.css']  })  export class ShoppingListComponent implements OnInit, OnDestroy {    ingredients: Observable<{ ingredients: Ingredient[] }>;    private subscription: Subscription;      constructor(      private slService: ShoppingListService,      private store: Store<{ shoppingList: { ingredients: Ingredient[] } }>    ) {}      ngOnInit() {      this.ingredients = this.store.select('shoppingList');    }      onEditItem(index: number) {      this.slService.startedEditing.next(index);    }      ngOnDestroy() {      // this.subscription.unsubscribe();    }  }
<div class="row">    <div class="col-xs-10">      <app-shopping-edit></app-shopping-edit>      <hr>      <ul class="list-group">        <a          class="list-group-item"          style="cursor: pointer"          *ngFor="let ingredient of (ingredients | async).ingredients; let i = index"          (click)="onEditItem(i)"        >          {{ ingredient.name }} ({{ ingredient.amount }})        </a>      </ul>    </div>  </div>      {    "name": "ng-complete-guide-update",    "version": "0.0.0",    "scripts": {  "ng": "ng",  "start": "ng serve",  "build": "ng build",  "test": "ng test",  "lint": "ng lint",  "e2e": "ng e2e"    },    "private": true,    "dependencies": {  "@angular/animations": "^8.0.0",  "@angular/common": "^8.0.0",  "@angular/compiler": "^8.0.0",  "@angular/core": "^8.0.0",  "@angular/forms": "^8.0.0",  "@angular/platform-browser": "^8.0.0",  "@angular/platform-browser-dynamic": "^8.0.0",  "@angular/router": "^8.0.0",  "@ngrx/store": "^8.0.0-beta.2",  "bootstrap": "3.3.7",  "core-js": "^3.1.2",  "firebase": "^7.12.0",  "rxjs": "^6.0.0",  "tslib": "^1.9.0",  "zone.js": "^0.8.26"    },    "devDependencies": {  "@angular-devkit/build-angular": "~0.803.25",  "@angular/cli": "^8.0.0",  "@angular/compiler-cli": "^8.0.0",  "@angular/language-service": "^8.0.0",  "@types/node": "~8.9.4",  "@types/jasmine": "~2.8.8",  "@types/jasminewd2": "~2.0.3",  "codelyzer": "^5.0.1",  "jasmine-core": "~2.99.1",  "jasmine-spec-reporter": "~4.2.1",  "karma": "~4.0.0",  "karma-chrome-launcher": "~2.2.0",  "karma-coverage-istanbul-reporter": "~2.0.1",  "karma-jasmine": "~1.1.2",  "karma-jasmine-html-reporter": "^0.2.2",  "protractor": "~5.4.0",  "ts-node": "~7.0.0",  "tslint": "~5.11.0",  "typescript": "3.4.5"    }  }

The async in html fails with error : ingredients of undefined. If i try to subscribe in ngOninit,to set the ingredients a property in a class.it still fails with undefined in subscription.

i have upgraded all the dependencies.The author of the tutorial is not getting this issue though when i try ,it fails to fetch set data from reducers to UI though i can see the values in debug mode.

When i searched for an answer,all i get is issue with zone.As i am new to this not sure how to resolve.

https://github.com/DineshNO/ng4-complete-guide.git

Received answer to this question:
The best answer according to the author of the question:

   {    "name": "ng4-complete-guide",    "version": "0.0.0",    "license": "MIT",    "scripts": {      "ng": "ng",      "start": "ng serve",      "build": "ng build --prod",      "test": "ng test",      "lint": "ng lint",      "e2e": "ng e2e"    },    "private": true,    "dependencies": {      "@angular/animations": "^4.4.0-RC.0",      "@angular/common": "^4.4.0-RC.0",      "@angular/compiler": "^4.4.0-RC.0",      "@angular/core": "^4.4.0-RC.0",      "@angular/forms": "^4.4.0-RC.0",      "@angular/http": "^4.4.0-RC.0",      "@angular/platform-browser": "^4.4.0-RC.0",      "@angular/platform-browser-dynamic": "^4.4.0-RC.0",      "@angular/router": "^4.4.0-RC.0",      "@ngrx/effects": "^4.0.3",      "@ngrx/router-store": "^4.0.3",      "@ngrx/store": "^4.0.3",      "@ngrx/store-devtools": "^4.0.0",      "bootstrap": "^3.4.1",      "core-js": "^2.5.1",      "firebase": "^4.2.0",      "rxjs": "^5.4.2",      "zone.js": "^0.8.17"    },    "devDependencies": {      "@angular/cli": "^1.4.0",      "@angular/compiler-cli": "^4.4.0-RC.0",      "@angular/language-service": "^4.4.0-RC.0",      "@angular/platform-server": "^4.4.0-RC.0",      "@types/jasmine": "^2.8.3",      "@types/jasminewd2": "^2.0.2",      "@types/node": "^8.0.27",      "acorn": "^7.1.1",      "codelyzer": "^3.1.1",      "jasmine-core": "~2.8.0",      "jasmine-spec-reporter": "~4.2.1",      "karma": "~2.0.0",      "karma-chrome-launcher": "~2.2.0",      "karma-coverage-istanbul-reporter": "^1.2.1",      "karma-jasmine": "~1.1.0",      "karma-jasmine-html-reporter": "^0.2.2",      "protractor": "~5.1.2",      "ts-node": "~4.1.0",      "tslint": "~5.9.1",      "typescript": "~2.5.3"    }  }

My new package json with which async works. Will upgrade to Angualar 8 along with others later. thanks.