Platform: Bug: EffectsModule, StoreRouterConnectingModule and StoreDevtoolsModule need to be imported only after StoreModule

[loiane]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request

What is the current behavior?

EffectsModule, StoreRouterConnectingModule and StoreDevtoolsModule need to be imported only after StoreModule, otherwise it does not work.

Expected behavior:

The order of the imports describe above in the app.module or feature module should not matter.

Minimal reproduction of the problem with instructions:

In the app.module or feature module, import EffectsModule or StoreRouterConnectingModule or StoreDevtoolsModule before StoreModule. Effects, storeRouter and devTools will not work.

Version of affected browser(s),operating system(s), npm, node and ngrx:

ngrx v4

Other information:

Issue opened due PR #182

:heartpulse: ngrx? Please consider supporting our collective: 👉 donate

[lucastheisen]

@loiane , what was your symptoms for this problem, and how did you figure out it was related to import order? After I updated, i just get a modules[moduleId] is undefined message in my console, but am having trouble determining if this is the same problem... My app.module actually imports something that imports StoreModule so i am having trouble determining how to change the order, and whether or not it would be effective as a temporary workaround.

[loiane]

@lucastheisen the first one I tried was StoreDevtoolsModule. It did not do anything and I did not get any errors. So I tried to change the order and it worked. Then, I tried EffectsModule. I got the no provider for Actions error, but it was because I forgot to add the Effects forRoot import. After fixing this error, it was also not working, so I decided to try again to change the import order and it worked.
The current import order I'm using is the following:

StoreModule.forRoot(reducers),
EffectsModule.forRoot([]),
StoreRouterConnectingModule,
!environment.production ? StoreDevtoolsModule.instrument({ maxAge: 50 }) : []

And I'm doing the same in my feature modules for the store and effects modules.

[schmkr]

Maybe related: I was just setting up my first Effect and ran into the error No provider for Actions. For me this was caused by a wrong path in the import statement for EffectsModule that was automatically generated by WebStorm.
WebStorm generated import {EffectsModule} from "@ngrx/effects/src"; where it should be import {EffectsModule} from "@ngrx/effects";.

[alvipeo]

Oh, man I just had the same and my app.module didn't have EffectsModule.forRoot([]),. But I had it for my feature module! Spent an hour digging this.

[sandangel]

I have same issue here.
zone.js:661 Unhandled Promise rejection: No provider for Store! ; Zone: ; Task: Promise.then ; Value: Error: No provider for Store!
here is my import order:

StoreModule.forRoot(reducers),
EffectsModule.forRoot([])

If I remove EffectsModule, the issue gone.

[eabassey]

@schmkr . That worked for me. The problem was because of the deep path to referencing EffectsModule that visual studio code imported automatically for me.

[akash6190]

@sandangel I am having the same issue, were you able to resolve this.

Unhandled Promise rejection: No provider for Store! ; Zone: ; Task: Promise.then ; Value: Error: No provider for Store!

The order I am using is
StoreModule.forRoot(reducers, { metaReducers }),
EffectsModule.forRoot([]),

[sandangel]

@akash6190 I don't know why but now its gone. May be you should check other comment.

[akash6190]

@sandangel yeah I checked, I was not importing from src and it was still throwing the error, but it stopped throwing error when i used ng serve --aot .

[manojdcoder]

@akash6190 Did you find the real issue / solution here, in my case also non aot build throws same error.

[SheriffKhan]

@brandonroberts Kindly look into this..

When I am importing StoreModule in app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
By only importing StoreModule in below line, erros is coming...
import { StoreModule } from '@ngrx/store'; 
import { AppComponent } from './app.component';

// import { reducer } from './reducers/Tutorial.reducer';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

>    either I am using below line or not but getting below error

    StoreModule.forRoot({}) 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Below error is coming, kindly help me to resolve this....

ERROR in node_modules/@ngrx/store/src/action_creator.d.ts(11,124): error TS2344: Type 'ParametersType<C>' does not satisfy the constraint 'any[]'.
  Type '{}' is not assignable to type 'any[]'.
    Type '{}' is not assignable to type 'any[]'.
      Property 'includes' is missing in type '{}'.
node_modules/@ngrx/store/src/models.d.ts(30,58): error TS2304: Cannot find name 'unknown'.
node_modules/@ngrx/store/src/models.d.ts(30,82): error TS2370: A rest parameter must be of an array type.
node_modules/@ngrx/store/src/models.d.ts(31,52): error TS2370: A rest parameter must be of an array type.
node_modules/@ngrx/store/src/models.d.ts(31,73): error TS2304: Cannot find name 'unknown'.

[alex-okrushko]

@SheriffKhan please open a new issue (I don't think it's related to the discussion above).
Also, provide the code snippet for your action creator - this is where the error is coming from.