Skip to content

Commit a6d7826

Browse files
e-schultzsmithad15
authored andcommitted
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.
1 parent c856f59 commit a6d7826

File tree

11 files changed

+128
-25
lines changed

11 files changed

+128
-25
lines changed

packages/store/CHANGELOG.md

+89
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,92 @@
1+
# 4.0.0-beta.6
2+
3+
### Fixes / Features
4+
5+
Sorry for the delay on this, was hoping to get AoT working for decorators also - but there seems to be some challenges around that.
6+
7+
* Update build to use ngc - metadata.json is now produced
8+
* Fix `Unexpected value 'NgReduxModule' imported`
9+
* NgReduxModule
10+
11+
### Using NgReduxModule
12+
13+
```js
14+
import { BrowserModule } from '@angular/platform-browser';
15+
import { NgModule } from '@angular/core';
16+
import { AppComponent } from './app.component';
17+
import { NgReduxModule, NgRedux } from 'ng2-redux';
18+
import { IAppState } from './appstate';
19+
import { rootReducer } from './store';
20+
@NgModule({
21+
declarations: [
22+
AppComponent
23+
],
24+
imports: [
25+
NgReduxModule.forRoot(),
26+
BrowserModule,
27+
],
28+
providers: [],
29+
bootstrap: [AppComponent]
30+
})
31+
export class AppModule {
32+
constructor(ngRedux: NgRedux<IAppState>) {
33+
34+
ngRedux.configureStore(rootReducer,{});
35+
}
36+
}
37+
38+
```
39+
40+
### Dev Tools
41+
42+
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.
43+
44+
```js
45+
import { NgReduxModule, DevToolsExtension }
46+
47+
@NgModule({
48+
providerS: [DevToolsExtension]
49+
})
50+
export class AppModule {
51+
constructor(ngRedux:NgRedux<IAppState>, devTools:DevToolsExtension) {
52+
// config as before
53+
}
54+
}
55+
```
56+
57+
**IMPORTANT NOTE ABOUT AOT**
58+
59+
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.
60+
61+
If you want to use AoT - the build process will work, but decorators will silently stop working. If you want to use AoT.
62+
63+
**before**
64+
65+
```js
66+
import { select } from 'ng2-redux';
67+
export class MyComponent {
68+
@select() thing$:Observable<string>;
69+
}
70+
```
71+
72+
**after**
73+
74+
```js
75+
import { NgRedux } from 'ng2-redux';
76+
export class MyComponent {
77+
thing$:Observable<string>;
78+
constructor(private ngRedux:NgRedux<MyAppState>) {
79+
80+
}
81+
ngOnInit() {
82+
this.thing$ = this.ngRedux.select (n => n.thing);
83+
}
84+
}
85+
```
86+
87+
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.
88+
89+
190
# 3.3.9
291

