[Store-DevTools] Documentation: Example on excluding store-devtools in production build

[MattiJarvinen]

I followed examples in old repository issues to remove store-devtools from production build. When inspecting stats.json with webpack-bundle-inspector I noticed that it was still compiled in the main bundle.

ngrx.io or store-devtools README could include instructions on how to exclude module import in production. It's quite trivial and more related to angular itself but it's not obvious before you've seen it. Just google "typescript conditional import" and you get bucket full of confusion.

Add to angular.json under your production build.

"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"
    }
]

Where build-specifics/index.prod.ts is:

export const extModules = [];
export const extMetaReducers = [];

Where build-specifics/index.ts is:

import { ActionReducer } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { storeFreeze } from 'ngrx-store-freeze';
import { environment } from '../../environments/environment';

export const extModules = [
    StoreDevtoolsModule.instrument({
        maxAge: 25
    })
];
export const extMetaReducers = [
    storeFreeze
];

On app.module.ts

import { extMetaReducers, extModules } from './build-specifics';

export const metaReducers: MetaReducer<any>[] = [
    ...extMetaReducers
];

const modules = [
    StoreModule.forRoot(reducers, { metaReducers }),
    HttpClientModule,
    RouterModule,
    //
   ...extModules
];

@NgModule( {
    bootstrap: [AppComponent],
    declarations: [
        ...widgets,
        ...pages
    ],
    imports: [
        ...modules,
        routing
    ],
    providers: [
        ...services
    ]
})
// and so on

Other information:

Related wrong answer in old repository ngrx/store-devtools#53 (comment)

I would be willing to submit a PR for the docs ❤️

[x] Yes (Assistance is provided if you need help submitting a pull request)
[ ] No

[brandonroberts]

This seems reasonable to me a recipe for Store Devtools

[MattiJarvinen]

I'll try to get this done within 2 weeks.

[yorraksahb]

How can we do it using custom webpack configuration and not using angular-cli.

[EnricoVogt]

@yorraksahb i would try it with the CopyWebpackPlugin
https://webpack.js.org/plugins/copy-webpack-plugin/

[Spawnrad]

Thank you

[sod]

@yorraksahb you can also use hostReplacementPaths option of the AngularCompilerPlugin.