Store: No exported PluginModule member from ngxs-api

[perjansson]

Trying to follow this guide to add ReduxDevtoolsPluginModule (and LocalStoragePluginModule)
https://amcdnl.gitbooks.io/ngxs/plugins/devtools.html

import { NgxsModule, ReduxDevtoolsPluginModule } from 'ngxs'; in app.module.ts

gives the following typescript compilation error:
[ts] Module '"/Users/.../node_modules/ngxs/ngxs-api"' has no exported member 'ReduxDevtoolsPluginModule'.

[Silthus]

What I found, is that the documentation does not match the current release. There are a lot of changes and features in the docs that do not work with the current 1.4.8 version.

It would be great if there is a @next branch or something.

[st-clair-clarke]

Please check your imports: ReduxDevtoolsPlugin is impported NOT ReduxDevtoolsPluginModule

import {
  LocalStoragePlugin, LoggerPlugin, Ngxs, NgxsModule, ReduxDevtoolsPlugin
} from 'ngxs'

@NgModule(
    {
      declarations: [
        ...
      ],
      imports: [,
        NgxsModule.forRoot( [
            ClerkingStore,
            RegistrationStore, RsStore ], {
          plugins: [
            LocalStoragePlugin,
            ReduxDevtoolsPlugin.forRoot(
                {// Set to true for prod mode
                  disabled: environment.production ? true : false
                } )]
        } )
      ],
      entryComponents: [],
      providers: [
      ],

      bootstrap: [ AppComponent ],
      schemas: [ NO_ERRORS_SCHEMA ]
    } )
export class AppModule {
  constructor(){  }
}

Hope this helps. It is what has been working for me.

[st-clair-clarke]

Have to agree with @Silthus about the docs. But I would suggest patience. Most times an author of an open source software has a fulltime job and cannot do all that is necessary for the open source as its users' might demand.

I think the new offering should catch-up with the docs. 2 days ago that author mentioned that he should have an updated version in a 'few days'.

[perjansson]

Thx @st-clair-clarke, it worked with that configuration.

[st-clair-clarke]

Glad to be of some help @perjansson.

[amcdnl]

Sorry about that. We just made some changes to the Plugins friday and have not cut a new build yet. I'll cut that now for you.

[st-clair-clarke]

@perjansson @amcdnl The above solution is now broken in current release "ngxs": "^1.5.1", Worked in "ngxs": "^1.4.8",

Given the following in AppModule imports

        NgxsModule.forRoot(  [  ClerkingStore,   RegistrationStore ] ),
        ReduxDevtoolsPluginModule.forRoot(
            {// Set to true for prod mode
              disabled: environment.production ? true : false
            } )//]

...
I am getting the following errors

compiler.js:492 Uncaught Error: Unexpected value '[object Object]' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:492)
    at eval (compiler.js:15254)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15229)
    at JitCompiler._loadModules (compiler.js:35487)
    at JitCompiler._compileModuleAndComponents (compiler.js:35448)
    at JitCompiler.compileModuleAsync (compiler.js:35342)
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
    at PlatformRef.bootstrapModule (core.js:5551)
    at eval (main.ts:52)

The application fails to load.

Removing

