ngrx / platform Goto Github PK

Since the upgrade, INIT actions are no longer being pickup up via any effects.

I've also confirm that I'mm using the EffectsModule.forRoot([AppEffects])

Test Setup

it would be nice make some experiments also with OAO instead of lerna, because it's yarn based.

Was just migrating to the nightly build and ran across this updating to the latest dev-tools

tsc -v 2.3.4

main.browser.ts:26 TypeError: Cannot read property 'asObservable' of undefined
    at new StoreDevtools (store-devtools.es5.js:544)

There should be an issue template for new issues (as in https://github.com/angular/material2/issues/new, or in issue #61).

Additionally it would be helpful to have a Plunker with the nightly builds and some sort of easy test case and everything included (store, effects, router-store, devTools, db).

Including the nightly builds into an app that used the 2.x branch results in the following console error(s):

polyfills.bundle.js:10977 Unhandled Promise rejection: No provider for SingletonEffectsService! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for SingletonEffectsService!

My setup is that I have a core module (which includes the entire ngrx stuff) that I yarn link into a web and mobile project. For core: ngc -p tsconfig.json compiles successfully (config similar to web - see below).
For web: ng serve --proxy-config proxy.conf.json compiles properly also.

The issue appears on the first load, where it checks for authentication (using effects).

I know it is hardly alpha status ... maybe it helps.
Btw: I followed the migration guide.

node: 7.8.0
os: darwin x64
Typescript: 2.3.3

@angular/cli: 1.0.6
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.6-1fce545
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.6
@angular/compiler-cli: 4.1.3
@angular/platform-server: 4.1.3

tsconfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "tinymce"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "paths": {
      "@angular/common": ["../node_modules/@angular/common"],
      "@angular/compiler": ["../node_modules/@angular/compiler"],
      "@angular/compiler-cli": ["../node_modules/@angular/compiler-cli"],
      "@angular/core": ["../node_modules/@angular/core"],
      "@angular/http": ["../node_modules/@angular/http"],
      "@angular/router": ["../node_modules/@angular/router"],
      "@angular/platform-browser": ["../node_modules/@angular/platform-browser"],
      "@ngrx/effects": ["../node_modules/@ngrx/effects"],
      "@ngrx/store": ["../node_modules/@ngrx/store"],
      "@ngrx/router-store": ["../node_modules/@ngrx/router-store"],
      "@types/node": ["../node_modules/@types/node"],
      "ng2-webstorage": ["../node_modules/ng2-webstorage"],
      "rxjs": ["../node_modules/rxjs"],
      "tslint": ["../node_modules/tslint"],
      "zone.js": ["../node_moduleszone.js"]
    }
  }
}

• need to set up browser testing infrastructure
• needs moar integration tests
• decide if current Schema API is what we want to keep?

Now 4.0 and Universal are out in the wild, we should see about making state hydration a bit simpler, and enabling developers to as automagically-as-possible transfer initial state from client -> server.

Hi!

I'm trying to create a selector for my feature and I'm wondering what should be the most proper way to do it. Now I have a simple selector like this
const getValues = (state: State) => state.values && state.values;

A wrapper feature selector like this:
export const getValuesForFeatrue = (featureName: string) => createSelector(createFeatureSelector(name), getValues);

And I can call this from my component:
this.store.select(fromReducer.getValuesForFeatrue(this.config.featureName))

It is working but dont think this is the best way to implement a feature selector. Any suggestions?

Bug, feature request, or proposal:

BUG

What is the expected behavior?

Not to loop forever.

What is the current behavior?

If I use a guard for authenticated routes with StoreRouterConnectingModule it gets stuck.

My code for easier understanding:

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const url: string = state.url;
    return this.checkLogin(url);
  }

  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.canActivate(childRoute, state);
  }

  checkLogin(url: string): boolean {
    if (this.authService.isLoggedIn) { return true; }
    this.authService.redirectURL = url;
    this.router.navigateByUrl('/login');
    return false;
  }

This guard checks if the users is logged in. The this.authService.isLoggedIn gets data from the state of the store. The this.authService.redirectURL dispatches an event to set the redirectURL in the store. Than the redirects to /login which is not have this guard. The routing from the router action (maybe changing state during another state change) causes the app stuck.

If I remove the StoreRouterConnectingModule from the app module everything works as guards and navigate and not handled by the ngrx.

What are the steps to reproduce?

Redirect from a guard with activated StoreRouterConnectingModule. I made a repo for the bug.

Which versions of Angular, NGRX, OS, TypeScript, CLI, browsers are affected?

Newest nightly with angular 4.2.6.

Currently, RouteNavigationPayload stores a reference to a RouterStateSnapshot instance.

RouterStateSnapshot is likely to contain circular references (e.g. child routes have pointers to their parent) and thus it prevents navigation actions to be properly encoded as a JSON string.

As mentioned in this thread, unserializable actions are not advised as they can lead to compatibility issues with some redux libraries/tools.

Do you plan to address this issue in the future by converting navigation actions into "serialization-compliant" objects ?

Please open https://github.com/ngrx/store/ issues back since a lot of useful information is not available anymore.

Just curious and I'm still trying some things out for how i want to structure my state, I plan to have a few Large Modules comprised of several smaller modules within each and I'm wanting to introduce feature state and reducers lazily, and some eager modules with root state. Does changing the angular preloading strategy for instance to PreloadAllModules effect state composition when using the forFeature module loading of state?

I have a selector with 4 arguments that looks something like this:

export const getCurrentHourComposed = createSelector(getCurrentHour, getWeekHours, getAllEvents, getAllSchoolyears, (currentHour, hours, events, schoolyears) => {/*...*/}

My IDE is throwing the following error:

Argument of type '(currentHour: any, hours: any, events: any, schoolyears: any) => IEvent' is not assignable to parameter of type '(s1: any, s2: any, s3: any) => IEvent'.

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Events can be sent from js code of different domains with devtools enabled.

What is the current behavior?

If an event comes from an other domain and the devtools is enabled then I get the following error. (This was thrown with code of google authentication.) If I remove the devtools module, then everything is working.

Error: DOMException: Blocked a frame with origin "http://localhost:4200" from accessing a cross-origin frame.
    at webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (http://localhost:4200/vendor.bundle.js:24751:12)
    at webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (http://localhost:4200/vendor.bundle.js:24694:21)
    at webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (http://localhost:4200/vendor.bundle.js:24634:25)
    at webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (http://localhost:4200/vendor.bundle.js:24598:17)
...
at handlerFn (http://localhost:4200/vendor.bundle.js:25524:32)
    at (anonymous) (https://apis.google.com/js/platform.js:17:347)
    at Ma (https://apis.google.com/js/platform.js:9:466)
    at b (https://apis.google.com/js/platform.js:17:330)
...

What are the steps to reproduce?

I managed it with an effect.

@Effect() authenticateGoogle$ = this.actions$.ofType(AUTHENTICATION_GOOGLE_STARTED)
        .mergeMap(() => {
                return Observable.fromPromise(gauth.signIn({
                    ux_mode: 'redirect'
                }))
                    .map(() => new AuthenticationGoogleCheckAction())
                    .catch(() => Observable.of(new AuthenticationGoogleFailedAction()));
        });

Is there anything else we should know?

I use the latest nightly and angular-cli.

The error is because the code is using data of the other sites. This stackoverflow question can help.

Just wondering if there's an ETA / roadmap on when ngrx 4.x is targeted to be available on npm?

Use Conventional Changelog to generate a changelog when publishing packages.

I know there has been discussions on this before, but with my current setup (see #29) I am still getting a ngc compilation error (TS 2.3.3), when using something like actions.payload:

Property 'payload' does not exist on type 'SettingActions'.

The selector from PHPStorm does also not recognize the payload:

Interesting is that it seems to take the type from the first action (which indeed does not have a payload constructor). Here is the corresponding action file:

....
export const LIST_SETTINGS: string = '[Settings] List';
export const LIST_SETTINGS_SUCCESS: string = '[Settings] List Success';

export class ListSettingAction implements Action {
    readonly type: string = LIST_SETTINGS;
}

export class ListSettingSuccessAction implements Action {
    readonly type: string = LIST_SETTINGS_SUCCESS;
    constructor(public payload: any[]) { }
}

....

export type SettingActions
    = ListSettingAction
    | ListSettingSuccessAction ....

node_modules/@ngrx/store/src/state.d.ts (20,68): Type 'StateActionPair<T, V> | undefined' has no property 'state' and no string index signature.

When I add the option "strictNullChecks": false, the error goes away.

Pretty soon here the Angular team will be releasing Schematics, a new library for doing code generation and modification. It's the tool Angular CLI will use for generating components, tests, etc.

It's extensible, so we should develop a set of Rules for schematics that handle some of the boilerplate of ngrx. Things like:

• generating reducers and tests
• generating reducers w/ a set of passed actions
• generating CRUD-reducers
• creating effects
• etc

This is blocked proper until a release of Schematics, but feedback on what kind of rules would be useful is welcome.

As a dev I want to git-tip NgRx core members and help fuel this library.
:)

Bug, feature request, or proposal:

BUG

What is the expected behavior?

Nightlies should compile

What is the current behavior?

running ngc produces this:

Error at /Applications/MAMP/htdocs/memberhive2/core/node_modules/@ngrx/store/store.d.ts:11:10: Module '"/Applications/MAMP/htdocs/memberhive2/core/node_modules/@ngrx/store/src/store_module"' has no exported member '_initialStateFactory'.
Error at /Applications/MAMP/htdocs/memberhive2/core/node_modules/@ngrx/store/store.d.ts:12:10: Module '"/Applications/MAMP/htdocs/memberhive2/core/node_modules/@ngrx/store/src/tokens"' has no exported member '_INITIAL_STATE'.

Looking at the source files there is indeed no function of that kind.
What gives?

What are the steps to reproduce?

Pulling from nightlies and compiling any code with ngc.

Which versions of Angular, NGRX, OS, TypeScript, CLI, browsers are affected?

TS: 2.4.1
@angular/cli: 1.2.0
node: 8.1.3
os: darwin x64
@angular/animations: 4.2.6
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.2.6
@angular/compiler: 4.2.6
@angular/core: 4.2.6
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.2.6
@angular/http: 4.2.6
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.2.6
@angular/platform-browser-dynamic: 4.2.6
@angular/router: 4.2.6
@angular/cli: 1.2.0
@angular/compiler-cli: 4.2.6
@angular/platform-server: 4.2.6

Is there anything else we should know?

It was this last commit that did not include it properly: ngrx/store-builds@b916d04

Problem:

Currently, you must pass an ActionReducerMap to StoreModule.forFeature(featureName: string, reducers: ActionReducerMap<any, any>). Sometimes, a feature module only needs a single reducer to be registered. By not allowing this, it will add an unnecessary intermediate step to get to the desired state.

Proposal:

Allow for StoreModule.forFeature(featureName: string, reducer: ActionReducer<any, any>).

Current functionality:

State interfaces

export interface PilotsModuleState {
  pilot: PilotState;
}

export interface PilotState {
  pilots: Pilot[]
}

feature.module.ts

imports: [
  ...,
  StoreModule.forFeature('pilotsModule', { pilot: pilotReducer })
]

Feature selectors:

const selectPilotsModule = createFeatureSelector<PilotsModuleState>('pilotsModule');
const selectPilotsState = createSelector(selectPilotsModule, (state: PilotsModuleState) => state.pilot);
const selectPilots = createSelector(selectPilotsState, (state: PilotState) => state.pilots);

Desired functionality:

State interfaces

export interface PilotsModuleState {
  pilots: Pilot[]
}

feature.module.ts

imports: [
  ...,
  StoreModule.forFeature('pilotsModule', pilotReducer)
]

Feature selectors:

const selectPilotsModule = createFeatureSelector<PilotsModuleState>('pilotsModule');
const selectPilots = createSelector(selectPilotsState, (state: PilotsModuleState) => state.pilots);

Hello,

Versions:
typescript: 2.4.1
ngrx/store: latest nightly build
angular: 4.2.5

On AOT Build im receiving type errors

Type 'Store<
Customer[]>' is not assignable to type 'Observable<Customer[]>'.
  Types of property 'subscribe' are incompatible.
    Type '{ (): Subscription; (observer: PartialObserver<Readonly<Customer[]>>): Subscription; (next?: (val...' is not assignable to type '{ (): Subscription; (observer: Pa
rtialObserver<Customer[]>): Subscription; (next?: (value: Custom...'.
      Types of parameters 'next' and 'next' are incompatible.
        Types of parameters 'value' and 'value' are incompatible.
          Type 'Readonly<Customer[]>' is not assignable to type 'Customer[]'.

in customers-list.component

customers$: Observable<Customer[]>; 
this.customers$ = this.store.select(customers);

customers selector

export const customers = createSelector(customerState, (state: state) => {
    return state.customers.ids.map(id => state.customers.entities[id]);
});

In my opinion ngrx/store performs poor in regards to reusability. Recently I opened an issue in ngrx/store and got the advice to add a scope string field to my action in order to re-use my reducer. That works but has its drawbacks.

I guess a lot of issues can be resolved (especially effect reuse through extending .ofType() and so on with it) trough adding a scope?: string; field to the {Action} from '@ngrx/store';

Also i think ngrx/store should promote one way of doing it. E.g. should an action have a scope that you pass in when you call the action or should there be a single action for each re-used slice of your state?

Also how should effects be re-used? Afaik the @Effect annotation doesn't work in abstract classes yet.

Migrating from effects#95 (cc @CoderCat84)

Just wanted to throw a thought out there, has it ever been considered to run ngrx/effects on a web worker? It seems like pretty prime case for it given that it subscribes to messages and responds with a message and doesn't access the DOM. There would obviously be some challenges like getting the latest state from the store but I feel like; at least in the way that I use ngrx this might work well, my reducers are pure and simple my views only subscribe to observable from the store and my effects do all of the heavy lifting.

I like this idea, a lot, and we should make this A Thing. cc @jeffbcross @alxhub

Would be reasonably straightforward to use angular/core (for DI) run effects in the background, and implement a simple bridge API that handles piping actions to the appropriate remote thread.

cc @surma cuz this would probably be pretty neato with some of your API sketches...

If I use the StoreDevtoolsModule and StoreRouterConnectingModule side by side I get the following error:

Unhandled Promise rejection: Cannot read property 'next' of undefined ; Zone: <root> ; Task: Promise.then ; Value:
TypeError: Cannot read property 'next' of undefined
TypeError: Cannot read property 'next' of undefined
    at ReducerManager.webpackJsonp.../../../../@ngrx/store/@ngrx/store.es5.js.ReducerManager.updateReducers (http://localhost:4200/vendor.bundle.js:1666:24)
    at ReducerManager.webpackJsonp.../../../../@ngrx/store/@ngrx/store.es5.js.ReducerManager.addReducer (http://localhost:4200/vendor.bundle.js:1650:14)
    at ReducerManager.webpackJsonp.../../../../@ngrx/store/@ngrx/store.es5.js.ReducerManager.addFeature (http://localhost:4200/vendor.bundle.js:1633:14)
    at http://localhost:4200/vendor.bundle.js:1993:69
    at Array.forEach (<anonymous>)
    at new StoreFeatureModule (http://localhost:4200/vendor.bundle.js:1993:18)
    at _createClass (http://localhost:4200/vendor.bundle.js:80913:17)
    at _createProviderInstance$1 (http://localhost:4200/vendor.bundle.js:80881:26)
    at initNgModule (http://localhost:4200/vendor.bundle.js:80835:13)
    at new NgModuleRef_ (http://localhost:4200/vendor.bundle.js:81943:9)

If I use only one of them it is working. With using only devtools I can debug. I couldn't really test if the router connector is working without the devtools. I tried to change the order of the modules in the import part of the main module, but none of them worked.

Feature Request / Document Request

@ngrx/platform may benefit from a more complete and practical sample app.

This package ngrx-lazy-load by @FabienDehopre is really easy to follow and covers many things.

Lazily loaded modules are only referenced once (indirect), and that is in the root route via the loadChildren methods. As per the following example.

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'one',
    loadChildren: './one/one.module#OneModule'
  },
  {
    path: 'two',
    loadChildren: './two/two.module#TwoModule'
  }
];

Effects (hacked), Models, Services, Actions, Reducers & States (no Persistence example), are all within the lazily loaded modules themselves without any external direct referencing.

The compiler is throwing an error due to wrong typings for @ngrx/store nightly builds.

This is the error message:

Class 'Observable<Readonly<T>>' defines instance member property 'select', but extended class 'Store<T>' defines it as instance member function

I'm using RxJs v5.4.0.

Currently we can declare reducers in module hierarchy. We still always provide the root Store though. It would be nice if we could further separate individual modules, allowing them to request only the innermost FeatureStore (which is a view of the store for a specific feature).

(ngrx is great BTW)

I have been using the 2.x branch of store, effects, and router-store for a while now and want to upgrade to the 4.x versions. However, I don't see any instructions on how to use the nightly build for the packages under ngrx/platform. It would be great if you could point me in a direction and would really appreciate your help .

Issued a request over at the material design vscode icons repository for the addition of ngrx icons. checkout #92 and comment if i missed something

@MikeRyanDev @brandonroberts @robwormald
Suggested the github ngrx icon, if you guys are ok with its usage or have a better idea 😄 Thought i'd post an issue here to get some thoughts on the idea and ask about the image.

Perhaps I am missing something obvious (likely so!), but is the EffectsTestingModule and testing barrel just not currently being published with the nightly builds?
https://github.com/ngrx/effects-builds

I have been loving the 4.x api and was trying to test some effects but realized the @ngrx/effects/testing bundle does not exist in these builds?

Forgive me if I'm missing something incredibly obvious!

Hi,

Using v4 I saw the the router state that comes in @ngrx/router-store has a state property that holds a reference to RouterStateSnapshot from @angular/router.

I'm not sure why the state needs to hold this object but it causes some issues.

• In #97 we can see a performance issue, this is probably due to the RouterStateSnapshot object, pretty sure about that... the redux dev tool try to render it and its a huge object when rendering deep.

• The store can not be frozen.

The RouterStateSnapshot hold reference to a lot of objects... components, router tree's and what not. A lot of them change internally, i.e. get's mutated which makes the store mutable.

This means using a library like ngrx-store-freeze in development mode is not possible since deep freezing the store (state) will result in exceptions all over since deep objects in RouterStateSnapshot are expected to be mutable.

In general the store should be light, holding POCOs only.

cc @vsavkin, thoughts?

Bug, feature request, or proposal:

BUG

What is the expected behavior?

No errors

What is the current behavior?

When using StoreDevTools and the RouterConnectionModule together I also am getting some issues, which are the same as in the 2.x branch (see ngrx/store-devtools#61).

The error is the same:

ERROR Error: Uncaught (in promise): TypeError: toISOString is not a function
TypeError: toISOString is not a function
    at String.toJSON (<anonymous>)
    at Object.<anonymous> (_ctx.js:18)
    at derez (<anonymous>:2:5451)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:5890)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at String.toJSON (<anonymous>)
    at Object.<anonymous> (_ctx.js:18)
    at derez (<anonymous>:2:5451)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:5890)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at resolvePromise (zone.js:770)
    at resolvePromise (zone.js:741)
    at zone.js:818
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3924)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)

What are the steps to reproduce?

It happens after a dispatch action and then navigating away from that page. The FIRST click creates the above error. The second click works again, after which the error does not occur again.

Refreshing the page and following the same steps creates the same issue.

If I take out the RouterConnectionModule the error DOES NOT occur.

The setup in AppModule is the following:

imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpModule,
        AppRoutingModule,
        MHCoreModule,
        StoreModule.forRoot(reducers),
        !environment.prod ? StoreDevtoolsModule.instrument() : [],
        StoreRouterConnectingModule,
        EffectsModule.forRoot([
            PersonEffects,
            AuthEffects,
            SettingsEffects,
            InteractionEffects
        ]),
        FormsModule,
        ReactiveFormsModule,
        AppMaterialModule,
        MHCommonModule,
        SearchModule,
        InteractionModule
    ],

Which versions of Angular, NGRX, OS, TypeScript, CLI, browsers are affected?

node: 8.1.3
os: darwin x64
TS: 2.3.4
@angular/cli: 1.2.0
@angular/animations: 4.2.5
@angular/cdk: 2.0.0-beta.7-b00f838
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/core: 4.2.5
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/material: 2.0.0-beta.7
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/router: 4.2.5
@angular/cli: 1.2.0
@angular/compiler-cli: 4.2.5
@angular/platform-server: 4.2.5

Is there anything else we should know?

May relate to #60

I've found that my app becomes quite slow if StoreRouterConnectingModule and StoreDevtoolsModule are both imported.

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

Observations

• CPU usage by Chrome is at least 30% constantly. In the Chrome task manager I've seen the dev tools extension process use 100%+ CPU and 2+ GB of RAM.
• I started with maxAge: 50, changing it to as low as maxAge: 2 didn't help.
• Performance seemed to be worse if I flipped the order of EffectsModule and StoreRouterConnectingModule.
• I found that exporting the state from the dev tools yielded a 27 MB JSON file. If the StoreRouterConnectingModule was removed, it was 71 KB.
• Most of the 27 MB file has data like this:

 "computedStates": [
    {
      "state": {
        "router": {
          "state": {
            "_root": {
              "value": {
                "url": [],
                "params": {},
                "queryParams": {},
                "data": {},
                "outlet": "primary",
                "_routeConfig": null,
                "_urlSegment": {
                  "segments": [],
                  "children": {
                    "primary": {
                      "segments": [
                        {
                          "path": "app",
                          "parameters": {}
                        },
                        {
                          "path": "users",
                          "parameters": {}
                        }
                      ],
                      "children": {},
                      "parent": {
                        "segments": {
                          "$jsan": "$.computedStates[0].state.router.state._root.value._urlSegment.segments"
                        },
                        "children": {
                          "$jsan": "$.computedStates[0].state.router.state._root.value._urlSegment.children"
                        },
                        "parent": null,
                        "_sourceSegment": {
                          "$jsan": "$.computedStates[0].state.router.state._root.value._urlSegment"
                        },
                        "_segmentIndexShift": 0
                      }
                    }
                  },
                  "parent": null
                },
                "_lastPathIndex": -1,
                "_resolve": {},
                "_routerState": {
                  "$jsan": "$.computedStates[0].state.router.state"
                }
              },

Profiling Results

Top of call tree:

Next highest in tree:

Versions

Angular: 4.2.6
Angular CLI: 1.2.1
NGRX: 4.0.0

Browser: Chrome 59.0.3071.115
OS: macOS 10.12.5
Node: 6.11.0
Yarn: 0.27.5

import { provideMockActions } from '@ngrx/effects/testing';

I get this error.
/node_modules/@ngrx/effects/testing.d.ts (1,15): Cannot find module './effects/testing/index'.

I'll submit a PR.

export const selectFeature = createFeatureSelector('feature');
~~~~~~~~~~~~~~~

error TS4023: Exported variable 'selectFeature' has or is using name 'MemoizedSelector' from external module ".../ngrx/modules/store/src/selector" but cannot be named.

We are having issues with package versions of @ngrx/store and @ngrx/store-devtools.

Here are our current versions from package.json:

    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^2.2.2",
    "@ngrx/store-devtools": "^3.2.4",

When we do an npm install on our code, @ngrx/store-devtools does not get installed.
When we do a second npm install it is installed.

I'm currently on npm 5.0.3 (node v6.9.4, via brew). It does not provide any error messages about this issue; however, earlier today, when I was on npm 3.10.10, I got the following message after npm install:

├── @ngrx/[email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]


npm WARN @ngrx/[email protected] requires a peer of @ngrx/store@^2.0.0 but none was installed.

Can you please recommend any fixed versions of @ngrx/core, store, and store-devtools or other work-arounds?

Suppose I have a couple of reducers that all have a message in their state.
I want to create, in the meta reducer, a call that checks whether any of these states have a message that needs to be displayed.

I am doing it like this now:

export const getMessageP: any = createSelector(getPersonState, person.getMessagePerson);
export const getMessageS: any = createSelector(getSettingsState, settings.getMessageSettings);
export const getMessage:any =  createSelector(getMessageP, getMessageS,
    (msgP: any, msgS: any) => {
    return msgP || msgS;
});

That seems overly complicated. I checked the docs for combination of reducers, but the API is not well documented. Is there a better way to do something like that with v4?

ENV:
ngrx: nightly-builds
TS: 2.3.4
NG: 4.2.2
NPM 8

tldr, if you don't actually bootstrap a component, effects doesn't start up. This popped up for an internal team at Google using ngUpgrade, but might also show up if you use ngDoBootstrap to start up an angular app (instance of a root ngModule) before actually starting UI.

cc @MikeRyanDev @brandonroberts

Hey, trying to understand the new fractal state management, and ran into the following in the example app:
https://github.com/ngrx/platform/blob/master/example-app/app/books/reducers/index.ts#L22-L24

export interface State extends fromBooks.State {
  'books': BooksState;
}

I don't entirely understand the new system yet, but to the degree that I do, I would have expected State to extend fromRoot.State, not fromBooks.State. Am I confused, or is this an issue with the example app?

This is problem carried over from @ngrx/store (see: 273, 348).

AoT requires static objects in module definitions, so dynamic initial state is only possible with:

1. At least support for an initialState function
   or
2. Putting a meta-reducer on top of everything for this purpose alone (as described in my comment on 348). The second case seems unnecessarily unnecessarily complicated for something so easy to support in the library itself.

The Store<T> definition has been changed to extend Observable<Readonly<T>>. The problem with this is that this does not cater properly for all read only objects - specifically read only index accessors and read only arrays.

If you select an object that implements ReadonlyArray<T> and try to use that as an array, you'll receive an error because [Symbol.iterator] is not included in any mapped type enumerations (see microsoft/TypeScript#12377). Readonly<[]> does not prevent you from adding or removing items in the array, and that's why using ReadonlyArray is necessary.

I think Readonly<T> should be changed to T and the developer should be responsible for applying it to the definition of their state object.

Should there be payload?: any here on the Action interface?

I've just updated my nightly build to the following commits

"@ngrx/effects@github:ngrx/effects-builds":
  version "4.0.0-alpha.0"
  resolved "https://codeload.github.com/ngrx/effects-builds/tar.gz/2487f6c2d7077c8e40ad854d57bf1ebb7737c347"

"@ngrx/store-devtools@github:ngrx/store-devtools-builds":
  version "4.0.0-alpha.0"
  resolved "https://codeload.github.com/ngrx/store-devtools-builds/tar.gz/c242ff24d168c2c0224b9be469f7e5740bf8a151"

"@ngrx/store@github:ngrx/store-builds":
  version "4.0.0-alpha.0"
  resolved "https://codeload.github.com/ngrx/store-builds/tar.gz/69367776359fcada4d22293b79ae98812180a4f4"

This is the build that removed EffectsModule.run() and added EffectsModule.forFeature()

However, my effects are only running for root module and not for feature modules.

My npm dependencies

 "devDependencies": {
    "@angular/cli": "^1.1.1",
    "@angular/compiler-cli": "^4.1.3",
    "@angular/language-service": "^4.1.3",
    "@angularclass/hmr": "^1.2.2",
    "@compodoc/compodoc": "^1.0.0-beta.9",
    "@types/jasmine": "^2.5.51",
    "@types/jszip": "^0.0.33",
    "@types/lodash": "^4.14.65",
    "@types/node": "^7.0.29",
    "codelyzer": "~3.0.1",
    "jasmine-core": "^2.6.3",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "^5.4.3",
    "typescript": "~2.3.3"
  },
  "dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/common": "^4.1.3",
    "@angular/compiler": "^4.1.3",
    "@angular/core": "^4.1.3",
    "@angular/forms": "^4.1.3",
    "@angular/http": "^4.1.3",
    "@angular/platform-browser": "^4.1.3",
    "@angular/platform-browser-dynamic": "^4.1.3",
    "@angular/router": "^4.1.3",
    "@angular/service-worker": "^1.0.0-beta.15",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25",
    "@ng2-dynamic-forms/core": "1.4.11",
    "@ng2-dynamic-forms/ui-bootstrap": "1.4.11",
    "@ngrx/effects": "github:ngrx/effects-builds",
    "@ngrx/store": "github:ngrx/store-builds",
    "@ngrx/store-devtools": "github:ngrx/store-devtools-builds",
    "angular2-text-mask": "^8.0.1",
    "angular2-uuid": "^1.1.1",
    "angulartics2": "^2.2.2",
    "autotrack": "^2.4.1",
    "aws-sdk": "^2.67.0",
    "bootstrap": "4.0.0-alpha.6",
    "class-transformer": "^0.1.6",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jsoneditor": "^5.5.11",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "ng-http-interceptor": "^3.0.1",
    "primeng": "^4.0.2",
    "reflect-metadata": "~0.1.10",
    "rxjs": "^5.2.0",
    "zone.js": "^0.8.12"
  }

Please improve migration guide and describe what is the replacement of go, show, replace, back actions, because they are not in router-store anymore.

Angular's metadata decorators (@Componentetc) aren't really runtime decorators, they're used more like "annotations". Angular tooling has the ability to "downlevel" these decorannoations into static class properties, which are then read by Angular's reflector.

This is accomplished w/ a JSDoc annotation - see https://github.com/angular/angular/blob/a80ac0a8d3238f483a05252c437d4b321c42f5c7/packages/core/src/metadata/directives.ts#L67-L68

When run through ngc with the annotateForClosureCompiler option, usages of decorators tagged with this JSDoc are rewritten:

/**
* @Annotation
**/
export function Effect(args?){ return function(...args?){} }

used like

class Foo {
  @Effect() someProp:whatever
}

downlevels to

class Foo {}
Foo.propDecorators = {
  foo: [{type: Effect, args: [] }]
}

For full closure compatibility, we need to implement the same functionality - at runtime, we just need to check those static properties before checking via Reflect, as seen in : https://github.com/angular/angular/blob/master/packages/core/src/reflection/reflection_capabilities.ts#L73-L85

internal bug : b/63801869

Setup same as #29 ... I followed the docs more closely now. I get:

unhandled Promise rejection: Cannot read property 'asObservable' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'asObservable' of undefined
    at new StoreDevtools (store-devtools.es5.js:544)

The import section from the app.module.ts looks like this:

imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        FlexLayoutModule,

        AppMaterialModule,
        AppRoutingModule,
        MHCoreModule,

        StoreModule.forRoot(reducers),
        StoreRouterConnectingModule,
        !environment.prod ? StoreDevtoolsModule.instrument() : [],

        EffectsModule.forRoot(),
        EffectsModule.run(PersonEffects),
        EffectsModule.run(AuthEffects),

        CommonModule,
        SearchModule,
        InteractionModule
    ],

The reducer import like so (partial):

import {
    ActionReducerMap,
    createSelector } from '@ngrx/store';
import { routerReducer, RouterReducerState } from '@ngrx/router-store';

import * as interaction from 'mh-core';
import * as person from 'mh-core';
import * as settings from 'mh-core';
import * as auth from 'mh-core';

export interface AppState {
    interaction: interaction.InteractionState;
    person: person.PersonState;
    settings: settings.SettingsState;
    auth: auth.AuthState;
    router: RouterReducerState;
}

export const reducers: ActionReducerMap<AppState> = {
    interaction: interaction.interactionReducer,
    person: person.personReducer,
    settings: settings.settingsReducer,
    auth: auth.authReducer,
    router: routerReducer
};

You should create Actions classes for router-store to avoid this kind of reducer definitions :

export function reducer(
  state: State = initialState,
  action: feature.Actions | { type: string, payload?: any },
  ) : State {
  switch (action.type) {
    case fromRouter.ROUTER_NAVIGATION: {
    }
    case feature.MY_FEATURE_ACTION: {
    }
}

(or bring back the Action interface with the payload property)

When ever I try introducing an effect in main AppModule like this:

EffectsModule.forRoot([
  LoginEffects
]),

I get the following error (even if the effect is completely empty):

TypeError: Cannot read property 'lift' of undefined
 at observeOn...
 at new State...

This is on Chrome, my node version is 7.7.3 and npm 4.1.2.
Any help is greatly appreciated.