0
# Configuration and Setup
1

2
Comprehensive configuration options for customizing @ngrx/store-devtools behavior, including action filtering, state sanitization, feature toggles, and performance optimizations.
3

4
## Capabilities
5

6
### NgModule Integration
7

8
Setup devtools using Angular NgModule pattern.
9

10
```typescript { .api }
11
/**
12
 * Angular module for instrumenting the store with devtools
13
 */
14
class StoreDevtoolsModule {
15
  /**
16
   * Configure devtools module with options
17
   * @param options - Configuration options for devtools
18
   * @returns Module with providers configured
19
   */
20
  static instrument(options?: StoreDevtoolsOptions): ModuleWithProviders<StoreDevtoolsModule>;
21
}
22
```
23

24
**Usage Example:**
25

26
```typescript
27
import { NgModule } from "@angular/core";
28
import { StoreModule } from "@ngrx/store";
29
import { StoreDevtoolsModule } from "@ngrx/store-devtools";
30
import { environment } from "../environments/environment";
31

32
@NgModule({
33
  imports: [
34
    StoreModule.forRoot(reducers),
35
    StoreDevtoolsModule.instrument({
36
      name: "My App DevTools",
37
      maxAge: 25,
38
      logOnly: environment.production,
39
      autoPause: true,
40
      trace: false,
41
      traceLimit: 75,
42
      connectInZone: false,
43
    }),
44
  ],
45
})
46
export class AppModule {}
47
```
48

49
### Standalone Application Integration
50

51
Setup devtools using Angular standalone application pattern.
52

53
```typescript { .api }
54
/**
55
 * Provides developer tools and instrumentation for Store in standalone applications
56
 * @param options - Configuration options for devtools
57
 * @returns Environment providers for devtools
58
 */
59
function provideStoreDevtools(options?: StoreDevtoolsOptions): EnvironmentProviders;
60
```
61

62
**Usage Example:**
63

64
```typescript
65
import { bootstrapApplication } from "@angular/platform-browser";
66
import { isDevMode } from "@angular/core";
67
import { provideStore } from "@ngrx/store";
68
import { provideStoreDevtools } from "@ngrx/store-devtools";
69

70
bootstrapApplication(AppComponent, {
71
  providers: [
72
    provideStore(reducers),
73
    provideStoreDevtools({
74
      maxAge: 25,
75
      logOnly: !isDevMode(),
76
      autoPause: true,
77
      trace: true,
78
      traceLimit: 75,
79
    }),
80
  ],
81
});
82
```
83

84
### Core Configuration Interface
85

86
Main configuration interface providing comprehensive customization options.
87

88
```typescript { .api }
89
/**
90
 * Configuration class for store devtools with all available options
91
 */
92
class StoreDevtoolsConfig {
93
  /** Maximum allowed actions to be stored in the history tree (default: false) */
94
  maxAge: number | false;
95
  /** Custom monitor reducer for advanced monitoring */
96
  monitor?: ActionReducer<any, any>;
97
  /** Function which takes action object and id number, returns sanitized action */
98
  actionSanitizer?: ActionSanitizer;
99
  /** Function which takes state object and index, returns sanitized state */
100
  stateSanitizer?: StateSanitizer;
101
  /** The instance name to be shown on the monitor page (default: document.title) */
102
  name?: string;
103
  /** Serialization configuration for state and actions */
104
  serialize?: boolean | SerializationOptions;
105
  /** Log-only mode for production environments */
106
  logOnly?: boolean;
107
  /** Feature configuration for devtools capabilities */
108
  features?: DevToolsFeatureOptions;
109
  /** Action types to be hidden in the monitors */
110
  actionsBlocklist?: string[];
111
  /** Action types to be shown in the monitors (overrides actionsBlocklist) */
112
  actionsSafelist?: string[];
113
  /** Called for every action before sending, returns true to allow sending */
114
  predicate?: Predicate;
115
  /** Auto pauses when the extension's window is not opened */
116
  autoPause?: boolean;
117
  /** If set to true, will include stack trace for every dispatched action */
118
  trace?: boolean | (() => string);
119
  /** Maximum stack trace frames to be stored */
120
  traceLimit?: number;
121
  /** Determines whether extension connection is established within Angular zone */
122
  connectInZone?: boolean;
123
}
124
```
125

126
### Configuration Options Type
127

128
Flexible configuration options supporting both static and dynamic configuration.
129

130
```typescript { .api }
131
/**
132
 * Configuration options type supporting partial configuration or factory function
133
 */
134
type StoreDevtoolsOptions = Partial<StoreDevtoolsConfig> | (() => Partial<StoreDevtoolsConfig>);
135
```
136

137
**Usage Examples:**
138

139
```typescript
140
// Static configuration
141
const devtoolsConfig: StoreDevtoolsOptions = {
142
  maxAge: 50,
143
  logOnly: false,
144
  autoPause: true,
145
};
146

147
// Dynamic configuration
148
const devtoolsConfig: StoreDevtoolsOptions = () => ({
149
  maxAge: environment.production ? 10 : 50,
150
  logOnly: environment.production,
151
  name: `${environment.appName} DevTools`,
152
});
153
```
154

155
### Feature Configuration
156

157
Granular control over devtools features and capabilities.
158

