feat(aot): Support AoT - #223 (#226)

* Start adding support for AoT
* Add dev dependencies for angular compiler
* Update tsconfig to tell ngc to emit metadata

Sorry for the delay on this, was hoping to get AoT working for
decorators also - but there seems to be some challenges around that.

* Update build to use ngc - metadata.json is now produced
* Fix `Unexpected value 'NgReduxModule' imported`
* NgReduxModule

```js
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgReduxModule, NgRedux } from 'ng2-redux';
import { IAppState } from './appstate';
import { rootReducer } from './store';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NgReduxModule.forRoot(),
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(ngRedux: NgRedux<IAppState>) {

    ngRedux.configureStore(rootReducer,{});
  }
}

```

The DevTools provider is not provider by default with the
`NgReduxModule`, as you may not want to include this for production
builds. To use `DevToolsExtension`, it is the same as before - and still
need to include it in your providers.

```js
import { NgReduxModule, DevToolsExtension }

@NgModule({
  providerS: [DevToolsExtension]
})
export class AppModule {
  constructor(ngRedux:NgRedux<IAppState>, devTools:DevToolsExtension) {
    // config as before
  }
}
```

**IMPORTANT NOTE ABOUT AOT**

If using the ngc compiler and AoT compilation - `@select` decorators
will not work. If you want to use the ngc compiler (either directly, or
via angular-cli), and want to use the `@select` - you will need to use
the `--aot false` flag.

If you want to use AoT - the build process will work, but decorators
will silently stop working. If you want to use AoT.

**before**

```js
import { select } from 'ng2-redux';
export class MyComponent {
  @select() thing$:Observable<string>;
}
```

**after**

```js
import { NgRedux } from 'ng2-redux';
export class MyComponent {
  thing$:Observable<string>;
  constructor(private ngRedux:NgRedux<MyAppState>) {

  }
  ngOnInit() {
    this.thing$ = this.ngRedux.select (n => n.thing);
  }
}
```

We are big fans of how the `@select` works - and high priority to get
this working, but it seems to possibly be a limitation of the compiler.
Any feedback / help / suggestions to try and get this working with AoT
would be greatly appreciated.

CHANGELOG.md

@@ -1,3 +1,92 @@
+# 4.0.0-beta.6
+
+### Fixes / Features 
+
+Sorry for the delay on this, was hoping to get AoT working for decorators also - but there seems to be some challenges around that.
+
+* Update build to use ngc - metadata.json is now produced
+* Fix `Unexpected value 'NgReduxModule' imported`
+* NgReduxModule
+
+### Using NgReduxModule 
+
+```js
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+import { NgReduxModule, NgRedux } from 'ng2-redux';
+import { IAppState } from './appstate';
+import { rootReducer } from './store';
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    NgReduxModule.forRoot(),
+    BrowserModule,
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { 
+  constructor(ngRedux: NgRedux<IAppState>) {
+
+    ngRedux.configureStore(rootReducer,{});
+  }
+}
+
+```
+
+### Dev Tools 
+
+The DevTools provider is not provider by default with the `NgReduxModule`, as you may not want to include this for production builds. To use `DevToolsExtension`, it is the same as before - and still need to include it in your providers.
+
+```js
+import { NgReduxModule, DevToolsExtension }
+
+@NgModule({
+  providerS: [DevToolsExtension]
+})
+export class AppModule {
+  constructor(ngRedux:NgRedux<IAppState>, devTools:DevToolsExtension) {
+    // config as before 
+  }
+}
+```
+
+**IMPORTANT NOTE ABOUT AOT**
+
+If using the ngc compiler and AoT compilation - `@select` decorators will not work. If you want to use the ngc compiler (either directly, or via angular-cli), and want to use the `@select` - you will need to use the `--aot false` flag. 
+
+If you want to use AoT - the build process will work, but decorators will silently stop working. If you want to use AoT.
+
+**before**
+
+```js 
+import { select } from 'ng2-redux';
+export class MyComponent {
+  @select() thing$:Observable<string>; 
+}
+```
+
+**after**
+
+```js
+import { NgRedux } from 'ng2-redux';
+export class MyComponent {
+  thing$:Observable<string>;
+  constructor(private ngRedux:NgRedux<MyAppState>) {
+
+  }
+  ngOnInit() {
+    this.thing$ = this.ngRedux.select (n => n.thing);
+  }
+}
+```
+
+We are big fans of how the `@select` works - and high priority to get this working, but it seems to possibly be a limitation of the compiler. Any feedback / help / suggestions to try and get this working with AoT would be greatly appreciated.
+
+
 # 3.3.9
 
 ### Fixes

examples/counter/components/counter-info.component.ts

@@ -1,8 +1,10 @@
 import { Component, Input } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
-import { select } from 'ng2-redux';
+import { select as select } from 'ng2-redux';
 import 'rxjs/add/operator/combineLatest';
