vsavkin / state_management_ngrx4 Goto Github PK

View Code? Open in Web Editor NEW

206.0 19.0 55.0 27 KB

TypeScript 82.93% JavaScript 6.18% CSS 3.76% HTML 7.13%

state_management_ngrx4's Introduction

Application Showing How to Use NgRx 4

This application illustrates how to use NgRx 4 to implement the state management of your application.

It is based on this talk: https://www.youtube.com/watch?v=brCGZ8Lk-HY&t=1107s

The first commit shows an application with an ad-hoc state-management strategy (with a few issues).
The second commit fixes the issues in ad-hoc way.
The third commit is the refactoring introducing NgRx 4.

Try It!

Go to server
Run npm install
Run npm run server
Go to clientapp
Run npm install
Run ng serve

state_management_ngrx4's People

Contributors

Stargazers

Watchers

Forkers

dimajoyti abner mrjmd amikitevich parksangkil dimaslz hecmonter rmundy padamshrestha harendranathvegi9 alissonsn bikashmstha rainstormza ptzagk stasillias rupeshtiwari hoangdepzai95 donggunn anandakumarpalanisamy getcodepanda hzhangatswann samuelexyz paxibay d-trattner sharbel93 engalar baltoaca alejandrogkl techieinme derejekitaw edyarve hgbrown area73 rootn3rd mrjasonweaver mailightkun aomanovic itskrsna walterleinert 4by4rus danho194 sreenivasarajiv rvfeed plugn lamnguyen297 hanastasov thinkvic nrwl genpri souhail-chougrani jyoti0291 vegiharendranath33

state_management_ngrx4's Issues

Guard and ROUTER_NAVIGATION execution order

I have a question - this is not a code issue.
I like the ngrx-router approach but there are some circumstances that I do not know how to solve:

During the navigation, before any guards or resolvers run, the router will dispatch a ROUTER_NAVIGATION action, which has the signature RouterNavigationAction

(source: https://github.com/ngrx/platform/tree/master/docs/router-store)

How to combine ROUTER_NAVIGATION with a route guard :

private handleNavigation(segment: string, callback: (a: ActivatedRouteSnapshot, state: State) => Observable<any>) {
    const nav = this.actions.ofType(ROUTER_NAVIGATION).
    map(firstSegment).
    filter(s => s.routeConfig.path === segment);

    return nav.withLatestFrom(this.store).switchMap(a => callback(a[0], a[1])).catch(e => {
        console.log('Network error', e);
        return of();
    });
}
}

with for example AuthGuard which is executed after ROUTER_NAVIGATION action but I want to guard the segment here or I need some data that are fetched asynchronously and are not yet in the store (request has been excuted, data have not arrived yet - a data guard - again executed after ROUTER_NAVIGATION).

ng serve fails for first commit

the first commit fails with:

ERROR in Metadata version mismatch for module /Users/username/state_management_ngrx4/clientapp/node_modules/@ngrx/store/store.d.ts, found version 4, expected 3, resolving symbol AppModule in /Users/username/state_management_ngrx4/clientapp/src/app/app.module.ts, resolving symbol AppModule in /Users/username/state_management_ngrx4/clientapp/src/app/app.module.ts, resolving symbol AppModule in /Users/username/state_management_ngrx4/clientapp/src/app/app.module.ts

Karma tests failure

All tests fail when executing npm run test:

22 08 2017 12:21:00.847:INFO [Chrome 60.0.3112 (Linux 0.0.0)]: Connected on socket wNdGVSze3gUsiMvnAAAC with id 86580283
Chrome 60.0.3112 (Linux 0.0.0) AppComponent should create the app FAILED
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </h1>
        [ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/AppComponent.html@4:0
        Error: Template parse errors:
            at syntaxError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9507:34)
            at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:20627:19)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34779:39)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:62
            at Set.forEach (native)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:19)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34600:19
            at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9496:148)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34598:26)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34530:37)
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </h1>
        [ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/AppComponent.html@4:0
        Error: Template parse errors:
            at syntaxError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9507:34)
            at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:20627:19)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34779:39)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:62
            at Set.forEach (native)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:19)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34600:19
            at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9496:148)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34598:26)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsSync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34522:42)
