When developing an Angular application with NgRx, the NgRx DevTools can be incredibly useful for debugging and monitoring state changes. However, when it comes to deploying your application to production, it's a good idea to remove the devtools from your bundle and avoid loading them unnecessarily. This article will guide you through the process of configuring target-specific file replacements to achieve this.

To begin, you'll need to create two files that handle the NgRx DevTools providers. Let's call them ngrx-devtools.development.ts and ngrx-devtools.ts.

In the ngrx-devtools.development.ts file, import the necessary functions from @ngrx/store-devtools and @angular/core. Then, define a constant named ngrxDevtools that provides the NgRx DevTools configuration.

Here's an example of what the ngrx-devtools.development.ts file may look like:

import { provideStoreDevtools } from "@ngrx/store-devtools";
import { isDevMode } from "@angular/core";

export const ngrxDevtools = provideStoreDevtools({
  maxAge: 25,
  logOnly: !isDevMode()
});

Next, in the ngrx-devtools.ts file, define a constant named ngrxDevtools as an array of EnvironmentProviders. This step ensures that when file replacement is applied in production, an empty array is used instead of the actual devtools configuration.

Here's an example of what the ngrx-devtools.ts file may look like:

import { EnvironmentProviders } from "@angular/core";

export const ngrxDevtools: EnvironmentProviders[] = [];

Now, you can provide the NgRx DevTools configuration in your application's bootstrap file, such as main.ts or app.module.ts. Import the ngrxDevtools constant from the ngrx-devtools.ts file.

Here's an example of how you can provide the NgRx DevTools configuration in your bootstrap file:

import { ngrxDevtools } from "./devtools/ngrx-devtools";

bootstrapApplication(AppComponent, {
  providers: [..., ngrxDevtools]
}).catch(err => console.error(err));

Additionally, don't forget to add the configuration to the angular.json file for file replacements.

"projects": {
  "app-name": {
    "architect": {
      "build": {
        "configurations": {
          "development": {
            "fileReplacements": [
              {
                "replace": "src/devtools/ngrx-devtools.ts",
                "with": "src/devtools/ngrx-devtools.development.ts"
              }
            ]
          }
        }
      }
    }
  }
}

During development, when you are in the development mode, the NgRx DevTools will be included and function as expected. However, when you switch to production mode, the file replacement configuration takes effect. The appropriate file is replaced, and the NgRx DevTools are not included in your production code, resulting in smaller bundle sizes and potentially saving a couple of kilobytes.

Remember to adjust the paths and file names according to your project structure. With this setup, you can enjoy the benefits of NgRx DevTools during development while keeping your production bundles streamlined and efficient.