I am experimenting with an asp.net core MVC web app using Polymer, and largely things seem to be going well. I used the now built in bower.json file to specify required packages (eg paper-fab), and they were dutifully installed. Nearly every time I could just use the package name and version from the appropriate Polymer catalogue page (example). But with a couple of the pages (paper-ripple and paper-card) bower can't find the specified version, so I tried the wildcard approach which resolved to a much earlier version. For paper-ripple it didn't seem to cause any problems, but paper-card just doesn't seem to work for me.
Here is my bower.json file:
{
"name": "asp.net",
"private": true,
"dependencies": {
"jquery": "2.2.0",
"jquery-validation": "1.14.0",
"jquery-validation-unobtrusive": "3.2.6",
"polymer": "1.4.0",
"PolymerElements/paper-material": "1.0.6",
"PolymerElements/iron-icons": "1.1.3",
"PolymerElements/iron-image": "1.2.5",
"PolymerElements/paper-button": "1.0.13",
"PolymerElements/paper-icon-button": "1.1.3",
"PolymerElements/app-layout": "0.10.4",
"PolymerElements/paper-header-panel": "1.1.6",
"PolymerElements/paper-toolbar": "1.1.7",
"PolymerElements/paper-drawer-panel": "1.0.10",
"PolymerElements/paper-fab": "1.2.1",
"PolymerElements/paper-item": "1.2.1",
"PolymerElements/paper-listbox": "1.1.2",
"PolymerElements/paper-ripple": "*",
"PolymerElements/paper-card": "*",
"normalize-css": "4.1.1"
},
"resolutions": {
"polymer": "^1.2.1",
"paper-ripple": "^1.0.0",
"font-roboto": "^1.0.1"
}
}
I know I could just download the latest versions from the catalogue, but I'd rather continue using bower if I can.
Of course it's always possible I am doing the cards wrong!
<link rel="import" href="~/lib/bower/paper-card/paper-card.html" />
<paper-material main elevation="0">
@for (int i = 0; i < 10; i++)
{
<paper-card heading="Card @i">
<div class="card-content">Some content @i</div>
</paper-card>
}
</paper-material>
The cards are just being output into the DOM like this (usually when using chrome dev tools I can see all the local DOM inside Polymer elements, but not in this case):
<paper-card heading="Card 0">
<div class="card-content">Some content 0</div>
</paper-card>
EDIT: Potential Workaround
So I have found that rather than directly editing the bower.json file in Visual Studio (which updates all your packages when saving), if I open up cmd in the same directory as the bower.json file and run bower commands from there I can install the versions shown in the Polymer catalog. For example bower install --save PolymerElements/paper-ripple which then updates the bower.json file accordingly. Perhaps this is the best way of doing it rather than relying editing it manually and relying on VS to update the packages?