ReduxDevtoolsPluginModule.forRoot( {// Set to true for prod mode disabled: environment.production ? true : false } )//]

the application loads normally but without devtool support.

Could you please reopen @perjansson ?

Cheers

[perjansson]

That’s true @st-clair-clarke, I got similar error after installing 1.5.1. Reopening...

With code like this:

NgxsModule.forRoot([AppStore], {
    plugins: [
        ReduxDevtoolsPlugin.forRoot({
            disabled: isProduction,
        }),
        LoggerPlugin.forRoot({
            logger: console,
            expanded: true,
        }),
        LocalStoragePlugin.forRoot({
            key: '@@STATE',
            serialize: JSON.stringify,
            deserialize: JSON.parse,
        }),
    ],
}),

I get the following error:

Property 'forRoot' does not exist on type 'typeof ReduxDevtoolsPlugin'.
Property 'forRoot' does not exist on type 'typeof LoggerPlugin'.
Property 'forRoot' does not exist on type 'typeof LocalStoragePlugin'.

[deebloo]

@perjansson it should be ReduxDevtoolsPluginModule, LocalStoragePluginModule and LoggerPluginModule

[st-clair-clarke]

@deebloo With the following:

 ReduxDevtoolsPlugin.forRoot(
            {// Set to true for prod mode
              disabled: environment.production ? true : false
            } ),

the following error results

ERROR in src/app/app.module.ts(88,29): error TS2339: Property 'forRoot' does not exist on type 'typ
eof ReduxDevtoolsPlugin'.

Tried other combination without success. Docs need updating please.

Cheers

[xmlking]

Looking for docs on same issue

[deebloo]

@st-clair-clarke may be the docs are wrong. ReduxDevtoolsPlugin should be ReduxDevtoolsPluginModule

[deebloo]

@st-clair-clarke the current seem to be up to date. https://amcdnl.gitbooks.io/ngxs/content/plugins/devtools.html

[deebloo]

@perjansson can you confirm if the same issue persists with the current documentation and the latest version?

[amcdnl]

Gitbook has crazy aggressive caching...

[st-clair-clarke]

Note that @deebloo that your suggestion is exactly what I did when I got the errors above; so neither works. Could someone please test that the current implemenation of ReduxDevtoolsPluginModule actually works. IT is not working for us.

The other thing is I am using these in my AppModule, but I note that at the link above by you MyModule is used. Does this mean that I should import and re-export in MyModule.

Cheers

[amcdnl]

@deebloo - I fixed the devtools, it was returning the wrong object as the module

[amcdnl]

Fixed in 1.5.2

[st-clair-clarke]

@amcdnl I am no longer getting any errors from the dev tool plugin version 1.5.2, but now there is no state in the dev tool UI. Maybe the dev tool showing the previous state is fixed but now the dev tool window shows undefined state. The logger shows normally in the console.

Should we continue on this thread or open a new thread for this issue? Or will you reopen?

Cheers

[amcdnl]

Odd, I just tested and saw it sending state. I didn't dig too deep though.

[st-clair-clarke]

I actually remove node_modules directory and 'yarn' my directory with the same result - state is definitely undefined in the UI tree. However, all my states are logged as expected. The state is being sent - as evidence by the fact that it is being logged to the console, but the UI display is broken.

[perjansson]

This code works for me now since 1.5.3:

NgxsModule.forRoot([AppStore]),
ReduxDevtoolsPluginModule.forRoot({ disabled: isProduction }),
LocalStoragePluginModule.forRoot({
    key: STORAGE_KEY_NGXS_STORE,
    serialize: JSON.stringify,
    strategy: StorageStrategy.sessionStorage,
    deserialize: JSON.parse,
})

[st-clair-clarke]

@perjansson Are you seeing the state in the Redux UI, For me the events do appear but the state is still undefined.

Below is my code with no state visualized in the redux UI

       NgxsModule.forRoot(
            [
              ClerkingStore,
              RegistrationStore,
              RsStore ]),

        ReduxDevtoolsPluginModule.forRoot(
            {
              disabled: false //environment.production ? false : true
            } ),
        LocalStoragePluginModule.forRoot(
            {
              key: '@@STATE',
              serialize: JSON.stringify,
              strategy: StorageStrategy.sessionStorage,
              deserialize: JSON.parse
            } ),
        LoggerPluginModule.forRoot(
            {
              logger: console,
              collapsed: true
            } )

Let me know what you think. See the graphic below

dev-tool.pdf

Cheers

[perjansson]

Yes @st-clair-clarke, Redux dev tool is working displaying all event names, states, state changes and diffs. The only thing not working is that I don't see the payload of the action, but the state still updates correctly.

[st-clair-clarke]

@perjansson The screenshot aboe (dev-tool.pdf) says otherwise at my end. Do you see an error in my code above? I will double check.

[perjansson]

@st-clair-clarke Your app.module looks like mine except that LoggerPluginModule is not working for me, it fails with an exception, so I've removed it. Before updating to 1.5.3 I deleted node_modules folder but I think you mentioned that also had done that.

[st-clair-clarke]

@perjansson Interesting. I remove the working LoggerPluginModule and now the redux UI is working! So it seems that LoggerPluginModule might have an issue. Maybe you should open a new thread. Thanks for the observation.

[RobCannon]

I am getting the message:
ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'ReduxDevtoolsPluginModule' was called.

When using this with the --aot flag

@NgModule({
  declarations: [AppComponent, TopMenuComponent],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    NgxsModule.forRoot([]),
    ReduxDevtoolsPluginModule.forRoot({
      disabled: environment.production
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

[st-clair-clarke]

@RobCannon Try giving the NgxModule something to display and see what happens - OR you do have a non-empty array?. Currently you have an empty array (NgxsModule.forRoot([]), Somthing like:

NgxsModule.forRoot( [RsStore ])

[RobCannon]

All of my stores are defined in features and I don't have a store for the root module. Also, this is a compile time error, so I doubt that anything passed in the previous line would have an impact.

But, just in case, I created a simple store for the root module, verified that everything still work without --aot. When I enable the --aot flag, I still get the same error:

ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'ReduxDevtoolsPluginModule' was called.

I am using angular-cli 1.7.3 and the matching typescript 2.6.2