Ionic + Polymer (Material/Paper) not working on Android

ionic-v1
1

I’m trying to leverage the Google Polymer paper elements within my ionic project, specifically targeting Android (4.4). The elements render fine in Chrome, but when launched in the device or emulated in Genymotion they do not render. I am lost as to how to troubleshoot this and am hoping for some guidance on getting these to work.

Thanks,

Chris

2

I had the same problem. The platform.js file should be the first script on the page in order to work properly on the emulator.

3

Thanks for the suggestion, unfortunately did not resolve. Any other ideas?

4

Please not that using polymer and ionic/angular together is not suggested.

Instead check out angular material.

https://material.angularjs.org/#/

Since this is all written in angular, it will play well with ionic

5

OK. So I built the angular/material components and added everything to my ionic project. I am getting errors about the materialRipple directive missing when using the checkbox component among others:

Error: [$injector:unpr] Unknown provider: $$qProvider ← $$q ← $throttle ← materialRippleDirective

I do see this is built into material-design.js and I have this included in the project, but it’s barfing. Any thoughts?

6

Hmm, what order are you including the files?

7
  • angular-animate.min.js
  • angular-animate-sequence.js
  • angular-animate-stylers.js
  • material-design.js
  • app.js
8

And where is ionic being loaded in this? Also, are you using ionic.bundle?

9

Yes, apologies.

  • ionic.bundle.js
  • cordova.js
  • angular-animate.min.js
  • angular-animate-sequence.js
  • angular-animate-stylers.js
  • material-design.js
  • app.js
10

Of the components that I can successfully render without js errors, it looks like ionic css styles are overriding the component styles:

I’ll just hold off until material angular components are an official part of ionic.