392
### Fixes

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

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { Component, Input } from '@angular/core';
22
import { Observable } from 'rxjs/Observable';
3-
import { select } from 'ng2-redux';
3+
import { select as select } from 'ng2-redux';
44
import 'rxjs/add/operator/combineLatest';
5-
5+
//let select = select_x;
6+
export let x = state => state.counter;
7+
export let y = state => state.counter * 2;
68
interface ICoord {
79
x: number;
810
y: number;
@@ -21,9 +23,9 @@ interface ICoord {
2123
})
2224
export class CounterInfo {
2325

24-
@select(state => state.counter) funcCounter$: Observable<number>;
26+
@select(x) funcCounter$: Observable<number>;
2527
@select('counter') stringKey$: Observable<number>;
26-
@select(state => state.counter * 2) counterX2$: Observable<number>;
28+
@select(y) counterX2$: Observable<number>;
2729
foo: ICoord;
2830

2931
ngOnInit() {

packages/store/examples/counter/components/counter.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,5 @@ export class Counter {
2525
@select([ 'pathDemo', 'foo' ]) foo$: Observable<Object>;
2626
@select([ 'pathDemo', 'foo', 'bar', 0 ]) bar$: Observable<number>;
2727

28-
constructor(private actions: CounterActions) {}
28+
constructor(public actions: CounterActions) {}
2929
}

packages/store/examples/counter/components/search.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export class Search {
2828
keyword: string;
2929

3030
constructor(
31-
private actions: SearchActions,
31+
public actions: SearchActions,
3232
private ngRedux: NgRedux<IAppState>) { }
3333

3434
ngOnInit() {

packages/store/examples/counter/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"awesome-typescript-loader": "^2.2.1",
4545
"cross-env": "^1.0.7",
4646
"node-libs-browser": "^0.5.2",
47-
"typescript": "2.0.0",
47+
"typescript": "2.0.2",
4848
"webpack": "^1.9.11",
4949
"webpack-dev-server": "^1.9.0"
5050
}

packages/store/examples/counter/store/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { counterReducer } from './counter.reducer';
44
import { IPathDemoData, pathDemoReducer } from './path-demo.reducer';
55
import { ISearchState, searchReducer } from './search.reducer';
66

7-
export interface IAppState {
7+
export class IAppState {
88
counter?: number;
99
pathDemo?: IPathDemoData;
1010
search?: ISearchState;

packages/store/package.json

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
{
22
"name": "ng2-redux",
3-
"version": "4.0.0-beta.3",
3+
"version": "4.0.0-beta.6-pre-1",
44
"description": "Angular 2 bindings for Redux",
55
"main": "./lib/index.js",
66
"scripts": {
7-
"build": "rimraf ./lib; npm uninstall @types/chai @types/sinon-chai; tsc; npm install @types/[email protected] @types/[email protected]",
7+
"prebuild": "rimraf ./lib; npm uninstall @types/chai @types/sinon-chai;",
8+
"postbuild": "npm install @types/[email protected] @types/[email protected]; rimraf \"src/**/*.ngfactory.ts\"",
9+
"build": "ngc -p tsconfig.json;",
810
"test": "rimraf coverage && npm run lint && npm run cover",
911
"mocha": "mocha --opts mocha.opts",
1012
"lint": "tslint 'src/**/*.ts' 'examples/counter/**.ts' --exclude 'examples/counter/node_modules'",
@@ -48,12 +50,18 @@
4850
"homepage": "https://github.com/angular-redux/ng2-redux#readme",
4951
"devDependencies": {
5052
"@angular/core": "^2.0.0",
53+
"@angular/common": "^2.0.0",
5154
"@types/chai": "^3.4.31",
5255
"@types/es6-shim": "0.0.30",
5356
"@types/mocha": "^2.2.30",
5457
"@types/node": "^6.0.36",
5558
"@types/sinon": "^1.16.28",
5659
"@types/sinon-chai": "^2.7.26",
60+
"@angular/compiler": "^2.0.0",
61+
"@angular/compiler-cli": "^0.6.0",
62+
"@angular/platform-browser": "^2.0.0",
63+
"@angular/platform-browser-dynamic": "^2.0.0",
64+
"@angular/platform-server": "^2.0.0",
5765
"awesome-typescript-loader": "^2.2.1",
5866
"chai": "^3.5.0",
5967
"es6-shim": "^0.35.0",
@@ -69,7 +77,7 @@
6977
"symbol-observable": "^1.0.1",
7078
"ts-node": "^1.3.0",
7179
"tslint": "^3.11.0",
72-
"typescript": "^2.0.0",
80+
"typescript": "^2.0.2",
7381
"zone.js": "^0.6.21"
7482
},
7583
"peerDependencies": {
@@ -103,4 +111,4 @@
103111
"functions": 60,
104112
"statements": 60
105113
}
106-
}
114+
}

packages/store/src/components/ng-redux.module.ts

-9
This file was deleted.

packages/store/src/index.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,19 @@ import { NgModule } from '@angular/core';
22
import { NgRedux } from './components/ng-redux';
33
import { DevToolsExtension } from './components/dev-tools';
44
import { select } from './decorators/select';
5+
import { ModuleWithProviders } from '@angular/core';
56

67
@NgModule({
7-
providers: [ NgRedux, DevToolsExtension ],
8+
89
})
9-
class NgReduxModule {}
10+
class NgReduxModule {
11+
static forRoot(): ModuleWithProviders {
12+
return {
13+
ngModule: NgReduxModule,
14+
providers: [NgRedux]
15+
};
16+
}
17+
}
1018

1119
export {
1220
NgReduxModule,

packages/store/src/utils/wrap-action-creators.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { ActionCreator,
33
bindActionCreators as bac,
44
Dispatch } from 'redux';
55

6-
export default function wrapActionCreator
6+
function wrapActionCreator
77
<T extends ActionCreator<T> | ActionCreatorsMapObject>(actionCreators) {
88
return (dispatch: Dispatch<any>): T => bac(actionCreators, dispatch);
99
}
10+
export default wrapActionCreator;
11+

packages/store/tsconfig.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,8 @@
1919
"lib",
2020
"examples",
2121
"**/*.spec.ts"
22-
]
22+
],
23+
"angularCompilerOptions": {
24+
"strictMetadataEmit": true
25+
}
2326
}

0 commit comments

Comments
 (0)