Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

docs: update @ngrx/store-devtools examples to standalone #4558

Merged
merged 4 commits into from
Nov 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 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="app.config.ts">
export const appConfig: ApplicationConfig = {
providers: [
provideStoreDevtools({
maxAge: 25,
logOnly: false,
autoPause: true,
Expand All @@ -91,6 +89,11 @@ features: {
}
})
],
...
})
}
</code-example>

<div class="alert is-helpful">

An example of the `@ngrx/store-devtools` setup in module-based applications is available at the [following link](https://v17.ngrx.io/guide/store-devtools).

</div>
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` to the application config:

<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. Add the devtools to the application config provider's using `provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() })`. The `maxAge` property will be set to the flag `maxAge` if provided.

## 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