I am currently working on integrating Polymer 3 components into my ASP.NET MVC application. I'm not entirely sure if my approach to this issue is correct at the moment.
My main goal is to execute everything from IIS Express.
However, I'm encountering the following problem:
Uncaught TypeError: Failed to resolve module specifier "@polymer/polymer/polymer-element.js". Relative references must start with "/", "./", or "../".
Let me share my code:
Index.cshtml:
<head>
<script src="~/Scripts/PolymerApp/node_modules/@("@webcomponents")/webcomponentsjs/webco
mponents-loader.js"></script>
<script type="module" src="~/Scripts/PolymerApp/first-element.js">
</script>
</head>
<h2>Index</h2>
<div>
<first-element></first-element>
</div>
This is my first-element.js:
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
class FirstElement extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
}
</style>
<h2>Hello [[prop1]]!</h2>
`;
}
static get properties() {
return {
prop1: {
type: String,
value: 'first-element',
},
};
}
}
window.customElements.define('first-element', FirstElement);
I used the command prompt to create this with: polymer init and then selected the element template.
When I run it through polymer serve on localhost, it works perfectly fine which leads me to believe there might be some build process involved.
Thank you for your help in advance. I hope I have provided all the necessary information.