angular-redux / form Goto Github PK

<form connect="sequences.assistantInfoForm" #assistantInfoForm="ngForm">
          <ion-list>
            <ion-list-header class="bg-light">
              {{ "SEQ.DETAILS" | translate | uppercase }}
            </ion-list-header>
            <ion-item>
              <ion-label color="primary" stacked>{{ "SEQ.NAME" | translate }}</ion-label>
              <ion-input ngControl ngModel clearInput="true" type="text" name="name" required></ion-input>
            </ion-item>
            <ion-item>
              <ion-label color="primary" stacked>{{ "SEQ.AREA" | translate }}</ion-label>
              <ion-select ngControl ngModel name="area" required>
                <ion-option *ngFor="let area of CONST.AREAS" value="{{area.id}}">{{ area.translation | translate }}</ion-option>
              </ion-select>
            </ion-item>
          </ion-list>
        </form>

       <form connect="sequences.assistantInfoForm" #assistantInfoForm="ngForm">
          <ion-list>
            <ion-list-header class="bg-light">
                 {{ "SEQ.ACTIVITY_TYPE" | translate | uppercase }}
            </ion-list-header>
            <ion-item>
                <ion-label>Red</ion-label>
                <ion-radio ngControl ngModel name="color" value="red"></ion-radio>
            </ion-item>
          </ion-list>
       </form>

Runtime Error
Uncaught (in promise): Error: No value accessor for form control with name: 'color' Error: No value accessor for form control with name: 'color' at g (http://localhost:8100/build/polyfills.js:3:7133) at _throwError (http://localhost:8100/build/main.js:24117:11) at setUpControl (http://localhost:8100/build/main.js:24030:9) at http://localhost:8100/build/main.js:26152:13 at t.invoke (http://localhost:8100/build/polyfills.js:3:14529) at Object.onInvoke (http://localhost:8100/build/main.js:4499:37) at t.invoke (http://localhost:8100/build/polyfills.js:3:14469) at n.run (http://localhost:8100/build/polyfills.js:3:9741) at http://localhost:8100/build/polyfills.js:3:6774 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213) at Object.onInvokeTask (http://localhost:8100/build/main.js:4490:37) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15134) at n.runTask (http://localhost:8100/build/polyfills.js:3:10390) at a (http://localhost:8100/build/polyfills.js:3:5313) at <anonymous>

<form [connect]="['shops', 'form']">
        <label>Partner ID: </label>
        <input type="number" name="shopId" ngControl ngModel/>
</form>

import { FormsModule } from '@angular/forms';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MockNgRedux, NgReduxTestingModule } from '@angular-redux/store/testing';
import { NgReduxFormModule } from '@angular-redux/form';

import { FormComponent } from './form.component';
import { ShopActions } from '../store/shops.actions';

const mockShopActions = {
    setShop: () => {
    },
    shopLoaded: () => {
    },
};

