fix(devtools): Fixed AOT bug when providing devtools config options (#52

)

Also exposed the configuration options to the instrumentOnlyWithExtension method

README.md

@@ -21,14 +21,17 @@ Devtools for [@ngrx/store](https://github.com/ngrx/store).
   @NgModule({
     imports: [
       StoreModule.provideStore(rootReducer),
-      StoreDevtoolsModule.instrumentOnlyWithExtension()
+      // Note that you must instrument after importing StoreModule
+      StoreDevtoolsModule.instrumentOnlyWithExtension({
+        maxAge: 5
+      })
     ]
   })
   export class AppModule { }
   ```
 
 ### Instrumentation with a Custom Monitor
-To instrument @ngrx/store and use the devtools with a custom monitor you will need to setup the 
+To instrument @ngrx/store and use the devtools with a custom monitor you will need to setup the
 instrumentation providers using `instrumentStore()`:
 
 ```ts

spec/store.spec.ts

@@ -504,6 +504,14 @@ describe('Store Devtools', () => {
         createStore(counter, { maxAge: 1 });
       }).toThrowError(/cannot be less than/);
     });
+
+    it('should support a function to return devtools options', () => {
+      expect(() => {
+        createStore(counter, function() {
+          return { maxAge: 1 };
+        });
+      }).toThrowError(/cannot be less than/);
+    });
   });
 
   describe('Import State', () => {

src/config.ts

@@ -7,3 +7,5 @@ export interface StoreDevtoolsConfig {
 }
 
 export const STORE_DEVTOOLS_CONFIG = new OpaqueToken('@ngrx/devtools Options');
+
+export const INITIAL_OPTIONS = new OpaqueToken('@ngrx/devtools Initial Config');

src/instrument.ts

@@ -2,7 +2,7 @@ import { NgModule, OpaqueToken, Injector, ModuleWithProviders } from '@angular/c
 import { StoreModule, State, INITIAL_STATE, INITIAL_REDUCER, Dispatcher, Reducer } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { StoreDevtools, DevtoolsDispatcher } from './devtools';
-import { StoreDevtoolsConfig, STORE_DEVTOOLS_CONFIG } from './config';
+import { StoreDevtoolsConfig, STORE_DEVTOOLS_CONFIG, INITIAL_OPTIONS } from './config';
 import { DevtoolsExtension, REDUX_DEVTOOLS_EXTENSION } from './extension';
 
 
@@ -59,11 +59,22 @@ export function _createReducerIfExtension(extension: any, injector: Injector) {
   }
 }
 
-export function _createExtensionOptions(): StoreDevtoolsConfig {
-  return {
-    maxAge: Infinity,
-    monitor: () => null
-  };
+export function noMonitor() {
+  return null;
+}
+
+export function _createOptions(_options): StoreDevtoolsConfig {
+  const DEFAULT_OPTIONS: StoreDevtoolsConfig = { monitor: noMonitor };
+
+  let options = typeof _options === 'function' ? _options() : _options;
+
+  options = Object.assign({}, DEFAULT_OPTIONS, options);
+
+  if (options.maxAge && options.maxAge < 2) {
+    throw new Error(`Devtools 'maxAge' cannot be less than 2, got ${options.maxAge}`);
+  }
+
+  return options;
 }
 
 @NgModule({
@@ -81,16 +92,7 @@ export function _createExtensionOptions(): StoreDevtoolsConfig {
   ]
 })
 export class StoreDevtoolsModule {
-  static instrumentStore(_options: StoreDevtoolsConfig = {}) {
-    const DEFAULT_OPTIONS: StoreDevtoolsConfig = {
-      monitor: () => null
-    };
-
-    const options = Object.assign({}, DEFAULT_OPTIONS, _options);
-
-    if (options.maxAge && options.maxAge < 2) {
-      throw new Error(`Devtools 'maxAge' cannot be less than 2, got ${options.maxAge}`);
-    }
+  static instrumentStore(_options: StoreDevtoolsConfig | (() => StoreDevtoolsConfig) = {}): ModuleWithProviders {
 
     return {
       ngModule: StoreDevtoolsModule,
@@ -100,17 +102,25 @@ export class StoreDevtoolsModule {
           deps: [ StoreDevtools ],
           useFactory: _createState
         },
+        {
+          provide: INITIAL_OPTIONS,
+          useValue: _options
+        },
         {
           provide: Reducer,
           deps: [ DevtoolsDispatcher, INITIAL_REDUCER ],
           useFactory: _createReducer
         },
-        { provide: STORE_DEVTOOLS_CONFIG, useValue: options }
+        {
+          provide: STORE_DEVTOOLS_CONFIG,
+          deps: [INITIAL_OPTIONS],
+          useFactory: _createOptions
+        }
       ]
     };
   }
 
-  static instrumentOnlyWithExtension(): ModuleWithProviders {
+  static instrumentOnlyWithExtension(_options: StoreDevtoolsConfig | (() => StoreDevtoolsConfig) = {}): ModuleWithProviders {
     return {
       ngModule: StoreDevtoolsModule,
       providers: [
@@ -124,9 +134,14 @@ export class StoreDevtoolsModule {
           deps: [ REDUX_DEVTOOLS_EXTENSION, Injector ],
           useFactory: _createReducerIfExtension
         },
+        {
+          provide: INITIAL_OPTIONS,
+          useValue: _options
+        },
         {
           provide: STORE_DEVTOOLS_CONFIG,
-          useFactory: _createExtensionOptions
+          deps: [INITIAL_OPTIONS],
+          useFactory: _createOptions
         }
       ]
     };