pwa-elements: ionic-pwa-elements (still) does not smoothly integrate with Ionic4, capacitor and angular

Resources:

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

`-- @ionic/pwa-elements@1.0.1
  `-- @stencil/core@0.17.2

I’m submitting a … (check one with “x”) [x] bug report

Current behavior:

Getting pwa-elements working in an out-of-the-box ionic4/angular/capacitor application today is very difficult and buggy.

If you follow the documented installation instructions (https://capacitor.ionicframework.com/docs/getting-started/pwa-elements/), the first suggestion of including a script in your applications index file means that the app won’t work offline.

The second suggestion of using an import (some where) just breaks an ionic4/angular app, it won’t build.

Using an involved work around:

https://stackoverflow.com/questions/54589782/how-to-include-ionic-pwa-elements-in-an-ionic4-angular-build

I can get it to run and now the capacitor camera works inside my PWA, but other Ionic elements are broken e.g. modals.

If I try patching Ionic and capacitor to the latest versions at this stage, ionic/angular from 4.0.2 to 4.1.1 and capacitor to beta.18, pwa-elements just breaks again.

ERROR in ./node_modules/@ionic/pwa-elements/dist/esm/es5/ionicpwaelements.core.js 5:2171
Module parse failed: Unexpected token (5:2171)
You may need an appropriate loader to handle this file type.
|  * Built with http://stenciljs.com
|  */
> function n(n,t){return"sc-"+n.t+(t&&t!==c?"-"+t:"")}function t(n,t){return n+(t?"-h":"-s")}function e(n,t){for <cut for brevity>

Expected behavior:

Ionic4 with angular and capacitor should just work ‘out of the box’. There needs to be clear instructions on how to include pwa-elements in angular, or integrate it tidily into the ‘@ionic/angular’ package itself so there’s no extra step.

Steps to reproduce:

Start an Ionic 4 application with angular and capacitor and try and use the capacitor camera plug in. Try and include pwa-elements without a online script reference.

Other information:

https://stackoverflow.com/questions/54589782/how-to-include-ionic-pwa-elements-in-an-ionic4-angular-build

https://github.com/jcesarmobile/capacitor-angular-camera-sample/issues/1

https://github.com/ionic-team/capacitor/issues/658

https://forum.getcapacitor.com/t/how-to-include-ionic-pwa-elements-in-an-ionic4-angular-build/274