@ngrx/store-devtools for production mode

Question

I am using @ngrx/store-devtools instrumentation with the Chrome Extension.

Does it has any sense to disable it for production mode?

Answer 1

You can simply not import it into your NgModule when you are in production mode by doing something like this:

import { StoreDevtoolsModule } from '@ngrx/store-devtools';

let dev = [
  StoreDevtoolsModule.instrumentOnlyWithExtension()
];
if (environment.production) {
  dev = [];
  enableProdMode();
}

@NgModule({
  imports: [
    StoreModule.provideStore(rootReducer),
    ...dev
  ]
})
export class AppModule {}

Answer 2

Original accepted answer leaves store-devtools code into the production build, although it is never used.

To remove store-devtools completely from production build and save bundle size while doing so:

Create folder src/app/build-specifics

Create file index.ts

import { StoreDevtoolsModule } from '@ngrx/store-devtools';
export buildSpecificModules = [StoreDevtoolsModule.instrument({maxAge: 25})];

Create file index.prod.ts

export buildSpecificModules = [];

In angular.json add related fileReplacements. This will replace src/app/build-specifics/index.ts in production builds with index.prod.ts thus removing store-devtools from production build.

"production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "serviceWorker": true,
    "ngswConfigPath": "src/ngsw-config.json",
    "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
        },
        {
            "replace": "src/app/build-specifics/index.ts",
            "with": "src/app/build-specifics/index.prod.ts"
        }
    ]
}

In app.module.ts include the default file just like with environment, angular.json fileReplacements will change the actual included file when building the app.

import { buildSpecificModules } from './build-specifics';

@NgModule({
  imports: [
    StoreModule.provideStore(rootReducer),
    ...buildSpecificModules
  ]
})
export class AppModule {}