June 2018
Thursday, June 28, 2018
Ionic 4 and MobX
I just spent several hours debugging an issue and hopefully, this will save you a lot of time. #
I’m building a new Ionic 4 app and I’m using MobX to handle state. #
I had previously used it in an Ionic 3 app, but I don’t think I was using it correctly. #
This time I wanted to make sure that my pages & components worked with ChangeDetectionStrategy.OnPush
. #
The tutorials I found showed something simple like this: #
import { Component, ChangeDetectionStrategy } from '@angular/core';
import {store} from './store/counter';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div>{{ store.value }} - {{ store.computedValue }}
<button>Action</button></div>
`
})
export class AppComponent {
store = store;
}
Now I’m not doing inline templates, but I’d make sure I was using @observable
and @computed
properties. However, whenever I put *mobxAutorun on an element, the entire element disappeared. #
I made sure I had MobxAngularModule
imported in app.module.ts
but nothing I did made a difference. #
Finally, I found the issue. #
You need to import MobxAngularModule
in the page module as well. #
As soon as I added it everything started working as expected. #