I’m developing both a mobile app (based on ionic2 ofc) and a webapp (standard angular2) that will share a lot of common functionality, including UI components.
The blog post Hybrid mobile apps: sharing logic between Angular2 and Ionic2 apps describes a nice approach of using a node module to extract common functionality and sharing it using
It works like a charm – except when DI is involved.
If you look at the code linked in the blog post, you will find, that they defined a @Component (
FooComponent) in their shared module, but didn’t use it in the web web or mobile app – for good reason as it turned out: When including
directives: [FooModule] the mobile (ionic) app it refuses to load telling me
No Directive annotation found on FooComponent. In the “vanilla” angular2 web app it works flawlessly, though.
I traced it down to the fact, that there are actually two instances of the
ComponentMetaData function created in the ionic app.
FooComponent gets annotated with one, but the check in
DirectiveResolver.resolve is performed with the other. Boom.
The fact, that it works in the web app makes me believe that it has something to do with Ionic’s custom bootstrapping.
- has anybody successfully used a component defined in an external node module within an Ionic app?
- if yes, is there an example for this somewhere?
- And why doesn’t it work in that sample code? (and in my code which is modeled after that?)
All hints are highly appreciated!
Thanks in advance and kind regards,