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

I currently have an angular2 CRM app based on ngrx/store architecture. I have the CRUD functions for updating, listing and adding customers working fine and all tied up to Firebase Database using ngrx/effects.

To keep the smart component in sync with the store i have the following code. Again all working fine, however i am unsure about how to update an array in the form - see code below: -

This is where i update the form with the data from the store

if (this.customer) {            this.customerForm.get('name').setValue(this.customer.name);           this.customerForm.get('overview').setValue(this.customer.overview);           this.customerForm.get('imagePath').setValue(this.customer.imagePath);            console.log("ngOnChanges", this.customer);          } 

I want to do a similar thing with address form but unsure how to do the above to populate the array object in the form. Any ideas / suggestions welcome

When i log the console below i actually have the address details just need to know how to get them into the form object.

Object addresses: Array(2) 0:Object 1:Object length:2 imagePath:"http://www.bytes.co.uk/application/themes/bytes/img/bytes-technology-group.svg" name:"Bytes Technology Group Emirates LLC" overview:"Kronos Re-Seller for the Middle East and GCC Countries and Egypt" parentId:"-KcRRsAGRYASXNU3gO_F" 

Full Customer Detail Smart Component

import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy, OnChanges } from '@angular/core'; import { FormBuilder, FormGroup, FormArray, Validators, FormControl } from "@angular/forms";  // Mojito Models import { CustomerModel } from '../../models/customer-model'; import { AddressType } from '../../../shared/models/address.model';  @Component({   selector: 'mj-customer-detail',   templateUrl: './customer-detail.component.html',   styleUrls: ['./customer-detail.component.scss'],   changeDetection: ChangeDetectionStrategy.OnPush }) export class CustomerDetailComponent implements OnInit, OnChanges {    @Input() customer: CustomerModel;   @Output() updatedCustomer: EventEmitter<CustomerModel> = new EventEmitter<CustomerModel>();   @Output() showView: EventEmitter<string> = new EventEmitter<string>();   @Output() customerId: EventEmitter<string> = new EventEmitter<string>();    customerForm: FormGroup;   addressForm: FormGroup;    addressTypes: AddressType[] = [     { "id": 1, "name": "Work" },     { "id": 2, "name": "Home" },   ]    private newAddressGroup() {     return new FormGroup({       type: new FormControl,       street: new FormControl,       city: new FormControl,       country: new FormControl,       postalCode: new FormControl     })   }    get addresses() {     return (this.addressForm.get('addressGroups') as FormArray).controls;   }     constructor(private fb: FormBuilder) {      this.customerForm = this.fb.group({       name: [null, Validators.required],       overview: [null, Validators.required],       imagePath: [null, Validators.required],     });      this.addressForm = this.fb.group({       addressGroups: this.fb.array([])     });   }    ngOnChanges() {      if (this.customer) {        this.customerForm.get('name').setValue(this.customer.name);       this.customerForm.get('overview').setValue(this.customer.overview);       this.customerForm.get('imagePath').setValue(this.customer.imagePath);        console.log("ngOnChanges", this.customer);      }    }    ngOnInit() {      }    onAddAddressGroup() {     const fa = this.addressForm.controls["addressGroups"] as FormArray;      fa.push(this.newAddressGroup());    }    onSaveAddress() {     const addresses = this.addressForm.controls["addressGroups"].value;     this.customer.addresses = addresses;     this.onSaveCustomer();   }    onSaveCustomer() {      this.customer = Object.assign(this.customer, this.customerForm.value);     this.updatedCustomer.emit(this.customer);     this.showView.emit('list');    }    onDeleteCustomer() {      this.customerId.emit(this.customer.$key);     this.showView.emit('list');     }    goBack() {      this.showView.emit('list');    }  } 

I am making a simple http request in my application.

I am using Angular 2 Quickstart and updating all my angular packages to 4.3.4

