Skip to content

Commit

Permalink
docs: update @ngrx/store-devtools examples to standalone
Browse files Browse the repository at this point in the history
  • Loading branch information
sheikalthaf committed Oct 13, 2024
1 parent f993759 commit 2db2791
Show file tree
Hide file tree
Showing 4 changed files with 7 additions and 71 deletions.
10 changes: 4 additions & 6 deletions projects/ngrx.io/content/guide/store-devtools/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,10 @@ features: {

## Example Object as provided in module imports

<code-example header="app.module.ts">
@NgModule({
...
imports: [
...
StoreDevtoolsModule.instrument({
<code-example header="main.ts">
bootstrapApplication(AppComponent, {
providers: [
provideStoreDevtools({
maxAge: 25,
logOnly: false,
autoPause: true,
Expand Down
27 changes: 1 addition & 26 deletions projects/ngrx.io/content/guide/store-devtools/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,32 +12,7 @@ Instrumentation with the Chrome / Firefox Extension

1. Download the [Redux Devtools Extension](https://github.com/reduxjs/redux-devtools/)

2. In your `AppModule` add instrumentation to the module imports using `StoreDevtoolsModule.instrument`:

<code-example header="app.module.ts">
import { NgModule, isDevMode } from '@angular/core';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
imports: [
StoreModule.forRoot(reducers),
// Instrumentation must be imported after importing StoreModule (config is optional)
StoreDevtoolsModule.instrument({
maxAge: 25, // Retains last 25 states
logOnly: !isDevMode(), // Restrict extension to log-only mode
autoPause: true, // Pauses recording actions and state changes when the extension window is not open
trace: false, // If set to true, will include stack trace for every dispatched action, so you can see it in trace tab jumping directly to that part of code
traceLimit: 75, // maximum stack trace frames to be stored (in case trace option was provided as true)
connectInZone: true // If set to true, the connection is established within the Angular zone
}),
],
})
export class AppModule {}
</code-example>

### Using the Standalone API

Registering the instrumentation can also be done using the standalone APIs if you are bootstrapping an Angular application using standalone features.
2. Provide the `provideStoreDevtools` in your bootstrapApplication:

<code-example header="main.ts">
import { isDevMode } from '@angular/core';
Expand Down
3 changes: 1 addition & 2 deletions projects/ngrx.io/content/guide/store-devtools/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@ This command will automate the following steps:

1. Update `package.json` > `dependencies` with `@ngrx/store-devtools`.
2. Run `npm install` to install those dependencies.
3. Update your `src/app.module.ts` > `imports` array with `StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: !isDevMode() })`. The maxAge property will be set to the flag `maxAge` if provided.
4. If the project is using a `standalone bootstrap`, it adds `provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() })` into the application config.
3. Update your project is using a `standalone bootstrap`, it adds `provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() })` into the application config.

## Installing with `npm`

Expand Down
38 changes: 1 addition & 37 deletions projects/ngrx.io/content/guide/store-devtools/recipes/exclude.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,6 @@ If the environment files don't exist in your project you can use the `ng generat

Given the below example:

<code-example header="environments/environment.ts">
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

export const environment = {
production: false,
imports: [
StoreDevtoolsModule.instrument({ maxAge: 25 })
],
};
</code-example>

When using the standalone API, use the `providers` array instead of `imports`:

<code-example header="environments/environment.ts">
import { provideStoreDevtools } from '@ngrx/store-devtools';

Expand All @@ -36,32 +23,9 @@ export const environment = {
};
</code-example>

Now, let's add an empty `imports` property to the production environment file:

<code-example header="environments/environment.prod.ts">
export const environment = {
production: true,
imports: [],
};
</code-example>

## Step 2: Import Environment File

Modify `app.module.ts` to include `environment.imports` in the `imports` array.

<code-example header="app.module.ts">
import { environment } from '../environments/environment';

@NgModule({
imports: [
StoreModule.forRoot(reducers),
// Instrumentation must be imported after importing StoreModule
environment.imports,
],
})
</code-example>

When using the standalone API, modify the `app.config.ts` file, where your application configuration resides, to specify `environment.providers`:
Modify the `app.config.ts` file, where your application configuration resides, to specify `environment.providers`:

<code-example header="app.config.ts">
import { environment } from '../environments/environment';
Expand Down

0 comments on commit 2db2791

Please # to comment.