Problem trying to inject ViewSlot

Help Requests
1

Trying to inject ViewSlot into a skeleton based esnext project, the following error shows up in the browser. I have just created a simple project with the CLI based on systemjs and I see the same thing.

vendor-bundle.js:1398 Unhandled rejection Error: Error invoking ViewSlot. Check the inner error for details.

Inner Error:
Message: Cannot set property ‘viewSlot’ of undefined``

from a modified CLI generated app, this reproduces the same problem I see in the real app,

import { BoundViewFactory, ViewSlot, customAttribute, templateController, inject } from 'aurelia-framework';

@inject(ViewSlot)

export class App {
    constructor(viewSlot) {
        this.message = 'Hello World!';

        this.viewSlot = viewSlot;

    }
}
2

you dont inject ViewSlot, use it like a class
https://github.com/aurelia-v-grid/vGrid/blob/dev-rebuild/src/aurelia-v-grid/grid/loadingScreen.ts
maybe not the best sample but might help u :slight_smile:

3

Thanks for the reply, your sample helps :slightly_smiling_face:

A bit confused though as I see this from the cheat sheet on this site and many other samples that seem to inject ViewSlot. Maybe some design changes have occurred?

import {BoundViewFactory, ViewSlot, customAttribute, templateController, inject} from 'aurelia-framework';

@customAttribute('naive-if')
@templateController
@inject(BoundViewFactory, ViewSlot)
export class NaiveIf {
  constructor(viewFactory, viewSlot) {
    this.viewFactory = viewFactory;
    this.viewSlot = viewSlot;
  }

  valueChanged(newValue) {
    if (newValue) {
      let view = this.viewFactory.create();
      this.viewSlot.add(view);
    } else {
      this.viewSlot.removeAll();
    }
  }
}
4

dont think so :slight_smile: