store: ReferenceError: data is not defined

I am running into the following run-time error in my effort to implement ngxs in an app I’m working on:

ReferenceError: data is not defined at MapSubscriber.eval [as project] (eval at fastPropGetter (webpack-internal:///./node_modules/@ngxs/store/esm5/ngxs-store.js), <anonymous>:3:20) at MapSubscriber._next (webpack-internal:///./node_modules/rxjs/_esm5/operators/map.js:82) at MapSubscriber.Subscriber.next (webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:100) at StateStream.BehaviorSubject._subscribe (webpack-internal:///./node_modules/rxjs/_esm5/BehaviorSubject.js:34) at StateStream.Observable._trySubscribe (webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:178) at StateStream.Subject._trySubscribe (webpack-internal:///./node_modules/rxjs/_esm5/Subject.js:108) at StateStream.Observable.subscribe (webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:166) at MapOperator.call (webpack-internal:///./node_modules/rxjs/_esm5/operators/map.js:60) at AnonymousSubject.Observable.subscribe (webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:163) at CatchOperator.call (webpack-internal:///./node_modules/rxjs/_esm5/operators/catchError.js:83)

Currently using:

• ngxs: 2.0.0
• angular/core: 5.2.3

To try to isolate the origin of this error, I have been using a “block and tackle” approach, namely, adding components and other objects to a generic app until it breaks. The app breaks with reference to the above run-time error.

So, for example, THE FOLLOWING WORKS:

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @Select(HotelIdState) hotelId$: Observable<string>;
  @Select(UserDataState) userData$: Observable<UserDataStateModel>;
  @Select(HotelDataState) hotelData$: Observable<HotelDataStateModel>;
  @Select(AuthState) authentication$: Observable<AuthStateModel>;

  constructor(store: Store) {

  }
}

BUT THE FOLLOW DOES NOT WORK (throws error listed above - notice I’ve referenced a service called StartupService in the constructor):

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @Select(HotelIdState) hotelId$: Observable<string>;
  @Select(UserDataState) userData$: Observable<UserDataStateModel>;
  @Select(HotelDataState) hotelData$: Observable<HotelDataStateModel>;
  @Select(AuthState) authentication$: Observable<AuthStateModel>;

  constructor(store: Store, startup: StartupService) {

  }
}

What is StartupService? It is an injectable service that implements a number of ngxs functions. Here is a schematic of what it looks like:

> @Injectable()
export class StartupService {
  @Select(HotelIdState) hotelId$: Observable<string>;
  @Select(UserDataState) userData$: Observable<UserDataStateModel>;
  @Select(HotelDataState) hotelData$: Observable<HotelDataStateModel>;
  @Select(AuthState) authentication$: Observable<AuthStateModel>;
  constructor(
    private store: Store,
    private rezService: ReservationsService,
    private router: Router,
    private http: NkHttp,
    private nkFn: nk.NkFunctions) {
       // code here
} 

So the bottom line is: I get a run-time error when my angular app attempts to reference/instantiate an injectable service that implements ngxs. Is there a trick to using ngxs with injectable angular services?