From 3c0fac344c005b3c62e58131c4b45f24e2c3c109 Mon Sep 17 00:00:00 2001 From: Sheik Althaf Date: Sun, 13 Oct 2024 09:41:41 +0530 Subject: [PATCH 1/4] docs: update @ngrx/store-devtools examples to standalone --- .../content/guide/store-devtools/config.md | 18 +++++---- .../content/guide/store-devtools/index.md | 27 +------------ .../content/guide/store-devtools/install.md | 3 +- .../guide/store-devtools/recipes/exclude.md | 38 +------------------ 4 files changed, 14 insertions(+), 72 deletions(-) diff --git a/projects/ngrx.io/content/guide/store-devtools/config.md b/projects/ngrx.io/content/guide/store-devtools/config.md index 627043740b..633a42e6bb 100644 --- a/projects/ngrx.io/content/guide/store-devtools/config.md +++ b/projects/ngrx.io/content/guide/store-devtools/config.md @@ -75,12 +75,10 @@ features: { ## Example Object as provided in module imports - -@NgModule({ - ... - imports: [ - ... - StoreDevtoolsModule.instrument({ + +export const appConfig: ApplicationConfig = { + providers: [ + provideStoreDevtools({ maxAge: 25, logOnly: false, autoPause: true, @@ -92,5 +90,11 @@ features: { }) ], ... -}) +} + +
+ +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). + +
\ No newline at end of file diff --git a/projects/ngrx.io/content/guide/store-devtools/index.md b/projects/ngrx.io/content/guide/store-devtools/index.md index 5173b6f857..768130493c 100644 --- a/projects/ngrx.io/content/guide/store-devtools/index.md +++ b/projects/ngrx.io/content/guide/store-devtools/index.md @@ -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`: - - -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 {} - - -### 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 applicationConfig: import { isDevMode } from '@angular/core'; diff --git a/projects/ngrx.io/content/guide/store-devtools/install.md b/projects/ngrx.io/content/guide/store-devtools/install.md index c541c56720..32bf3aaabf 100644 --- a/projects/ngrx.io/content/guide/store-devtools/install.md +++ b/projects/ngrx.io/content/guide/store-devtools/install.md @@ -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` diff --git a/projects/ngrx.io/content/guide/store-devtools/recipes/exclude.md b/projects/ngrx.io/content/guide/store-devtools/recipes/exclude.md index 79615b583b..4437e3df28 100644 --- a/projects/ngrx.io/content/guide/store-devtools/recipes/exclude.md +++ b/projects/ngrx.io/content/guide/store-devtools/recipes/exclude.md @@ -12,19 +12,6 @@ If the environment files don't exist in your project you can use the `ng generat Given the below example: - -import { StoreDevtoolsModule } from '@ngrx/store-devtools'; - -export const environment = { - production: false, - imports: [ - StoreDevtoolsModule.instrument({ maxAge: 25 }) - ], -}; - - -When using the standalone API, use the `providers` array instead of `imports`: - import { provideStoreDevtools } from '@ngrx/store-devtools'; @@ -36,32 +23,9 @@ export const environment = { }; -Now, let's add an empty `imports` property to the production environment file: - - -export const environment = { - production: true, - imports: [], -}; - - ## Step 2: Import Environment File -Modify `app.module.ts` to include `environment.imports` in the `imports` array. - - -import { environment } from '../environments/environment'; - -@NgModule({ - imports: [ - StoreModule.forRoot(reducers), - // Instrumentation must be imported after importing StoreModule - environment.imports, - ], -}) - - -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`: import { environment } from '../environments/environment'; From 855ad174fbf17d82062b76fccb9ed0f0e36dfbd2 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Wed, 13 Nov 2024 20:22:05 +0100 Subject: [PATCH 2/4] Update projects/ngrx.io/content/guide/store-devtools/install.md --- projects/ngrx.io/content/guide/store-devtools/install.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/ngrx.io/content/guide/store-devtools/install.md b/projects/ngrx.io/content/guide/store-devtools/install.md index 32bf3aaabf..b2c06772f7 100644 --- a/projects/ngrx.io/content/guide/store-devtools/install.md +++ b/projects/ngrx.io/content/guide/store-devtools/install.md @@ -21,7 +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 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` From e8ef81831cf8676b6f2cf9d23ecfeaeed7f00b5c Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Wed, 13 Nov 2024 20:22:11 +0100 Subject: [PATCH 3/4] Update projects/ngrx.io/content/guide/store-devtools/config.md --- projects/ngrx.io/content/guide/store-devtools/config.md | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/ngrx.io/content/guide/store-devtools/config.md b/projects/ngrx.io/content/guide/store-devtools/config.md index 633a42e6bb..98128f7b39 100644 --- a/projects/ngrx.io/content/guide/store-devtools/config.md +++ b/projects/ngrx.io/content/guide/store-devtools/config.md @@ -89,7 +89,6 @@ export const appConfig: ApplicationConfig = { } }) ], - ... } From 61f8dcf871e1baa5f7c3638cf7600dcabb157fb7 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Wed, 13 Nov 2024 20:22:15 +0100 Subject: [PATCH 4/4] Update projects/ngrx.io/content/guide/store-devtools/index.md --- projects/ngrx.io/content/guide/store-devtools/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/ngrx.io/content/guide/store-devtools/index.md b/projects/ngrx.io/content/guide/store-devtools/index.md index 768130493c..2e49f90047 100644 --- a/projects/ngrx.io/content/guide/store-devtools/index.md +++ b/projects/ngrx.io/content/guide/store-devtools/index.md @@ -12,7 +12,7 @@ Instrumentation with the Chrome / Firefox Extension 1. Download the [Redux Devtools Extension](https://github.com/reduxjs/redux-devtools/) -2. Provide the `provideStoreDevtools` in your applicationConfig: +2. Provide the `provideStoreDevtools` to the application config: import { isDevMode } from '@angular/core';