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

[coffeymatt]

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

jcesarmobile/capacitor-angular-camera-sample#1

ionic-team/capacitor#658

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

[coffeymatt]

@mlynch @mhartington Can anyone help on this issue? This is broken (again!) having tried to update to the latest ionic and capacitor.

Why is this not updated and tested as part of regular ionic and capacitor development? It's a recurring pain point.

$ npm list @stencil/core
-- @ionic/pwa-elements@1.0.2 -- @stencil/core@0.18.0

Same sort of error again:

ERROR in ./node_modules/@ionic/pwa-elements/dist/esm/es5/ionicpwaelements.core.js 5:2171
[ng] Module parse failed: Unexpected token (5:2171)
[ng] You may need an appropriate loader to handle this file type.
[ng] |  * Built with http://stenciljs.com
[ng] |  */
[ng] > 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(var e,r,i=null,o=!1,u=!1,f=arguments.length;f-- >2;)k.push(arguments[f]);for(;k.length>0;){var c=k.pop();if(c&&void 0!==c.pop)for(f=c.length;f--;)k.push(c[f]);else"boolean"==typeof c&&(c=null),(u="function"!=typeof n)&&(null==c?c="":"number"==typeof c?c=String(c):"string"!=typeof c&&(u=!1)),u&&o?i[i.length-1].vtext+=c:null===i?i=[u?{vtext:c}:c]:i.push(u?{vtext:c}:c),o=u}if(null!=t){if(t.className&&(t.class=t.className),"object"==typeof t.class){for(f in t.class)t.class[f]&&k.push(f);t.class=k.join(" "),k.length=0}null!=t.key&&(e=t.key),null!=t.name&&(r=t.name)}return"function"==typeof n?n(t,i||[],$):{vtag:n,vchildren:i,vtext:void 0,vattrs:t,vkey:e,vname:r,i:void 0,o:!1}}function r(n,t,e){void 0===e&&(e={});var r=Array.isArray(t)?t:[t],i=n.document,o=e.hydratedCssClass||"hydrated",u=e.exclude;u&&(r=r.filter(function(n){return-1===u.indexOf(n[0])}));var c=r.map(function(n){return n[0]});if(c.length>0){var a=i.createElement("style");a.innerHTML=c.join()+"{visibility:hidden}."+o+"{visibility:inherit}",a.setAttribute("data-styles",""),i.head.insertBefore(a,i.head.firstChild)}var s=e.namespace||"ionicpwaelements";return D||(D=!0,function l(n,t,e){(n["s-apps"]=n["s-apps"]||[]).push(t),e.componentOnReady||(e.componentOnReady=function t(){function e(t){if(r.nodeName.indexOf("-")>0){for(var e=n["s-apps"],i=0,o=0;o<e.length;o++)if(n[e[o]].componentOnReady){if(n[e[o]].componentOnReady(r,t))return;i++}if(i<e.length)return void(n["s-cr"]=n["s-cr"]||[]).push([r,t])}t(null)}var r=this;return n.Promise?new n.Promise(e):{then:e}})}(n,s,n.HTMLElement.prototype)),applyPolyfills(n).then(function(){function t(){r.forEach(function(t){var e;!function r(n){return/\{\s*\[native code\]\s*\}/.test(""+n)}(n.customElements.define)?(e=function(t){return n.HTMLElement.call(this,t)}).prototype=Object.create(n.HTMLElement.prototype,{constructor:{value:e,configurable:!0}}):e=new Function("w","return class extends w.HTMLElement{}")(n),L[s].u(function i(n){var t=A(n),e=t.s,r=d(n[0]);return t.s=function(n){var t=n.mode,i=n.scoped;return function o(n,t,e){return import(
[ng] | /* webpackInclude: /\.entry\.js$/ */
[ng] | /* webpackMode: "lazy" */
[ng] ERROR in ./node_modules/@ionic/core/dist/esm/es5/ionic.core.js 6:2160
[ng] Module parse failed: Unexpected token (6:2160)
[ng] You may need an appropriate loader to handle this file type.
[ng] |  * Built with http://stenciljs.com
[ng] |  */
[ng] > 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(var e,r,i=null,o=!1,u=!1,f=arguments.length;f-- >2;)A.push(arguments[f]);for(;A.length>0;){var c=A.pop();if(c&&void 0!==c.pop)for(f=c.length;f--;)A.push(c[f]);else"boolean"==typeof c&&(c=null),(u="function"!=typeof n)&&(null==c?c="":"number"==typeof c?c=String(c):"string"!=typeof c&&(u=!1)),u&&o?i[i.length-1].vtext+=c:null===i?i=[u?{vtext:c}:c]:i.push(u?{vtext:c}:c),o=u}if(null!=t){if(t.className&&(t.class=t.className),"object"==typeof t.class){for(f in t.class)t.class[f]&&A.push(f);t.class=A.join(" "),A.length=0}null!=t.key&&(e=t.key),null!=t.name&&(r=t.name)}return"function"==typeof n?n(t,i||[],E):{vtag:n,vchildren:i,vtext:void 0,vattrs:t,vkey:e,vname:r,i:void 0,o:!1}}function r(n,t,e){void 0===e&&(e={});var r=Array.isArray(t)?t:[t],i=n.document,o=e.hydratedCssClass||"hydrated",u=e.exclude;u&&(r=r.filter(function(n){return-1===u.indexOf(n[0])}));var c=r.map(function(n){return n[0]});if(c.length>0){var a=i.createElement("style");a.innerHTML=c.join()+"{visibility:hidden}."+o+"{visibility:inherit}",a.setAttribute("data-styles",""),i.head.insertBefore(a,i.head.firstChild)}var s=e.namespace||"Ionic";return B||(B=!0,function l(n,t,e){(n["s-apps"]=n["s-apps"]||[]).push(t),e.componentOnReady||(e.componentOnReady=function t(){function e(t){if(r.nodeName.indexOf("-")>0){for(var e=n["s-apps"],i=0,o=0;o<e.length;o++)if(n[e[o]].componentOnReady){if(n[e[o]].componentOnReady(r,t))return;i++}if(i<e.length)return void(n["s-cr"]=n["s-cr"]||[]).push([r,t])}t(null)}var r=this;return n.Promise?new n.Promise(e):{then:e}})}(n,s,n.HTMLElement.prototype)),applyPolyfills(n).then(function(){function t(){r.forEach(function(t){var e;!function r(n){return/\{\s*\[native code\]\s*\}/.test(""+n)}(n.customElements.define)?(e=function(t){return n.HTMLElement.call(this,t)}).prototype=Object.create(n.HTMLElement.prototype,{constructor:{value:e,configurable:!0}}):e=new Function("w","return class extends w.HTMLElement{}")(n),U[s].u(function i(n){var t=C(n),e=t.s,r=d(n[0]);return t.s=function(n){var t=n.mode,i=n.scoped;return function o(n,t,e){return import(
[ng] | /* webpackInclude: /\.entry\.js$/ */
[ng] | /* webpackMode: "lazy" */
[ng] i ｢wdm｣: Failed to compile.

    "@angular/animations": "^7.2.15",
    "@angular/common": "^7.2.15",
    "@angular/core": "^7.2.15",
    "@angular/forms": "^7.2.15",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^7.2.15",
    "@angular/platform-browser-dynamic": "^7.2.15",
    "@angular/pwa": "^0.13.9",
    "@angular/router": "^7.2.15",
    "@angular/service-worker": "^7.2.15",
    "@capacitor/android": "^1.0.0-beta.22",
    "@capacitor/cli": "^1.0.0-beta.22",
    "@capacitor/core": "^1.0.0-beta.22",
    "@capacitor/ios": "^1.0.0-beta.22",
    "@ionic-native/barcode-scanner": "^5.5.1",
    "@ionic-native/core": "^5.5.1",
    "@ionic-native/splash-screen": "^5.5.1",
    "@ionic-native/sqlite": "^5.5.1",
    "@ionic-native/status-bar": "^5.5.1",
    "@ionic/angular": "^4.4.0",
    "@ionic/pro": "2.0.4",
    "@ionic/pwa-elements": "^1.0.2",
    "@ionic/storage": "^2.2.0",
    "@zxing/ngx-scanner": "^1.3.0",
    "cordova-browser": "6.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-ionic": "^5.3.0",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "3.2.0",
    "core-js": "^2.5.4",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "ngx-mask-ionic": "^1.1.2",
    "phonegap-plugin-barcodescanner": "8.0.1",
    "rxjs": "~6.5.1",
    "zone.js": "~0.8.29"

[coffeymatt]

I've narrowed down the above stencil error to occurring when updating these dev dependencies to the latest versions:

  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",

[isaiahaguilera]

I am in the same boat. Can't get this to integrate smoothly.

[mlynch]

Hey all, we're working on some changes that should permanently fix this. Stay tuned.

[mlynch]

This should be resolved in the 1.1.0 release that went out

[isaiahaguilera]

@mlynch what happened to "defineCustomElements" it seems that the loader folder was removed?

[mlynch]

@iaguilera14 Not sure? Also try 1.2.0 that may have fixed that

[coffeymatt]

@mlynch Thanks for the updates, I've been able to patch everything and it seems to be working well.

One thing that's still an issue and might be a barrier to entry for people new to capacitor is that the docs don't really cover a good approach to installing pwa-elements if you're using a framework on top of ionic like angular.

The instructions that are there (https://capacitor.ionicframework.com/docs/getting-started/pwa-elements/) don't really cover how to get these elements included in an angular/react/vue project, so I've needed stack overflow guidance to get this working:

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

[isaiahaguilera]

@mlynch I agree with @coffeymatt. The 1.2.0 release did fix the issue I was having though.

[isaiahaguilera]

@mlynch it seems capacitor beta.25 breaks this again. When I update I receive the TypeError: cameraModal.present is not a function error. If i revert to beta.24 it works again.

[eraldinho]

@iaguilera14 how do you rollback to beta.24 please?

[Erudition]

Yep, e.componentOnReady is not a function is the flavor I'm getting.

[tallcoder]

My pwa-elements got updated during the latest npm update ... which broke my app. It keeps throwing the damn export 'defineCustomElements' was not found in '@ionic/pwa-elements/loader' error. I guess I'll try and downgrade, but I wanted it known that it's happening, again.

[tallcoder]

Just for the record, forcing my pwa-elements version to 1.3.0 fixed the issue. Letting it upgrade to 1.4.0 creates the errors.

[edu1998]

thanks to @tallcoder that work for me