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

[ionic-team]

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

[mlynch]

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

[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.

[isaiahaguilera]

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

[isaiahaguilera]

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

[Erudition]

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

[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.

[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/[email protected] -- @stencil/[email protected]

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",

[mlynch]

This should be resolved in the 1.1.0 release that went out

[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.

[eraldinho]

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

[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.

[edu1998]

thanks to @tallcoder that work for me