159
```typescript { .api }
160
/**
161
 * Configuration for devtools features based on Redux DevTools extension API
162
 */
163
interface DevToolsFeatureOptions {
164
  /** Start/pause recording of dispatched actions */
165
  pause?: boolean;
166
  /** Lock/unlock dispatching actions and side effects */
167
  lock?: boolean;
168
  /** Persist states on page reloading */
169
  persist?: boolean;
170
  /** Export history of actions in a file */
171
  export?: boolean;
172
  /** Import history of actions from a file */
173
  import?: 'custom' | boolean;
174
  /** Jump back and forth (time travelling) */
175
  jump?: boolean;
176
  /** Skip (cancel) actions */
177
  skip?: boolean;
178
  /** Drag and drop actions in the history list */
179
  reorder?: boolean;
180
  /** Dispatch custom actions or action creators */
181
  dispatch?: boolean;
182
  /** Generate tests for the selected actions */
183
  test?: boolean;
184
}
185
```
186

187
### Sanitization Functions
188

189
Type-safe functions for sanitizing actions and state before sending to devtools.
190

191
```typescript { .api }
192
/**
193
 * Function to sanitize actions before sending to devtools
194
 * @param action - The action to sanitize
195
 * @param id - The action ID
196
 * @returns Sanitized action object
197
 */
198
type ActionSanitizer = (action: Action, id: number) => Action;
199

200
/**
201
 * Function to sanitize state before sending to devtools
202
 * @param state - The state to sanitize
203
 * @param index - The state index
204
 * @returns Sanitized state object
205
 */
206
type StateSanitizer = (state: any, index: number) => any;
207

208
/**
209
 * Predicate function to determine if action should be sent to devtools
210
 * @param state - Current state
211
 * @param action - Action being processed
212
 * @returns True if action should be sent to devtools
213
 */
214
type Predicate = (state: any, action: Action) => boolean;
215
```
216

217
**Usage Examples:**
218

219
```typescript
220
const actionSanitizer: ActionSanitizer = (action, id) => {
221
  // Remove sensitive data from actions
222
  if (action.type === 'LOGIN_SUCCESS') {
223
    return { ...action, payload: { ...action.payload, token: '[REDACTED]' } };
224
  }
225
  return action;
226
};
227

228
const stateSanitizer: StateSanitizer = (state, index) => {
229
  // Remove sensitive data from state
230
  return {
231
    ...state,
232
    auth: state.auth ? { ...state.auth, token: '[REDACTED]' } : null,
233
  };
234
};
235

236
const predicate: Predicate = (state, action) => {
237
  // Only send specific actions to devtools
238
  return !action.type.startsWith('@@');
239
};
240
```
241

242
### Serialization Configuration
243

244
Advanced serialization options for complex state objects.
245

246
```typescript { .api }
247
/**
248
 * Serialization options for state and actions
249
 */
250
interface SerializationOptions {
251
  /** Serialization configuration options */
252
  options?: boolean | any;
253
  /** Function to transform values during serialization */
254
  replacer?: (key: any, value: any) => {};
255
  /** Function to transform values during deserialization */
256
  reviver?: (key: any, value: any) => {};
257
  /** Immutable data structure handling */
258
  immutable?: any;
259
  /** Reference handling for circular objects */
260
  refs?: Array<any>;
261
}
262
```
263

264
### Injection Tokens
265

266
Angular dependency injection tokens for advanced configuration.
267

268
```typescript { .api }
269
/** Injection token for store devtools configuration */
270
const STORE_DEVTOOLS_CONFIG: InjectionToken<StoreDevtoolsConfig>;
271

272
/** Injection token for initial devtools options */
273
const INITIAL_OPTIONS: InjectionToken<StoreDevtoolsConfig>;
274

275
/** Injection token for checking if extension or monitor is present */
276
const IS_EXTENSION_OR_MONITOR_PRESENT: InjectionToken<boolean>;
277

278
/** Injection token for Redux DevTools extension */
279
const REDUX_DEVTOOLS_EXTENSION: InjectionToken<ReduxDevtoolsExtension>;
280
```
281

282
### Configuration Factory Functions
283

284
Utility functions for creating and validating devtools configuration.
285

286
```typescript { .api }
287
/**
288
 * Creates configuration object from options input
289
 * @param optionsInput - Configuration options
290
 * @returns Complete configuration object
291
 */
292
function createConfig(optionsInput: StoreDevtoolsOptions): StoreDevtoolsConfig;
293

294
/**
295
 * Default monitor function that returns null
296
 * @returns null
297
 */
298
function noMonitor(): null;
299

300
/**
301
 * Factory function to determine if extension or monitor is present
302
 * @param extension - Redux devtools extension instance
303
 * @param config - Devtools configuration
304
 * @returns True if extension or monitor is available
305
 */
306
function createIsExtensionOrMonitorPresent(
307
  extension: ReduxDevtoolsExtension | null,
308
  config: StoreDevtoolsConfig
309
): boolean;
310

311
/**
312
 * Factory function to create Redux DevTools extension instance
313
 * @returns Redux devtools extension or null if not available
314
 */
315
function createReduxDevtoolsExtension(): ReduxDevtoolsExtension | null;
316
```
317

318
### Constants
319

320
```typescript { .api }
321
/** Default name for devtools instance */
322
const DEFAULT_NAME = 'NgRx Store DevTools';
323
```