mobx-angular: MobX cannot be used with AoT

This is kind of a deal breaker for using MobX with Angular. It turns out that MobX’s decorators cause Angular’s AoT to fail:

ERROR in Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler (position 77:13 in the original .ts file), resolving symbol action

Maybe this should be added to the README.md or maybe there is some other way to fix the problem that I am unaware of.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 24 (3 by maintainers)

Most upvoted comments

It works but you have to use the decorators provided by mobx-angular instead of the ones from MobX.

On May 7, 2017 01:13, “Yago López” notifications@github.com wrote:

Im very interested in MobX, NG4 and AOT but still confused. Does it work then? If anyone has more information, please share it, thanks

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/mobxjs/mobx-angular/issues/13#issuecomment-299671646, or mute the thread https://github.com/notifications/unsubscribe-auth/ADlcCqBfcQ8R5MzLHKvFXpsqiZpb1TNNks5r3P6HgaJpZM4L38eR .

hccampos on May 7, 2017

For reference, I managed to “kind of” get it working by creating a separate file and creating functions that forward to MobX. It is incredibly ugly and should not be necessary but as with most things in Angular, what shouldn’t be necessary is necessary:

import {
  action as actionImport,
  computed as computedImport,
  observable as observableImport,
} from 'mobx';

export function action(...args: any[]) {
  return (actionImport as any)(...args);
}

export function computed(...args: any[]) {
  return (computedImport as any)(...args);
}

export function observable(...args: any[]) {
  return (observableImport as any)(...args);
}

hccampos on Feb 6, 2017

So Angular doesn’t analyze it because it comes from a node_module? Did you open an issue to Angular? Can you paste a link to it so we +1 it?

On Mon, Feb 6, 2017 at 12:32 PM, Hugo Campos notifications@github.com wrote:

For reference, I managed to “kind of” get it working by creating a separate file and creating functions that forward to MobX. It is incredibly ugly and should not be necessary but as with most things in Angular, what shouldn’t be necessary is necessary:

import { action as actionImport, computed as computedImport, observable as observableImport, } from ‘mobx’;

export function action(…args: any[]) { return (actionImport as any)(…args); }

export function computed(…args: any[]) { return (computedImport as any)(…args); }

export function observable(…args: any[]) { return (observableImport as any)(…args); }

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/500tech/ng2-mobx/issues/13#issuecomment-277643826, or mute the thread https://github.com/notifications/unsubscribe-auth/ACUsQx99apzEg7o_fDWjGZlkiyRKPrteks5rZvbXgaJpZM4L38eR .

– Adam Klein CTO & Co-Founder Tel. +972-52-747-5633 blog.500tech.com http://blog.500tech.com meetup.com/angularjs-il

ghost on Feb 6, 2017