This is my package.json

      {       "name": "angular-quickstart",       "version": "1.0.0",       "description": "QuickStart package.json from the documentation, supplemented with testing support",       "scripts": {         "build": "tsc -p src/",         "build:watch": "tsc -p src/ -w",         "build:e2e": "tsc -p e2e/",         "serve": "lite-server -c=bs-config.json",         "serve:e2e": "lite-server -c=bs-config.e2e.json",         "prestart": "npm run build",         "start": "concurrently \"npm run build:watch\" \"npm run serve\"",         "pree2e": "npm run build:e2e",         "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",         "preprotractor": "webdriver-manager update",         "protractor": "protractor protractor.config.js",         "pretest": "npm run build",         "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",         "pretest:once": "npm run build",         "test:once": "karma start karma.conf.js --single-run",         "lint": "tslint ./src/**/*.ts -t verbose"       },       "keywords": [],       "author": "",       "license": "MIT",       "dependencies": {         "@angular/common": "4.3.4",         "@angular/compiler": "4.3.4",         "@angular/core": "4.3.4",         "@angular/forms": "4.3.4",         "@angular/http": "4.3.4",         "@angular/platform-browser": "4.3.4",         "@angular/platform-browser-dynamic": "4.3.4",         "@angular/platform-server": "4.3.4",         "@angular/router": "4.3.4",         "angular-in-memory-web-api": "~0.3.0",         "core-js": "^2.4.1",         "rxjs": "^5.4.3",         "systemjs": "0.19.40",         "typescript": "2.4.2",         "zone.js": "^0.8.16"       },       "devDependencies": {         "concurrently": "^3.2.0",         "lite-server": "^2.2.2",         "typescript": "~2.1.0",         "canonical-path": "0.0.2",         "tslint": "^3.15.1",         "lodash": "^4.16.4",         "jasmine-core": "~2.4.1",         "karma": "^1.3.0",         "karma-chrome-launcher": "^2.0.0",         "karma-cli": "^1.0.1",         "karma-jasmine": "^1.0.2",         "karma-jasmine-html-reporter": "^0.2.2",         "protractor": "~4.0.14",         "rimraf": "^2.5.4",         "@types/node": "^6.0.46",         "@types/jasmine": "2.5.36"       },       "repository": {}     }  

Here is my System.config.js

      /**      * System configuration for Angular samples      * Adjust as necessary for your application needs.      */     (function (global) {       System.config({         paths: {           // paths serve as alias           'npm:': 'node_modules/'         },         // map tells the System loader where to look for things         map: {           // our app is within the app folder           'app': 'app',            // angular bundles           '@angular/core': 'npm:@angular/core/bundles/core.umd.js',           '@angular/common': 'npm:@angular/common/bundles/common.umd.js',           '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',           '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',           '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',           '@angular/http': 'npm:@angular/http/bundles/http.umd.js',           '@angular/router': 'npm:@angular/router/bundles/router.umd.js',           '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',            // other libraries           'rxjs':                      'npm:rxjs',           'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/'         },         // packages tells the System loader how to load when no filename and/or no extension         packages: {           app: {             defaultExtension: 'js',             meta: {               './*.js': {                 loader: 'systemjs-angular-loader.js'               }             }           },           rxjs: {             defaultExtension: 'js'           }         }       });     })(this);  

The code works fine until i install HttpClientModule.

      import { NgModule }      from '@angular/core';     import { BrowserModule } from '@angular/platform-browser';      import { HttpClientModule } from '@angular/common/http';     import { AppComponent }  from './app.component';       @NgModule({       imports: [         BrowserModule,         HttpClientModule],       declarations: [ AppComponent ],       bootstrap:    [ AppComponent ]     })     export class AppModule { }  

After i add HttpClientModule, i get an error:

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js/http

I have been at it for quite a while and looked at quite a lot of questions like this but can't find an answer for my problem.

I am using combineReducers in a "@angular/core": "4.4.3" and "@ngrx/store": "4.0.3" project and I am having issues with the reducers not getting picked up after dispatching the actions.

It might just be my limited experience with ngrx/store

The project in its entirety can be seen here https://github.com/raduchiriac/workflow

app.module.ts

import { AppStore } from './app.store'  @NgModule({   imports: [     StoreModule.forRoot(AppStore),     ...   ],   providers: [     ...   ] }) 

app.store.ts

import { createSelector } from 'reselect'; import * as ModalsReducer from "./store/reducers/modals.reducer";  export interface AppState {   modals: ModalsReducer.State, }  const metaReducer: ActionReducer<AppState> = combineReducers({   modals: ModalsReducer.reducer, });  export function AppStore(state: any, action: any) {   return metaReducer(state, action); } 

modals.reducer.ts

import * as ModalsActions from '../actions/modals.actions';  export interface State {   triggerAdd: boolean; }  const initialState: State = {   triggerAdd: false, };  export function reducer(state = initialState, { type, payload }): State {   switch (type) {     case ModalsActions.MODALS_TRIGGER_ADD_CLOSE : {       return Object.assign({...state}, {         triggerAdd: false       });     }     ... } 

triggers.component.ts

addNew() {   this.store.dispatch(new ModalsActions.OpenTriggerAddAction()); } ... 

EDIT: The only way the store will work is by doing this. Why?

app.module.ts

import { AppStore, reducers } from './app.store' ... imports: [   StoreModule.forRoot(reducers, {}), ]