* Upgrade to Angular RC6

* Refactor code based on changes from RC5 to RC6
* Use NgModule now in both examples and README.md since bootstrap() is
  deprecated
* Load .js files through Babel because RC6 exports ES6 JS code

Author: clbond

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

README.md

@@ -52,34 +52,44 @@ approaches, but if you are already using
 it into your project, then you would do something like this:
 
 ```typescript
-import { provideFormConnect } from 'ng2-redux-form';
-
-const ngRedux = new NgRedux<AppState>();
-
-ngRedux.configureStore(reducer, myInitialState, [], []);
-
-bootstrap(MyApplication, [
-  provide(NgRedux, {useValue: ngRedux}),
-  provideForms(),
-  disableDeprecatedForms(),
-  provideFormConnect(ngRedux)
-]);
+@NgModule({
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule,
+    FormsModule,
+    NgReduxForms,
+  ],
+  providers: [
+    NgRedux,
+  ],
+  bootstrap: [MyApplicationComponent]
+})
+export class ExampleModule {}
 ```
 
 Or if you are using Redux without ng2-redux, then your bootstrap call would look
 more like this (substitute your own store creation code):
 
 ```typescript
-import { provideFormConnect } from 'ng2-redux-form';
+import {provideFormConnect} from 'ng2-redux-form';
 
 const storeCreator = compose(applyMiddleware(logger))(createStore);
 const store = create(reducers, <MyApplicationState> {});
 
-bootstrap(MyApplication, [
-  disableDeprecatedForms(),
-  provideForms(),
-  provideFormConnect(store),
-]);
+@NgModule({
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule,
+    FormsModule,
+    NgReduxForms,
+  ],
+  providers: [
+    NgRedux,
+    provideFormConnect(store),
+  ],
+  bootstrap: [MyApplicationComponent]
+})
+export class ExampleModule {}
 ```
 
 (Note that in these examples, we are explicitly disabling the old Angular 2 forms
@@ -218,7 +228,7 @@ your data when the user updates form inputs, then you should use this default re
 To use it, you need to combine it with your existing reducers like so:
 
 ```typescript
-import { composeReducers, defaultFormReducer } from 'ng2-redux-form';
+import {composeReducers, defaultFormReducer} from 'ng2-redux-form';
 
 const reducer = composeReducers(
   defaultFormReducer(),

examples/.babelrc

@@ -0,0 +1 @@
+../.babelrc

examples/module-links.sh

@@ -8,7 +8,9 @@ fi;
 pkgs=`cat <<EOF
 @angular
 awesome-typescript-loader
+babel
 babel-core
+babel-loader
 babel-polyfill
 immutable
 jasmine-core

examples/package.json

@@ -8,9 +8,10 @@
     "preinstall": "./module-links.sh"
   },
   "devDependencies": {
+    "@angular/upgrade": "^2.0.0-rc.6",
+    "cross-env": "^2.0.0",
     "html-webpack-plugin": "^2.22.0",
     "raw-loader": "^0.5.1",
-    "cross-env": "^2.0.0",
     "webpack-dev-server": "^1.14.1"
   }
 }

examples/source/index.ts

@@ -4,27 +4,27 @@ import 'zone.js/dist/zone';
 import 'zone.js/dist/long-stack-trace-zone';
 import 'ts-helpers';
 
