I have an app developed with Visual Studio ASP.NET Core and Polymer 2 for the frontend. The app has worked well for the previous year but now I need to add new functions. The newest Polymer documentation recommends to either update to Polymer 3 or use lit-element as the base class for new webcomponents.
The problem is: lit-element uses JavaScript module specifiers without any path information (f.e. import { TemplateResult } from 'lit-html'). The Polymer development server changes these specifiers to the correct path during development. The development server of ASP.NET Core (Kestrel), however, passes the module import specifiers without any change to the browser but the browser (Chrome in my test) tells me:
Uncaught TypeError: Failed to resolve module specifier "lit-html". Relative references must start with either "/", "./", or "../".
Note: I already changed the import specifier of lit-element in my own code to the actual path such that it works. But the above error comes from lit-element itself!
I think it's not a solution that I change all the specifiers in all the dependencies manually (which would be overridden with every update). Also I think it's not a solution to run a Polymer build every time I want to debug my application (the Polymer build might take up to one minute!)
So my question is: how do you debug with Polymer Lit-Element in Visual Studio?
I would recommend either using a bundler like Rollup with the node-resolve plugin, and/or using a Node-based dev server like es-dev-server and proxying requests for JS resources to it from your .NET server for development. Rollup has a watch mode that can do incremental builds for faster dev turnaround.