June 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. #