Completely disable monitor in Angular AOT build

[BrainCrumbz]

Hi there

checked this past issue, #13 , but it seems that does not apply. Here's our scenario

• Currently working with a Angular 2, Webpack 2, TypeScript 2 web application (served by Asp.Net Core, but this should not matter).
• Build chain has both a development build and a production build, the latter with Angular AOT compile and uglifyjs plugin. Both builds complete fine.
• When building in production, StoreLogMonitorModule and StoreDevtoolsModule are imported but NOT INCLUDED in app module imports
• At runtime, application created by dev build shows no issue in browser. Application created by prod builds remains stuck with classic Loading application... message and console shows:

main-bundle.js:21 Error while bootstrapping application. Error: Template parse errors:
'ngrx-store-log-monitor' is not a known element:

1. If 'ngrx-store-log-monitor' is an Angular component, then verify that it is part of this module.
2. If 'ngrx-store-log-monitor' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
   
   [ERROR ->]
   </ngrx-store-log-monitor"): AppComponent@2:4
   at TemplateParser.parse (http://localhost:51254/js/vendor-bundle.js:8:25409)
   at RuntimeCompiler._compileTemplate (http://localhost:51254/js/vendor-bundle.js:18:15841)
   at http://localhost:51254/js/vendor-bundle.js:18:13446
   at Set.forEach (native)
   at a (http://localhost:51254/js/vendor-bundle.js:18:13424)
   at e.invoke (http://localhost:51254/js/vendor-bundle.js:24:22063)
   at n.run (http://localhost:51254/js/vendor-bundle.js:24:19450)
   at http://localhost:51254/js/vendor-bundle.js:24:17548
   at e.invokeTask (http://localhost:51254/js/vendor-bundle.js:24:22692)
   at n.runTask (http://localhost:51254/js/vendor-bundle.js:24:20052)

• If top application module is modified, so to always include StoreLogMonitorModule and StoreDevtoolsModule, runtime error goes away and app shows fine. But then, how to completely disable monitor, so that one cannot un-hide it at runtime?

Before going to AOT compile, in production it was enough to not add those modules to imports. Of course now things change with AOT.

Thanks

[BrainCrumbz]

Oh well ... it looks like there is an easy workaround for this: when in production, do not add those modules to imports. Also, define a dummy component like the following:

@Component({
  selector: 'ngrx-store-log-monitor',
  template: ``,
})
export class DummyComponent {
}

and when in production, append it as a declared component to some module (e.g. the top level one)

[Brandon Roberts]

You can also use store/dev-tools with the Chrome extension and remove it from your app so it doesn't interfere with AoT https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

[BrainCrumbz]

Didn't know that Redux devtools worked smoonhly with ngrx as well. Thanks for sharing info. Will look into this option.