-import {
-  provideForms,
-  REACTIVE_FORM_DIRECTIVES,
-  disableDeprecatedForms,
-  FormGroup,
-} from '@angular/forms';
-import { Component, provide } from '@angular/core';
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {BrowserModule} from '@angular/platform-browser';
+import {Component, NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+
+import {Map, fromJS} from 'immutable';
 
-import { Map, fromJS } from 'immutable';
+import {NgRedux, select} from 'ng2-redux';
 
-import { NgRedux, select } from 'ng2-redux';
+import {combineReducers} from 'redux';
 
-import { combineReducers } from 'redux';
+import {
+  Connect,
+  ConnectArray,
+  FormStore,
+  NgReduxForms,
+  composeReducers,
+  defaultFormReducer,
+} from '../../source';
 
-import { Connect } from '../../source/connect';
-import { ConnectArray } from '../../source/connect-array';
-import { composeReducers } from '../../source/compose-reducers';
-import { defaultFormReducer } from '../../source/form-reducer';
-import { provideFormConnect } from '../../source/configure';
-import { logger } from '../../source/tests.utilities';
+import {logger} from '../../source/tests.utilities';
 
 @Component({
   selector: 'form-example',
@@ -74,11 +74,6 @@ import { logger } from '../../source/tests.utilities';
       </div>
     </div>
   `,
-  directives: [
-    Connect,
-    ConnectArray,
-    REACTIVE_FORM_DIRECTIVES,
-  ],
   styles: [require('./index.css')]
 })
 export class FormExample {
@@ -96,10 +91,6 @@ export class FormExample {
       type: 'ADD_FORM_ENTRY'
     });
   }
-
-  stringify(obj) {
-    return JSON.stringify(obj);
-  }
 }
 
 @Component({
@@ -117,7 +108,6 @@ export class FormExample {
       </li>
     </ul>
   `,
-  directives: [Connect, REACTIVE_FORM_DIRECTIVES]
 })
 export class TodoExample {
   @select(s => s.todos.get('list')) private list;
@@ -142,9 +132,12 @@ export class TodoExample {
     <form-example></form-example>
     <todo-example></todo-example>
   `,
-  directives: [FormExample, TodoExample]
 })
-export class Example {}
+export class Example {
+  constructor(private ngRedux: NgRedux<AppState>) {
+    ngRedux.configureStore(reducer, {form1, todos}, [logger], []);
+  }
+}
 
 interface AppState {
   form1?: {
@@ -215,13 +208,23 @@ function todoReducer(state = todos, action: {type: string, payload?}) {
   return state;
 }
 
-const ngRedux = new NgRedux<AppState>();
-
-ngRedux.configureStore(reducer, {form1, todos}, [logger], []);
+@NgModule({
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule,
+    FormsModule,
+    NgReduxForms,
+  ],
+  declarations: [
+    FormExample,
+    TodoExample,
+    Example,
+  ],
+  providers: [
+    NgRedux,
+  ],
+  bootstrap: [Example]
+})
+export class ExampleModule {}
 
-bootstrap(Example, [
-  provide(NgRedux, {useValue: ngRedux}),
-  disableDeprecatedForms(),
-  provideForms(),
-  provideFormConnect(ngRedux),
-]);
+platformBrowserDynamic().bootstrapModule(ExampleModule);

examples/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es2015",
+    "target": "es6",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,

index.d.ts

@@ -1,10 +1,10 @@
 declare namespace 'ng2-redux-form' {
-  import { Provider } from '@angular/core';
-  import { QueryList } from '@angular/core';
-  import { NgForm, NgControl } from '@angular/forms';
-  import { Action, Store } from 'redux';
-  import { NgRedux } from 'ng2-redux';
-  import { Iterable } from 'immutable';
+  import {Provider} from '@angular/core';
+  import {QueryList} from '@angular/core';
+  import {NgForm, NgControl} from '@angular/forms';
+  import {Action, Store} from 'redux';
+  import {NgRedux} from 'ng2-redux';
+  import {Iterable} from 'immutable';
 
   export const provideFormConnect: <T>(arg: Store<T> | NgRedux<T>) => Provider[];
 

package.json

@@ -2,14 +2,16 @@
   "name": "ng2-redux-form",
   "description": "Build Angular 2 forms with Redux",
   "devDependencies": {
-    "@angular/common": "^2.0.0-rc.5",
-    "@angular/compiler": "^2.0.0-rc.5",
-    "@angular/core": "^2.0.0-rc.5",
-    "@angular/forms": "^0.3.0",
-    "@angular/platform-browser": "^2.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.5",
+    "@angular/common": "2.0.0-rc.6",
+    "@angular/compiler": "2.0.0-rc.6",
+    "@angular/core": "2.0.0-rc.6",
+    "@angular/forms": "2.0.0-rc.6",
+    "@angular/platform-browser": "2.0.0-rc.6",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
     "awesome-typescript-loader": "1.1.1",
     "babel-core": "^6.11.4",
+    "babel-loader": "^6.2.5",
+    "babel-preset-es2015": "^6.14.0",
     "chai": "^3.5.0",
     "cross-env": "^2.0.0",
     "immutable": "^3.8.1",
@@ -33,7 +35,7 @@
     "rxjs": "^5.0.0-beta.6",
     "ts-helpers": "^1.1.1",
     "typings": "^1.0",
-    "webpack": "^1.13.1",
+    "webpack": "1.13.1",
     "webpack-dev-middleware": "^1.6.1",
     "zone.js": "^0.6.12"
   },

source/compose-reducers.test.ts

@@ -1,4 +1,4 @@
-import { expect } from 'chai';
+import {expect} from 'chai';
 
 import {
   fromJS,
@@ -8,7 +8,7 @@ import {
   Set
 } from 'immutable';
 
-import { composeReducers } from './compose-reducers';
+import {composeReducers} from './compose-reducers';
 
 describe('composeReducers', () => {
   const compose = (s1, s2, s3) => {

source/compose-reducers.ts

@@ -1,9 +1,9 @@
-import { Reducer, Action } from 'redux';
+import {Reducer, Action} from 'redux';
 
-import { Iterable } from 'immutable';
+import {Iterable} from 'immutable';
 
-import { FormException } from './form-exception';
-import { State } from './state';
+import {FormException} from './form-exception';
+import {State} from './state';
 
 export const composeReducers =
     <State>(...reducers: Reducer<State>[]): Reducer<State> => {

source/configure.ts

@@ -1,24 +1,34 @@
-import {
-  Provider,
-  provide,
-} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {NgRedux} from 'ng2-redux';
 
-import { FormControl } from '@angular/forms';
-import { NgRedux } from 'ng2-redux';
-import { Store } from 'redux';
+import {
+  Action,
+  Store,
+} from 'redux';
 
-import { AbstractStore, FormStore } from './form-store';
+import {
+  AbstractStore,
+  FormStore,
+} from './form-store';
 
-export const provideFormConnect = <T>(arg: Store<T> | NgRedux<T>) => {
-  const abstractStore: AbstractStore<T> = {
-    dispatch: action => arg.dispatch(action),
-    getState: () => arg.getState(),
-    subscribe: fn => arg.subscribe(() => fn(arg.getState()))
-  };
+/// Use this function in your providers list if you are not using ng2-redux.
+/// This will allow you to provide a preexisting store that you have already
+/// configured, rather than letting ng2-redux creating one for you.
+export const provideReduxForms = <T>(store: Store<T> | NgRedux<T>) => {
+  const abstractStore = wrap(store);
 
   return [
-    provide(FormStore, {
-      useValue: new FormStore(abstractStore)
-    })
+    {provide: FormStore, useValue: new FormStore(<any> abstractStore)}
   ];
 };
+
+const wrap = <T>(store: Store<T> | NgRedux<T>): AbstractStore<T> => {
+  const dispatch = (action: Action) => store.dispatch(action);
+
+  const getState = () => <T> store.getState();
+
+  const subscribe =
+    (fn: (state: T) => void) => store.subscribe(() => fn(store.getState()));
+
+  return {dispatch, getState, subscribe};
+};

source/connect-array.ts

@@ -36,11 +36,11 @@ import {
   NG_VALIDATORS
 } from '@angular/forms/src/validators';
 
-import { Subscription } from 'rxjs';
+import {Subscription} from 'rxjs';
 
-import { Connect } from './connect';
-import { FormStore } from './form-store';
-import { State } from './state';
+import {Connect} from './connect';
+import {FormStore} from './form-store';
+import {State} from './state';
 
 export class ConnectArrayTemplate {
   constructor(
@@ -87,7 +87,11 @@ export class ConnectArray<RootState> extends ControlContainer {
   ngOnInit() {
     this.formDirective.form.addControl(this.key, this.array);
 
-    const ctrl = this.formDirective.form.find(this.path);
+    const ctrl = this.formDirective.form.get(this.path);
+    if (ctrl == null) {
+      throw new Error(`No control found for ${this.path}`);
+    }
+
     setUpFormContainer(<any> ctrl, this.formArray);
 
     ctrl.updateValueAndValidity({