Recently switched from Angular 8 to Angular 9 (without IVY) and encountered some unusual errors indicating that services injected in components are undefined in getters. Upon investigation, I discovered that the getter is being called before the constructor.
I'm intrigued as to how this could happen.
@Component({
selector: 'some-component',
templateUrl: './some-component.pug'
})
export class SomeComponent {
get someProp () {
console.log('Getter called', { ...this.someService }); // 'Getter called' {}
return this.someService.some;
}
constructor (private someService: SomeService) { console.log('Constructor called') }
}
// some-component.pug
{{ someProp }}
This will result in an error
TypeError: Cannot read property 'some' of undefinedUPDATE Upon further examination, it was discovered that this issue only occurs when using version 9 of ngrx:
"@ngrx/effects": "^9.2.0",
"@ngrx/store": "^9.2.0",
"@ngrx/store-devtools": "^9.2.0"