describe('FormComponent', () => {
    let component: FormComponent;
    let fixture: ComponentFixture<FormComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                FormsModule,
                NgReduxTestingModule,
                NgReduxFormModule
            ],
            declarations: [FormComponent],
            providers: [
                { provide: ShopActions, useValue: mockShopActions }
            ]
        }).compileComponents();

        MockNgRedux.reset();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(FormComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

TypeError: Cannot read property 'getState' of null
    at MockNgRedux.NgRedux.getState (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:27537:58)
    at FormStore.Array.concat.FormStore.getState (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:22217:27)
    at Connect.Array.concat.Connect.getState (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:30142:27)
    at http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:30131:49
    at Array.forEach (native)
    at Connect.Array.concat.Connect.resetState (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:30129:18)
    at http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:30092:19
    at ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2764:26)
    at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:63940:39)
    at ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2763:32)
    at Object.onInvoke (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:4622:37)
    at ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2763:32)
    at Zone.run (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2524:43)
    at http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:3157:57
    at ZoneDelegate.invokeTask (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2797:31)
    at resolvePromise (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:3109:31) [angular]
    at http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:3160:17 [angular]
    at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvokeTask (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:63964:39) [angular]
    at Object.onInvokeTask (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2675:100) [angular]
    at Object.onInvokeTask (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:4613:37) [angular]
    at drainMicroTaskQueue (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2990:35) [<root>]
    at ZoneTask.invoke (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2863:25) [<root>]
    at timer (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:4054:29) [<root>]
    at ____________________Elapsed_4_ms__At__Tue_May_09_2017_19_37_21_GMT_0200__CEST_ (http://localhost)
    at getStacktraceWithUncaughtError (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:63719:12) [angular]
    at new LongStackTrace (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:63713:22) [angular]
    at Object.onScheduleTask (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:63789:22) [angular]
    at Object.onScheduleTask (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:2673:29) [angular]
    at scheduleResolveOrReject (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:3155:14) [angular]
    at ZoneAwarePromise.then (http://localhost:9876/base/src/polyfills.ts?bdd59f38a06b817981b3da211939e6141b2452a4:3244:17) [angular]
    at Connect.Array.concat.Connect.ngAfterContentInit (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:30091:27) [angular]
    at callProviderLifecycles (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:11537:18) [angular]
    at callElementProvidersLifecycles (http://localhost:9876/base/src/test.ts?ac69261a7f71dfd7ceb4ff33a2a00c39d09bbc33:11518:13) [angular]

Angular CLI: 6.0.8
Node: 8.9.4
OS: win32 x64
Angular: 6.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

{
 currentItemId: 42,
 items: [
  {
   itemId: 41,
   name: "Item41"
  },
  {
   itemId: 42,
   name: "Item42"
  },
  {
   itemId: 43,
   name: "Item43"
  }
 ]
}

import { FormBuilder, FormGroup } from '@angular/forms';
. . .
    constructor(private fb: FormBuilder) {
    }

ngOnInit() {
// initialize form
        this.form = this.fb.group({
            firstName: [this.firstName],
            lastName: [this.lastName],
            nameSuffix: [this.nameSuffix],
            middleName: [this.middleName],
            nickName: [this.nickName],
        });
}

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'firstName' of null
TypeError: Cannot read property 'firstName' of null
    at Function.State.traverse (state.js:26)
    at Function.State.get (state.js:44)
    at eval (connect-base.js:92)
    at Array.forEach (<anonymous>)
    at ReactiveConnect.ConnectBase.resetState (connect-base.js:90)
    at eval (connect-base.js:43)
    at ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4733)
    at ZoneDelegate.invoke (zone.js:387)
    at Zone.run (zone.js:138)
    at Function.State.traverse (state.js:26)
    at Function.State.get (state.js:44)
    at eval (connect-base.js:92)
    at Array.forEach (<anonymous>)
    at ReactiveConnect.ConnectBase.resetState (connect-base.js:90)
    at eval (connect-base.js:43)
    at ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4733)
    at ZoneDelegate.invoke (zone.js:387)
    at Zone.run (zone.js:138)
    at resolvePromise (zone.js:809)
    at eval (zone.js:861)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4724)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at <anonymous>

 npm install angular-redux/form --save

> @angular-redux/[email protected] postinstall \node_modules\@angular-redux\form
> npm run build


> @angular-redux/[email protected] prebuild \node_modules\@angular-redux\form
> npm run clean


> @angular-redux/[email protected] clean \node_modules\@angular-redux\form
> rimraf dist


> @angular-redux/[email protected] build \node_modules\@angular-redux\form
> ngc

Error at ......../node_modules/@angular-redux/form/source/state.ts:221:25: Type 'string' does not satisfy the constraint 'object'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @angular-redux/[email protected] build: `ngc`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @angular-redux/[email protected] build script 'ngc'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the @angular-redux/form package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ngc
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs @angular-redux/form
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls @angular-redux/form
npm ERR! There is likely additional logging output above.

  npm install @angular-redux/form

