Optimizing Angular Applications: Removing NgRx DevTools in Production 🚀
Tags: angular, webdev, ngrx
Published: 2023-05-23 04:49:03

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:

```typescript
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:

```typescript
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:

```typescript
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.

```typescript
"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.