Platform: Upgrading to latest version of NGRX breaks observables and routing

[witchdrash]

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

What is the current behavior?

I've followed the migration document, and despite this I'm getting huge number of compile errors when running it through webpack.

ERROR in C:/Web/ClientApp/app/state/store/app.store.ts
(45,14): Type '{ router: (state: RouterReducerState, action: RouterAction<...' is not assignable to type 'ActionReducerMap'.
Types of property 'router' are incompatible.
Type '(state: RouterReducerState, action: RouterAction) =...' is not assignable to type 'ActionReducer, Action>'.
Types of parameters 'action' and 'action' are incompatible.
Type 'Action' is not assignable to type 'RouterAction'.
Type 'Action' is not assignable to type 'RouterErrorAction'.
Property 'payload' is missing in type 'Action'.

ERROR in C:/Web/ClientApp/app/state/effects/quote.ts
(75,20): Argument of type '(x: RetrieveQuoteAction) => Observable' is not assignable to parameter of type '(value: Action, index: number) => ObservableInput'.
Types of parameters 'x' and 'value' are incompatible.
Type 'Action' is not assignable to type 'RetrieveQuoteAction'.
Property 'payload' is missing in type 'Action'.

ERROR in C:/Web/ClientApp/app/modules/shared/components/standard-page/standard-page.component.ts
(70,89): Property 'select' does not exist on type 'Observable'.

Expected behavior:

Compiles

Minimal reproduction of the problem with instructions:

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

Other information:

package.json

{
  "name": "Web",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "6.0.1",
    "@angular/cli": "6.0.1",
    "@angular/common": "6.0.1",
    "@angular/compiler": "6.0.1",
    "@angular/compiler-cli": "6.0.1",
    "@angular/core": "6.0.1",
    "@angular/forms": "6.0.1",
    "@angular/http": "6.0.1",
    "@angular/platform-browser": "6.0.1",
    "@angular/platform-browser-dynamic": "6.0.1",
    "@angular/platform-server": "6.0.1",
    "@angular/router": "6.0.1",
    "@ngtools/webpack": "1.9.8",
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "@types/webpack-env": "1.13.0",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "3.0.1",
    "aspnet-webpack": "2.0.1",
    "awesome-typescript-loader": "5.0.0",
    "bootstrap": "3.3.7",
    "chai": "4.0.2",
    "css": "2.2.1",
    "css-loader": "0.28.11",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "1.1.11",
    "fork-ts-checker-webpack-plugin": "^0.4.1",
    "html-loader": "0.5.5",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.6.4",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3",
    "node-sass": "^4.7.2",
    "parallel-webpack": "^2.3.0",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "sass-loader": "^6.0.6",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "ts-loader": "^4.3.0",
    "typescript": "2.7.2",
    "uglify-js": "^3.3.25",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "url-loader": "0.5.9",
    "webpack": "4.8.1",
    "webpack-cli": "^2.1.3",
    "webpack-hot-middleware": "2.22.1",
    "webpack-merge": "^4.1.2",
    "zone.js": "^0.8.26"
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.4",
    "@fortawesome/fontawesome-free-brands": "^5.0.8",
    "@fortawesome/fontawesome-pro-light": "^5.0.8",
    "@fortawesome/fontawesome-pro-regular": "^5.0.8",
    "@fortawesome/fontawesome-pro-solid": "^5.0.8",
    "@ngrx/effects": "5.2.0",
    "@ngrx/router-store": "5.2.0",
    "@ngrx/store": "5.2.0",
    "@ngrx/store-devtools": "5.2.0",
    "autoprefixer": "^8.3.0",
    "core-js": "^2.5.5",
    "es-cookie": "^1.1.1",
    "es6-promise": "^4.2.4",
    "flexboxgrid": "^6.3.1",
    "flexboxgrid-helpers": "^1.1.3",
    "moment": "2.20.1",
    "ng2-device-detector": "^1.0.1",
    "npm": "^5.10.0",
    "pikaday": "^1.7.0",
    "postcss-loader": "^2.1.5",
    "rxjs": "^6.1.0",
    "rxjs-compat": "^6.1.0"
  }
}