<form [formGroup]="loginForm" connect="loginForm">
            <div class="form-group">
              <label class="center-block">Email</label>
              <input class="form-control" formControlName="email" />
            </div>
            <div class="form-group">
            <label for="password">Password</label>
            <input show-password class="form-control" id="password" type="password" formControlName="password">
          </div>
          </form>

private createForm() {
        this.loginForm = this.fb.group({ 
            email: ['', Validators.required],
            password: ['', Validators.required]
        });

<form [connect]="['advertiser', 'campaign', 'campaign']">
    <div class="input-container">
        <input
            ngControl
            ngModel
            class="form-control"
            type="text"
            name="name">
    </div>
</form>

<form [connect]="['level','detail']">

I got an console error like if the connect directive is not loaded

### Stack Trace/Error Message:



### Additional Notes:
(optional)

Im defining a module for my component where Im loading the necessary modules:

ngAfterContentInit() {
    Promise.resolve().then(() => {
      this.resetState();

      this.stateSubscription = this.store.subscribe(() => {
        this.formChangedSoOmitNextChange = true;              // SET TRUE HERE
        this.resetState()
      });

      Promise.resolve().then(() => {
        this.formSubscription = (<any>this.form.valueChanges)
          .debounceTime(0)
          .subscribe((values: any) => {
            if (this.formChangedSoOmitNextChange) {
              this.formChangedSoOmitNextChange = false;       // SET FALSE HERE
            } else this.publish(values)            
          });
      });
    });
  }

<input
          class="form-control border-none"
          name="chairs"
          required
          min="0"
          [ngModel]="(woodshopState$ | async).data.chairs | number: '1.0-0' | numberHideZero"
        >

switch (action.type) {
    case '@@angular-redux/form/FORM_CHANGED':
      return <IWoodshopState>{
        ...state,
        data: {
          ...state.data,
          chairs: has('chairs', action.payload.value)
          ? toNumber(action.payload.value.chairs)
          : state.data.chairs,
        },
      };

<div class="form-panel">
  <div class="steps-panel">
    <div class="step" *ngFor="let step of steps; let i = index; let isLast = last" [ngClass]="{current: i + 1 == (addClientForm$ | async)?.currentPosition, pass: i + 1 < (addClientForm$ | async)?.currentPosition}">
      <div class="circle-holder">
        <div class="circle">
          <span *ngIf="i + 1 >= (addClientForm$ | async)?.currentPosition">{{i + 1}}</span>
          <md-icon *ngIf="i + 1 < (addClientForm$ | async)?.currentPosition">done</md-icon>
        </div>
        <div class="label">{{step}}</div>
      </div>
      <div *ngIf="!isLast" class="line"></div>
    </div>
  </div>
  <ng-container [ngSwitch]="(addClientForm$ | async)?.currentPosition">
    <form class="form" *ngSwitchCase="1" [connect]="['hqAddClientForm', 'clientDetails']">
      <div class="regular-input-holder">
        <div class="label">שם העסק</div>
        <input type="text" name="businessName" ngControl ngModel>
      </div>
      <div class="regular-input-holder">
        <div class="label">מספר העסק</div>
        <input type="text" name="businessNumber" ngControl ngModel>
      </div>
      <div class="regular-input-holder">
        <div class="label">כתובת</div>
        <input type="text" name="address" ngControl ngModel>
      </div>
      <div class="regular-input-holder">
        <div class="label">טלפון</div>
        <input type="text" name="phone" ngControl ngModel>
      </div>
      <div class="regular-input-holder">
        <div class="label">פקס</div>
        <input type="text" name="fax" ngControl ngModel>
      </div>
      <div class="save-and-continue">
        <button md-raised-button class="md-primary-button" (click)="saveContinue()">
          <md-icon>done</md-icon>שמור והמשך
        </button>
      </div>
    </form>
    <form class="form" *ngSwitchCase="2" [connect]="['hqAddClientForm', 'paymentDetails']">
      <div class="regular-input-holder">
        <div class="label">אופן תשלום</div>
        <input type="text" name="paymentMethod" ngControl ngModel>
      </div>
      <div class="regular-input-holder">
        <div class="label">אחוזי הנחה</div>
        <input type="text" name="discountPercentage" ngControl ngModel>
      </div>
      <div class="save-and-continue">
        <button md-raised-button class="md-primary-button" (click)="saveContinue()">
          <md-icon>done</md-icon>שמור והמשך
        </button>
      </div>
    </form>
    <ng-container *ngSwitchCase="3">
      <form class="form" [connect]="['hqAddClientForm', 'managers', 'tmp']">
        <div class="regular-input-holder">
          <div class="label">שם ושם משפחה</div>
          <input type="text" name="firstAndLastName" ngControl ngModel>
        </div>
        <div class="regular-input-holder">
          <div class="label">אימייל</div>
          <input type="email" name="email" ngControl ngModel>
        </div>
        <div class="regular-input-holder">
          <div class="label">נייד</div>
          <input type="phone" name="phone" ngControl ngModel>
        </div>
        <div class="save-and-continue">
          <button md-raised-button class="md-primary-button" (click)="addManager()">
            <md-icon>add</md-icon>הוספת מנהל
          </button>
        </div>
      </form>
      <div class="managers">
        <div class="manager" *ngFor="let manager of (addClientForm$ | async)?.managers?.managers">
          <div class="info">
            <div class="full-name">{{manager.firstAndLastName}}</div>
            <div class="phone-email">
              <span>{{manager.phone}}</span>
              <span>{{manager.email}}</span>
            </div>
          </div>
          <md-icon class="edit">edit</md-icon>
        </div>
      </div>
      <div class="save-and-continue">
        <button md-raised-button class="md-primary-button" (click)="saveContinue()">
          <md-icon>done</md-icon>שמור והמשך
        </button>
      </div>
    </ng-container>
    <div class="system-type form" *ngSwitchCase="4">
      <div class="switch-buttons">
        <div class="button-option" [ngClass]="{clicked: (addClientForm$ | async)?.clientSystemType?.type === 'shifts'}" (click)="toggleSystemType()">משמרות</div>
        <div class="button-option" [ngClass]="{clicked: (addClientForm$ | async)?.clientSystemType?.type === 'general'}" (click)="toggleSystemType()">כללי</div>
      </div>
      <form *ngIf="(addClientForm$ | async)?.clientSystemType?.type === 'general'" class="form" [connect]="['hqAddClientForm', 'clientSystemType', 'general']">
        <div class="regular-input-holder">
          <div class="label">סוג לוח</div>
          <input type="text" name="calendarType" ngControl ngModel>
        </div>
      </form>
      <form *ngIf="(addClientForm$ | async)?.clientSystemType?.type === 'shifts'" class="form" [connect]="['hqAddClientForm', 'clientSystemType', 'shiftsType']">
        <!-- ERROR HERE -->
        <ng-template connectArray let-index connectArrayOf="shifts">
          <div class="regular-input-holder" [ngModelGroup]="index">
            <div class="header">משמרת {{index + 1}}</div>
            <select ngControl ngModel name="arrivalTime">
              <option *ngFor="let num of times" [value]="num">{{num}}</option>
            </select>
            <select ngControl ngModel name="departureTime">
              <option *ngFor="let num of times" [value]="num">{{num}}</option>
            </select>
          </div>
        </ng-template>
       <!-- END ERROR HERE -->
      </form>
      <div class="save-and-continue">
        <button md-raised-button class="md-primary-button" (click)="saveContinue()">
          <md-icon>done</md-icon>שמור והמשך
        </button>
      </div>
    </div>
  </ng-container>
</div>

export interface HQAddClientForm {
	currentPosition: number,
	clientDetails: {
		businessName: string,
		businessNumber: number,
		// belongsTo: string,
		// businessType: string,
		address: string,
		phone: string,
		fax: string,
	},
	paymentDetails: {
		paymentMethod: string,
		discountPercentage: number
	},
	managers: {
		tmp: HQClientManager,
		managers: HQClientManager[]
	},
	clientSystemType: {
		type: 'general' | 'shifts',
		generalType: {
			calendarType: string
		},
               // --- ERROR HERE ---
		shiftsType: {
			numberOfShifts: number,
			shifts: {
				arrivalTime: string,
				departureTime: string
			}[]
		}
               // --- END ERROR HERE ---
	},
	routes: {
		tmp: HQClientRoute,
		routes: HQClientRoute[]
	}
}

export interface HQClientManager {
	firstAndLastName: string,
	email: string,
	phone: string
}

export interface HQClientRoute {
	origin: string[],
	destination: string[],
	totalKM: number,
	permanentDriver: {
		driverKey: string,
		name: string
	},
	priceExpiritionDate: string,
	driverPayment: {
		amount: number,
		incluedTax: boolean
	},
	totalPayment: {
		amount: number,
		incluedTax: boolean
	}
}

export const initHQAddClientForm: HQAddClientForm = {
	currentPosition: 1,
	clientDetails: {
		businessName: null,
		businessNumber: null,
		// belongsTo: null,
		// businessType: null,
		address: null,
		phone: null,
		fax: null,
	},
	paymentDetails: {
		paymentMethod: null,
		discountPercentage: null
	},
	managers: {
		tmp: {
			firstAndLastName: null,
			email: null,
			phone: null
		},
		managers: []
	},
	clientSystemType: {
		type: 'shifts',
		generalType: {
			calendarType: null
		},
               // --- ERROR HERE ---
		shiftsType: {
			numberOfShifts: null,
			shifts: [{
				arrivalTime: null,
				departureTime: null
			}]
		}
               // --- END ERROR HERE ---
	},
	routes: {
		tmp: {
			origin: [],
			destination: [],
			totalKM: 0,
			permanentDriver: {
				driverKey: null,
				name: null
			},
			priceExpiritionDate: null,
			driverPayment: {
				amount: 0,
				incluedTax: null
			},
			totalPayment: {
				amount: 0,
				incluedTax: null
			}
		},
		routes: []
	}
}

core.es5.js:1084 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'arrivalTime' of undefined
TypeError: Cannot read property 'arrivalTime' of undefined
    at http://localhost:4200/vendor.bundle.js:30431:22
    at http://localhost:4200/vendor.bundle.js:30356:66
    at Array.forEach (native)
    at FormGroup._forEachChild (http://localhost:4200/vendor.bundle.js:30356:36)
    at FormGroup._checkAllValuesPresent (http://localhost:4200/vendor.bundle.js:30430:14)
    at FormGroup.setValue (http://localhost:4200/vendor.bundle.js:30237:14)
    at http://localhost:4200/vendor.bundle.js:30936:18
    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:156556:26)
    at Object.onInvoke (http://localhost:4200/vendor.bundle.js:8978:37)
    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:156555:32)
    at http://localhost:4200/vendor.bundle.js:30431:22
    at http://localhost:4200/vendor.bundle.js:30356:66
    at Array.forEach (native)
    at FormGroup._forEachChild (http://localhost:4200/vendor.bundle.js:30356:36)
    at FormGroup._checkAllValuesPresent (http://localhost:4200/vendor.bundle.js:30430:14)
    at FormGroup.setValue (http://localhost:4200/vendor.bundle.js:30237:14)
    at http://localhost:4200/vendor.bundle.js:30936:18
    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:156556:26)
    at Object.onInvoke (http://localhost:4200/vendor.bundle.js:8978:37)
    at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:156555:32)
    at resolvePromise (http://localhost:4200/vendor.bundle.js:156934:31)
    at http://localhost:4200/vendor.bundle.js:156985:17
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:156589:31)
    at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:8969:37)
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:156588:36)
    at Zone.runTask (http://localhost:4200/vendor.bundle.js:156356:47)
    at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:156749:35)
    at <anonymous>

ERROR in ~/node_modules/@angular-redux/form/source/state.ts (79,32): Argument of type 'null' is not assignable to parameter of type 'string | number'.
 
ERROR ~/node_modules/@angular-redux/form/source/state.ts (100,39): Argument of type 'null' is not assignable to parameter of type 'string | number'.
 
ERROR in ~/node_modules/@angular-redux/form/source/compose-reducers.ts (15,7): Type 'null' is not assignable to type 'State'.
 
ERROR in ~/node_modules/@angular-redux/form/source/compose-reducers.ts (27,42): Argument of type 'null' is not assignable to parameter of type 'string | number'.
 
ERROR in ~/node_modules/@angular-redux/form/source/form-reducer.ts (19,20): Type 'Keyed<string, any> | RootState | undefined' is not assignable to type 'Keyed<string, any> | RootState'.
  Type 'undefined' is not assignable to type 'Keyed<string, any> | RootState'.
 
ERROR in ~/node_modules/@angular-redux/form/source/shims.ts (13,14): Type 'string[] | null' is not an array type.
 
ERROR in ~/node_modules/@angular-redux/form/source/shims.ts (18,24): Type 'null' is not assignable to type 'ControlValueAccessor'.
 
ERROR in ~/node_modules/@angular-redux/form/source/shims.ts (42,7): Variable 'customAccessor' is used before being assigned.
 
ERROR in ~/node_modules/@angular-redux/form/source/shims.ts (43,7): Variable 'builtinAccessor' is used before being assigned.
 
ERROR in ~/node_modules/@angular-redux/form/source/shims.ts (44,7): Variable 'defaultAccessor' is used before being assigned.
 
ERROR in ~/node_modules/@angular-redux/form/source/connect-array.ts (120,5): Type 'ValidatorFn | null' is not assignable to type 'ValidatorFn'.
  Type 'null' is not assignable to type 'ValidatorFn'.
 
ERROR in ~/node_modules/@angular-redux/form/source/connect-array.ts (124,5): Type 'AsyncValidatorFn | null' is not assignable to type 'AsyncValidatorFn'.
  Type 'null' is not assignable to type 'AsyncValidatorFn'.

"@angular-redux/form": "^6.7.0",
"@angular-redux/store": "^7.1.0",
"@angular/animations": "^5.2.4",
"@angular/cdk": "^5.2.1",
"@angular/common": "^5.2.4",
"@angular/compiler": "^5.2.4",
"@angular/core": "^5.2.4",
"@angular/forms": "^5.2.4",
"@angular/http": "^5.2.4",
"@angular/material": "^5.2.1",
"@angular/platform-browser": "^5.2.4",
"@angular/platform-browser-dynamic": "^5.2.4",
"@angular/router": "^5.2.4",
"@angular/cli": "^1.6.8",
"@angular/compiler-cli": "^5.2.4",

ERROR in ./source/tests.entry.ts
Module build failed: TypeError: Cannot set property 'babelOptions' of undefined
    at Object.ngcLoader (/Users/sdavenpo/code/angular-redux/ng2-redux-form/node_modules/@ngtools/webpack/src/loader.js:200:34)
28 01 2017 22:45:11.188:ERROR [karma]: { Error: no such file or directory
    at MemoryFileSystem.readFileSync (/Users/sdavenpo/code/angular-redux/ng2-redux-form/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
    at MemoryFileSystem.(anonymous function) [as readFile] (/Users/sdavenpo/code/angular-redux/ng2-redux-form/node_modules/memory-fs/lib/MemoryFileSystem.js:300:34)
    at doRead (/Users/sdavenpo/code/angular-redux/ng2-redux-form/node_modules/karma-webpack/lib/karma-webpack.js:201:29)
    at Plugin.readFile (/Users/sdavenpo/code/angular-redux/ng2-redux-form/node_modules/karma-webpack/lib/karma-webpack.js:205:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
  code: 'ENOENT',