Unable to compile after upgrading NgRx and Angular to version 7

Question

I'm working on upgrading an Angular application that uses NgRx from version 6.1.3 to 7.2.15. After running ng-update my versions were upgraded as follows:

Angular - 6.1.3 -> 7.2.15

NgRx - 6.1.0 -> 7.4.0

RxJS - 6.2.2 -> 6.5.2

rxjs-compat (needed for third party components) - 6.2.2 -> 6.5.2

When trying to build or serve the application after the upgrade compilation fails and returns variations of the following error for everywhere selectors are used:

  Types of parameters 'source$' and 'source' are incompatible.
    Type 'Observable<MyFeatureState>' is not assignable to type
src/app/my-feature/detail/detail.component.ts(84,45): error TS2345: Argument of type '(source$: Observable<State>) => Observable<DetailMetadata[]>' is not assignable to parameter of type 'OperatorFunction<MyFeatureState, DetailMetadata[]>'.

I'm not using any extraordinarily complex selectors. Most are just to get a value directly from the feature store, and the app was working prior to upgrade. As a (simplified) example of one of the components the error points to:

import { MyFeatureState } from "../store/reducers";
import * as fromFeature from "../store/selectors";

@Component({
  selector: "my-detail",
  template: `
    <my-detail-list [detailMetadata]="detailMetadata$ | async"></my-detail-list>
  `
})
export class DetailComponent implements OnInit {
  detailMetadata$: Observable<DetailMetadata[]>;

  constructor(private store$: Store<MyFeatureState>) {}

  ngOnInit() {
    this.detailMetadata = this.store$.pipe(
      select(fromFeature.selectDetailMetadata)
    );
  }
}

Where my selector would be:

export const selectDetailMetadata = createSelector(
  getMyFeatureState,
  (state: MyFeatureState) => state.detailMetadata
);

The error almost looks to me as if the selectors are expected to return the feature state instead of the slice of state that I declare as the type in the component. Is there something I'm missing that needs to be done as part of the upgrade process?

Answer 1

private store$: Store<MyFeatureState>

Either inject the store with global state (not feature state), or just inject Store<{}>. Selectors already do the type checking.

UPDATE: Inject just Store