import 'rxjs/observable/combineLatest';
import 'rxjs/observable/from';
import 'rxjs/observable/of';
import 'rxjs/operators/map';
import 'rxjs/operators/switchMap';
import 'rxjs/operators/mergeMap';
import 'rxjs/operators/startWith';
import 'rxjs/operators/catch';
import 'rxjs/operators/take';
import 'rxjs/operators/filter';
import 'rxjs/operators/do';
import 'rxjs/observable/timer';
import 'rxjs/observable/empty';
import 'rxjs/operators/exhaustMap';
import 'rxjs/operators/debounceTime';
import 'rxjs/operators/distinctUntilChanged';
import {ActionReducerMap, createFeatureSelector} from '@ngrx/store';
import * as fromRouter from '@ngrx/router-store';
import {Params} from "@angular/router";
import dataReducer from "../reducers/data";
import {DataState} from "../reducers";
import {ConfigurationData} from "../../services/lookup";
import {default as quoteReducer, QuoteState} from "../reducers/quote";
import {default as uiReducer, UiState} from "../reducers/ui";
import {default as analyticsReducer, AnalyticsState} from "../reducers/analytics";

export interface RouterStateUrl {
    url: string;
    params: Params;
    queryParams: Params;
}


// app state is made up of all the individual reducer states
export interface AppState {
    router: fromRouter.RouterReducerState;
    data: DataState;
    quote: QuoteState;
    ui:UiState;
    analytics: AnalyticsState
}

// root reducer

export const reducers: ActionReducerMap = {
    router: fromRouter.routerReducer, 
    data: dataReducer,
    quote: quoteReducer,
    ui:uiReducer,
    analytics: analyticsReducer
};

//used in components to get state slices.
export const getConfiguration = createFeatureSelector('configuration');
export const getDataState = createFeatureSelector('data');
export const getQuoteState = createFeatureSelector('quote');
export const getUiState = createFeatureSelector("ui");
export const getAnalyticsState = createFeatureSelector("analytics");

[timdeschryver]

I'm going to make an assumption that you've upgraded to Angular 6.
If this is the case:
The NgRx 'Angular 6 version' is currently in beta (you can install it via npm i @ngrx/xxx@next or the angular cli via ng update @ngrx/store --next.
If you don't want the beta version you can install rxjs-compat.

[witchdrash]

Unfortunately rxjs-compat is installed and has no effect, it remains completely broken, in addition the installing ngrx next fixes nothing.

For example

ERROR in C:/ClientApp/app/api/index.ts
    (613,9): Type 'Observable<{} | T>' is not assignable to type 'Observable'.
      Property 'select' is missing in type 'Observable<{} | T>'.

I'm also having to cast all my reducers, where as before I didn't, which just doesn't feel right.

export const reducers: ActionReducerMap<AppState> = {
    data: <ActionReducer<DataState, Action>>dataReducer,
    router: <ActionReducer<RouterReducerState<RouterStateUrl>, Action>>fromRouter.routerReducer,
    quote: <ActionReducer<QuoteState, Action>>quoteReducer,
    ui:<ActionReducer<UiState, Action>>uiReducer,
    analytics: <ActionReducer<AnalyticsState, Action>>analyticsReducer
};

I think I'm just going to rollback as this upgrade has been a complete disaster.

[timdeschryver]

For the reducers casting, see #951
For the other problem, I think you should use rxjs pipeable operators - but for me it's hard to tell without a repro.

[witchdrash]

I'm starting to think that while this looks like an NGRX issue it's actually a typescript issue, raising just the typescript version to 2.6.1 or above produces all the same issues, so going to close this.

[insidewhy]

@witchdrash It's actually an issue with versions of typescript before 2.6. The typings were always broken here but typescript 2.5 accepted them.