-
+//let select = select_x;
+export let x = state => state.counter;
+export let  y = state => state.counter * 2;
 interface ICoord {
   x: number;
   y: number;
@@ -21,9 +23,9 @@ interface ICoord {
 })
 export class CounterInfo {
 
-  @select(state => state.counter) funcCounter$: Observable<number>;
+  @select(x) funcCounter$: Observable<number>;
   @select('counter') stringKey$: Observable<number>;
-  @select(state => state.counter * 2) counterX2$: Observable<number>;
+  @select(y) counterX2$: Observable<number>;
   foo: ICoord;
 
   ngOnInit() {

examples/counter/components/counter.component.ts

@@ -25,5 +25,5 @@ export class Counter {
   @select([ 'pathDemo', 'foo' ]) foo$: Observable<Object>;
   @select([ 'pathDemo', 'foo', 'bar', 0 ]) bar$: Observable<number>;
 
-  constructor(private actions: CounterActions) {}
+  constructor(public actions: CounterActions) {}
 }

examples/counter/components/search.component.ts

@@ -28,7 +28,7 @@ export class Search {
   keyword: string;
 
   constructor(
-    private actions: SearchActions,
+    public actions: SearchActions,
     private ngRedux: NgRedux<IAppState>) { }
 
   ngOnInit() {

examples/counter/package.json

@@ -44,7 +44,7 @@
     "awesome-typescript-loader": "^2.2.1",
     "cross-env": "^1.0.7",
     "node-libs-browser": "^0.5.2",
-    "typescript": "2.0.0",
+    "typescript": "2.0.2",
     "webpack": "^1.9.11",
     "webpack-dev-server": "^1.9.0"
   }

examples/counter/store/index.ts

@@ -4,7 +4,7 @@ import { counterReducer } from './counter.reducer';
 import { IPathDemoData, pathDemoReducer } from './path-demo.reducer';
 import { ISearchState, searchReducer } from './search.reducer';
 
-export interface IAppState {
+export class IAppState {
   counter?: number;
   pathDemo?: IPathDemoData;
   search?: ISearchState;

package.json

@@ -1,10 +1,12 @@
 {
   "name": "ng2-redux",
-  "version": "4.0.0-beta.3",
+  "version": "4.0.0-beta.6-pre-1",
   "description": "Angular 2 bindings for Redux",
   "main": "./lib/index.js",
   "scripts": {
-    "build": "rimraf ./lib; npm uninstall @types/chai @types/sinon-chai; tsc; npm install @types/chai@3.4.31 @types/sinon-chai@2.7.26",
+    "prebuild": "rimraf ./lib; npm uninstall @types/chai @types/sinon-chai;",
+    "postbuild": "npm install @types/chai@3.4.31 @types/sinon-chai@2.7.26; rimraf \"src/**/*.ngfactory.ts\"",
+    "build": "ngc -p tsconfig.json;",
     "test": "rimraf coverage && npm run lint && npm run cover",
     "mocha": "mocha --opts mocha.opts",
     "lint": "tslint 'src/**/*.ts' 'examples/counter/**.ts' --exclude 'examples/counter/node_modules'",
@@ -48,12 +50,18 @@
   "homepage": "https://github.com/angular-redux/ng2-redux#readme",
   "devDependencies": {
     "@angular/core": "^2.0.0",
+    "@angular/common": "^2.0.0",
     "@types/chai": "^3.4.31",
     "@types/es6-shim": "0.0.30",
     "@types/mocha": "^2.2.30",
     "@types/node": "^6.0.36",
     "@types/sinon": "^1.16.28",
     "@types/sinon-chai": "^2.7.26",
+    "@angular/compiler": "^2.0.0",
+    "@angular/compiler-cli": "^0.6.0",
+    "@angular/platform-browser": "^2.0.0",
+    "@angular/platform-browser-dynamic": "^2.0.0",
+    "@angular/platform-server": "^2.0.0",
     "awesome-typescript-loader": "^2.2.1",
     "chai": "^3.5.0",
     "es6-shim": "^0.35.0",
@@ -69,7 +77,7 @@
     "symbol-observable": "^1.0.1",
     "ts-node": "^1.3.0",
     "tslint": "^3.11.0",
-    "typescript": "^2.0.0",
+    "typescript": "^2.0.2",
     "zone.js": "^0.6.21"
   },
   "peerDependencies": {
@@ -103,4 +111,4 @@
     "functions": 60,
     "statements": 60
   }
-}
+}

src/index.ts

@@ -2,11 +2,19 @@ import { NgModule } from '@angular/core';
 import { NgRedux } from './components/ng-redux';
 import { DevToolsExtension } from './components/dev-tools';
 import { select } from './decorators/select';
+import { ModuleWithProviders } from '@angular/core';
 
 @NgModule({
-  providers: [ NgRedux, DevToolsExtension ],
+
 })
-class NgReduxModule {}
+class NgReduxModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: NgReduxModule,
+      providers: [NgRedux]
+    };
+  }
+}
 
 export {
   NgReduxModule,

src/utils/wrap-action-creators.ts

@@ -3,7 +3,9 @@ import { ActionCreator,
   bindActionCreators as bac,
   Dispatch } from 'redux';
 
-export default function wrapActionCreator
+function wrapActionCreator
   <T extends ActionCreator<T> | ActionCreatorsMapObject>(actionCreators) {
   return (dispatch: Dispatch<any>): T => bac(actionCreators, dispatch);
 }
+export default wrapActionCreator;
+

tsconfig.json

@@ -19,5 +19,8 @@
     "lib",
     "examples",
     "**/*.spec.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "strictMetadataEmit": true
+  }
 }