Are the store-devtools delivered to production as well?

[emreavsar]

hi there,

silly question, but I couldn't find any information on the github page:

1. Is there any problem to deliver the store-devtools (activated) to the production app?
2. If it is dangerous to deliver the app with the store-devtools, is the exclusion of this library already implemented or do we have to take care of this by our own?
3. If dangerous and exclusion not implemented -> any guide to exclude it?

maybe it makes also sense to put these information somewhere in the info page

ps: yes i know, it is called *-devtools so these questions might be easy to answer.

thanks, cheers

emre

[fiznool]

I asked this question too in the example-app repo but have yet to figure out a way to achieve this.

[brandonroberts]

1. It depends on your comfort level. The devtools allow external users to look at and potentially manipulate the state of your application. On the the other hand, it allows you to look at the state of your app in production and take a snapshot of that data for debugging purposes.
2. Currently, you would have to take care of excluding this on your own in production. Its just a matter of removing the devtools module for production builds, which is something that can be done easily, but limits you if you're using AOT for production builds, which is the default as of the latest release.
3. Removing it could just require manually removing the module from your AppModule before building.

Hope this helps

[k10der]

I found a workaround, that is easy and works well with AOT (tested with @angular/cli: 1.0.0). Suppose you want to exclude dev tools from production builds, so you determine it by using environment.production variable.

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

import { environment } from '../environments/environment';

@NgModule({
  ...
  imports: [
    ...
    StoreModule.provideStore({...}),
    !environment.production ? StoreDevtoolsModule.instrumentOnlyWithExtension() : [],
    ...
  ],
  ...
})
export class AppModule {
}

So if we're not in production mode, then the StoreDevtoolsModule will be imported, otherwise an empty array will.

[fknop]

@k10der Does the CLI resolve this at compile time ? Otherwise the code is still imported and will be in the bundle.

Edit:

I just tried it. Indeed it's resolved at compiled time which is nice. If you don't want the extra-bytes for the DummyModule you can also do:

imports: environment.production ? [
    StoreModule.provideStore(reducer)
  ] : [
    StoreModule.provideStore(reducer),
    StoreDevtoolsModule.instrumentOnlyWithExtension()
  ]

The only annoying thing is that you have to repeat the other modules twice. I'm importing the store-related module in another modules so there is only StoreModule and EffectModule that I need to repeat.

[k10der]

@fknop It looks like CLI resolves this. I've made 2 builds with sourcemaps. And according to source-map-explorer output devtools are excluded with [] substitution. So the size difference is 10KB.

Here are the results of 2 builds

!environment.production ? StoreDevtoolsModule.instrumentOnlyWithExtension() : [],

environment.production ? StoreDevtoolsModule.instrumentOnlyWithExtension() : [],

[brandonroberts]

You don't need to include a dummy module in place of the devtools. Just provide an empty array as the alternative.

…

On Apr 13, 2017 7:09 AM, "Sergey Palikhov" ***@***.***> wrote: @fknop <https://github.com/fknop> It looks like CLI resolves this. I've made 2 builds with sourcemaps. And according to source-map-explorer <https://github.com/danvk/source-map-explorer> output devtools are excluded with DummyModule substitution. So the size difference is 10KB. Here are the results of 2 builds !environment.production ? StoreDevtoolsModule.instrumentOnlyWithExtension() : DummyModule, [image: Without dev tools module] <https://cloud.githubusercontent.com/assets/6381515/25004020/dbdd897c-205a-11e7-93d7-c1e7e5ca6bcd.png> environment.production ? StoreDevtoolsModule.instrumentOnlyWithExtension() : DummyModule, [image: With dev tools module] <https://cloud.githubusercontent.com/assets/6381515/25004023/dfcb6a7c-205a-11e7-8871-ff2a788ac778.png> — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#53 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACk40mxoKzRL2DW17IYUg35Vn_Oq5N6ks5rvhBugaJpZM4LtQNv> .

[k10der]

@brandonroberts good point! Didn't know, that it's possible to add arrays to imports. Will modify my previous message now.

[fknop]

@brandonroberts That's even better, thanks.

[maxisam]

It seems like it doesn't work on AngularCLI6. StoreDevtoolsModule is still in the bundle. However, It can be fixed with fileReplacements in Angular.json.

[dmnrmr]

I'm using webpack 4 and angular 6 with this condition:

imports: [
  ...,
  !production ? StoreDevtoolsModule.instrument() : []
]

dev tools are still included in the bundle and for some strange reason are still available on prod builds.

EDIT:

I managed to solve the issue by using webpack's alias feature.

resolve: {
  alias: {
    '@ngrx/store-devtools': 'empty-module'
  }
}

With replacing devtools with empty module no devtools are bundles for prod builds.