@ngrx/store-devtools for production mode
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 {}
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 {}