Chrome 60.0.3112 (Linux 0.0.0): Executed 1 of 3 (1 FAILED) (0 secs / 0.044 secs)
Chrome 60.0.3112 (Linux 0.0.0) AppComponent should create the app FAILED
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </h1>
        [ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/AppComponent.html@4:0
        Error: Template parse errors:
            at syntaxError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9507:34)
            at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:20627:19)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34779:39)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:62
            at Set.forEach (native)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:19)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34600:19
            at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9496:148)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34598:26)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34530:37)
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </h1>
        [ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/AppComponent.html@4:0
        Error: Template parse errors:
            at syntaxError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9507:34)
            at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:20627:19)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34779:39)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:62
            at Set.forEach (native)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:19)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34600:19
            at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9496:148)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34598:26)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsSync (http://localhost:9876/_karma_webpack_/vendor.Chrome 60.0.3112 (Linux 0.0.0) AppComponent should have as title 'app' FAILED
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </h1>
        [ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/AppComponent.html@4:0
        Error: Template parse errors:
            at syntaxError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9507:34)
            at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:20627:19)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34779:39)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:62
            at Set.forEach (native)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:19)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34600:19
            at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9496:148)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34598:26)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34530:37)
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </h1>
        [ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/AppComponent.html@4:0
        Error: Template parse errors:
            at syntaxError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9507:34)
            at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:20627:19)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34779:39)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:62
            at Set.forEach (native)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:19)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34600:19
            at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9496:148)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34598:26)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsSync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34522:42)
Chrome 60.0.3112 (Linux 0.0.0): Executed 2 of 3 (2 FAILED) (0 secs / 0.079 secs)
Chrome 60.0.3112 (Linux 0.0.0) AppComponent should have as title 'app' FAILED
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </h1>
        [ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/AppComponent.html@4:0
        Error: Template parse errors:
            at syntaxError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9507:34)
            at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:20627:19)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34779:39)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:62
            at Set.forEach (native)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:19)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34600:19
            at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9496:148)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34598:26)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34530:37)
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </h1>
        [ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/AppComponent.html@4:0
        Error: Template parse errors:
            at syntaxError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9507:34)
            at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:20627:19)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34779:39)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:62
            at Set.forEach (native)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:19)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34600:19
            at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9496:148)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34598:26)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsSync (http://localhost:9876/_karma_webpack_/vendor.Chrome 60.0.3112 (Linux 0.0.0) AppComponent should render title in a h1 tag FAILED
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </h1>
        [ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/AppComponent.html@4:0
        Error: Template parse errors:
            at syntaxError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9507:34)
            at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:20627:19)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34779:39)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:62
            at Set.forEach (native)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:19)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34600:19
            at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9496:148)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34598:26)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34530:37)
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </h1>
        [ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/AppComponent.html@4:0
        Error: Template parse errors:
            at syntaxError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9507:34)
            at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:20627:19)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34779:39)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:62
            at Set.forEach (native)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:19)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34600:19
            at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9496:148)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34598:26)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsSync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34522:42)
