Cannot access HostRef context before it has been initialised

[brasycad]

Hey, buddy: I'm trying to start using this interesting library in my project. But I'm coming across this error, which I can't get rid of in any way.

[ng-effects] Cannot access HostRef context before it has been initialised.

@Effect('list') fetch() { return this.HttpServices.fetchPendingMovements(_.pick(this.user, "_id")) }

Any Idea how solve it?

Thanks in advance!

Angular 9.

[stupidawesome]

Hi! Thanks for giving it a spin. This error is thrown when trying to read the context before the component has been connected.

@Component({
    providers: [Effects]
})
class AppComponent {
    constructor(hostRef: HostRef) {
        hostRef.context // throws error
        connect(this)
    }
}

Make sure you have provided the Effects token in the right spot. It needs to be added to the providers array of every component/directive/module that uses effects. You must then call connect(this) in the constructor before accessing properties on the HostRef.

If that doesn't help, please upload a repo or gist producing the error and I'll have a look.

Edit: One more thing, this library only works with Ivy enabled. It might not work properly if enableIvy: false is set in your tsconfig.

[minogin]

The same for me. Just trying to reproduce an example from docs and get:

Error: [ng-effects] Cannot access HostRef context before it has been initialised.

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css'],
  providers: [Effects],
})
export class DetailsComponent implements OnInit {
  @Input()
  public id: number;

  public target?: Target;

  constructor(connect: Connect) {
    this.id = 10;
    this.target = undefined;

    connect(this)
  }

  ngOnInit(): void {
  }

  @Effect("target")
  getTarget(state: State<DetailsComponent>): Observable<Target> {
    return state.id.pipe(
      switchMap(id => of(new Target('target: ' + id)))
    )
  }
}

<p>ID is: {{id}}</p>
<p *ngIf="target">Target is: {{target.name}}</p>

What am I doing wrong?

[minogin]

It would be nice if you provide one small but complete working example, because examples in the docs miss many details.

[stupidawesome]

@minogin Here's a couple of examples

https://github.com/stupidawesome/angular-effects-renderless-select-demo (ng-effects@9.0.0-rc.6) https://github.com/coinless-bde/blockchain-development-environment (ng-effects@9.0.3)

I couldn't reproduce the error with the code you posted. I created a new Angular 9 app with the CLI, added the component, and ran it through ng-serve without any errors. If you figure out the issue or would like to link me your repo to look at the issue further, please let me know.

[minogin]

Which version are you using? 9.0.5? I get this with 9.0.5 With 9.1.0-next.4 I got another issues and decided it's not stable.

[stupidawesome]

Using 9.0.5. The 9.1.x branch is still under development. While looking at this i fixed an issue with Angular 9.1/TypeScript 2.8 and pushed a new version, but its very unlikely that will fix your issue.

[stupidawesome]

Here's a repo where I try to reproduce your error.

https://github.com/stupidawesome/debug-ng-effects

[minogin]

Your version works, thx. Will try to find what's the difference.

[stupidawesome]

Closing as resolved, please reopen if there is still an issue.