forked from PatrickJS/PatrickJS-starter
-
Notifications
You must be signed in to change notification settings - Fork 54
/
app.module.ts
153 lines (138 loc) · 4 KB
/
app.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {
NgModule,
ApplicationRef
} from '@angular/core';
import {
removeNgStyles,
createNewHosts,
createInputTransfer
} from '@angularclass/hmr';
import {
RouterModule,
PreloadAllModules
} from '@angular/router';
import { EffectsModule } from '@ngrx/effects';
import {
RouterStateSerializer,
StoreRouterConnectingModule
} from '@ngrx/router-store';
import { StoreModule } from '@ngrx/store';
import { Store } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
/*
* Platform and Environment providers/directives/pipes
*/
import { ENV_PROVIDERS } from './environment';
import { ROUTES } from './app.routes';
import {
reducers,
metaReducers,
AppState,
CustomSerializer
} from './reducers';
// App is our top level component
import { AppComponent } from './app.component';
import { APP_BASE_HREF } from '@angular/common';
import { APP_RESOLVER_PROVIDERS } from './app.resolver';
import { HomeComponent } from './home';
import { AboutComponent } from './about';
import { NoContentComponent } from './no-content';
import { XLargeDirective } from './home/x-large';
import '../styles/styles.scss';
import '../styles/headings.css';
declare const ENV: string;
// Application wide providers
const APP_PROVIDERS = [
...APP_RESOLVER_PROVIDERS,
{ provide: APP_BASE_HREF, useValue : '/' },
{ provide: RouterStateSerializer, useClass: CustomSerializer }
];
interface InternalStateType {
[key: string]: any;
}
interface StoreType {
state: InternalStateType;
rootState: InternalStateType;
restoreInputValues: () => void;
disposeOldHosts: () => void;
}
let CONDITIONAL_IMPORTS = [];
if (ENV === 'development') {
console.log('loading react devtools');
// AoT won't allow metaReducers, so we need to add them conditionally
// this should override the previous StoreModule declaration
CONDITIONAL_IMPORTS.push(StoreModule.forRoot(reducers, { metaReducers }));
// Now connecting to DevModule.
CONDITIONAL_IMPORTS.push(StoreDevtoolsModule.instrument());
}
/**
* `AppModule` is the main entry point into Angular2's bootstraping process
*/
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
AboutComponent,
HomeComponent,
NoContentComponent,
XLargeDirective
],
imports: [ // import Angular's modules
BrowserModule,
FormsModule,
HttpModule,
StoreModule.forRoot(reducers),
StoreRouterConnectingModule,
RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules }),
...CONDITIONAL_IMPORTS
],
providers: [ // expose our Services and Providers into Angular's dependency injection
ENV_PROVIDERS,
APP_PROVIDERS
]
})
export class AppModule {
constructor(
public appRef: ApplicationRef,
private _store: Store<AppState>
) {}
public hmrOnInit(store: StoreType) {
if (!store || !store.rootState) {
return;
}
console.log('HMR store', JSON.stringify(store, null, 2));
// set state
if (store.rootState) {
this._store.dispatch({
type: 'SET_ROOT_STATE',
payload: store.rootState
});
}
// set input values
if ('restoreInputValues' in store) {
let restoreInputValues = store.restoreInputValues;
setTimeout(restoreInputValues);
}
this.appRef.tick();
Object.keys(store).forEach(prop => delete store[prop]);
}
public hmrOnDestroy(store: StoreType) {
const cmpLocation = this.appRef.components.map((cmp) => cmp.location.nativeElement);
// save state
this._store.take(1).subscribe(s => store.rootState = s);
// recreate root elements
store.disposeOldHosts = createNewHosts(cmpLocation);
// save input values
store.restoreInputValues = createInputTransfer();
// remove styles
removeNgStyles();
}
public hmrAfterDestroy(store: StoreType) {
// display new elements
store.disposeOldHosts();
delete store.disposeOldHosts;
}
}