Chrome 60.0.3112 (Linux 0.0.0): Executed 3 of 3 (3 FAILED) (0 secs / 0.095 secs)
Chrome 60.0.3112 (Linux 0.0.0) AppComponent should render title in a h1 tag FAILED
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </h1>
        [ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/AppComponent.html@4:0
        Error: Template parse errors:
            at syntaxError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9507:34)
            at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:20627:19)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34779:39)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:62
            at Set.forEach (native)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:19)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34600:19
            at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9496:148)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34598:26)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34530:37)
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </h1>
        [ERROR ->]<router-outlet></router-outlet>"): ng:///DynamicTestModule/AppComponent.html@4:0
        Error: Template parse errors:
            at syntaxError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9507:34)
            at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:20627:19)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34779:39)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:62
            at Set.forEach (native)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34699:19)
            at http://localhost:9876/_karma_webpack_/vendor.bundle.js:34600:19
            at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9496:148)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:34598:26)
            at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsSync (http://localhost:9876/_karma_webpack_/vendor.Chrome 60.0.3112 (Linux 0.0.0): Executed 3 of 3 (3 FAILED) ERROR (0.125 secs / 0.095 secs)

Immutability issue

Hi Victor, after watching your talk about tackling state in Angular apps I wanted to dig into the code of this repo and while I was reading your reducer I noticed an immutability issue. Checkout model.ts#L49.

case 'RATE': {
  const talks = {...state.talks};
  talks[action.payload.talkId].rating = action.payload.rating; // here a mutation is happening
  return {...state, talks};
}

And it should be

case 'RATE': {
  const talks = {...state.talks};
  talks[action.payload.talkId] = {
    ...state.talks[action.payload.talkId],
    rating: action.payload.rating
  };
  return {...state, talks};
}

Or, I have a preference for this syntax

case 'RATE': {
  return {
    ...state,
    talks: {
      ...state.talks,
      [action.payload.talkId]: {
        ...state.talks[action.payload.talkId],
        rating: action.payload.rating
      }
    }
  }
}

I made a quick repro of the bug that you can run in chrome console

var state = {
  talks: {
    talkId0: { id: 'talkId0', title: 'talk 0', rating: 3 },
    talkId1: { id: 'talkId1', title: 'talk 1', rating: 3 },
  }
};

// talk_updated
var talks = Object.assign({}, state.talks);
talks['talkId0'].rating = 4;

console.log(state.talks['talkId0']); // here notice that the initial state object has been mutated!

BTW your talk was great and I can't wait to give a try to ngrx v4 :).

Cheers

Type argument for type parameter 'T' cannot be inferred from usage in Effect

I'm attempting to implement @ngrx based on this example but I keep getting an error that I just cannot seem to figure out. The issue is with the handleNavigation method. Now, I've tried to basically refactor the standard microsoft Angular4 project template to get the forecasts and put them into a store and access them that way. I created the following model.ts file, but the line....
const nav = this.actions.ofType(ROUTER_NAVIGATION).map(firstSegment).filter((s => s.routeConfig.path === segment)); has the type argument error...

Another issue is that I had to wrap the filter's arrow function in parens or it would tell me that it couldn't see the routeConfig method. I must have missed something really simple as to why this is not working for me.


import { RouterAction, ROUTER_NAVIGATION, RouterNavigationAction } from '@ngrx/router-store';
import { Actions, Effect } from '@ngrx/effects';

import { Backend } from "./shared/backend";
import { Params, ActivatedRouteSnapshot } from "@angular/router";
import { Store, combineReducers } from "@ngrx/store";
import { Injectable } from "@angular/core";
import { of } from "rxjs/observable/of";
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/withLatestFrom';
import 'rxjs/add/operator/switchMap';

//state
export type Forecast = { forecastDate: string, temperatureC: number, temperatureF: number, summary: string };
export type Filters = { date: string };

export type AppState = { filters: Filters, list: number[], forecasts: {[forecastDate:string]:Forecast} }; 
export type State = { app: AppState }; //this will also contain router state

export const initialState: State = {
    app: {
        filters: { date: "" },
        //user: {},
        list: [],
        forecasts: {}                
    }
};

//actions
export type ForecastsUpdated = { type: 'FORECASTS_UPDATED', payload: { forecasts: {[forecastDate:string]: Forecast}, list: number[] }, filters: Filters};
type Action = RouterAction<State> | ForecastsUpdated;

//reducer
export function appReducer(state: AppState, action: Action): AppState
{
    switch(action.type)
    {
        case 'FORECASTS_UPDATED':{
            return { ...state, ...action.payload };            
        }
        default:
        {
            return state;
        }
    }
}

@Injectable()
export class ForecastsEffects
{
    @Effect() navigateToForecasts = this.handleNavigation('forecasts', (r: ActivatedRouteSnapshot) =>
    {
        const filters = createFilters(r.params);
        return this.backend.getForecasts().map(resp => ({ type: 'FORECASTS_UPDATED', payload: { ...resp}}));
    });  

    constructor(private actions: Actions, private store: Store<State>, private backend: Backend, private r: ActivatedRouteSnapshot) { }

    private handleNavigation(segment: string, callback: (a: ActivatedRouteSnapshot, state: State) => Observable<any>)
    {
        const nav = this.actions.ofType(ROUTER_NAVIGATION).map(firstSegment).filter((s => s.routeConfig.path === segment));

        return nav.withLatestFrom(this.store).switchMap(a => callback(a[0], a[1]));//.catch(e => {console.log('Network error', e);return of();});
    }
    
}

function firstSegment(r: RouterNavigationAction): ActivatedRouteSnapshot
{
    return r.payload.routerState.root.firstChild;
}

function createFilters(p: Params): Filters
{
    return { date: p['forecastDate'] || null};
}

npm install is failing for the clientapp

I cloned the project and went through the start-up procedure in the ReadMe.

The npm install is reported to have failed with an error within the npm itself. The generated debug log is attached.

2017-12-07T21_21_13_371Z-debug.log

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.