Add WebComponent (Angular Elements) into IONIC 4 project

Ionic Framework Ionic Angular
1

Hi guys,

I have created a web component with angular elements (v7 CLI).

This web component works correctly when added to an angular project.

But when I add this component in an IONIC 4 project, I have this error:

zone.js:682 Unhandled Promise rejection: Cannot read property 'call' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (bootstrap:83)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601) TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (http://localhost:4200/runtime.js:84:30)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:4200/polyfills.js:8078:26)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:4200/polyfills.js:7837:43)
    at http://localhost:4200/polyfills.js:8576:34
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:8110:31)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:7882:47)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.js:8288:35)
api.onUnhandledError @ zone.js:682
handleUnhandledRejection @ zone.js:709
_loop_1 @ zone.js:699
api.microtaskDrainDone @ zone.js:703
drainMicroTaskQueue @ zone.js:608
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
ZoneAwarePromise.then @ zone.js:1012
(anonymous) @ ion-app_8-md.entry.js:30
requestIdleCallback (async)
rIC @ ion-app_8-md.entry.js:60
push../node_modules/@ionic/core/dist/esm-es5/ion-app_8-md.entry.js.App.componentDidLoad @ ion-app_8-md.entry.js:16
safeCall @ core-feeeff0d.js:1344
postUpdateComponent @ core-feeeff0d.js:1286
postUpdate @ core-feeeff0d.js:1264
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
(anonymous) @ zone.js:889
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
drainMicroTaskQueue @ zone.js:601
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
resolvePromise @ zone.js:825
(anonymous) @ zone.js:741
webpackJsonpCallback @ bootstrap:25
r @ cejs-elements.js:1
(anonymous) @ 18.js:1

And the module that not exist is:

"./node_modules/@ionic/core/dist/esm-es5/focus-visible-70713a0c.js"

I added the reference in the script block of my angular.json

Any idea?

1 Like
2

Can you post your environment info via

$ ionic info

in the terminal?
And your angular version as well

3

I think you’ve this error for the dependencies bootstrap of you component, try importing or share you component with us to check and help you

4 
Ionic:

   Ionic CLI                     : 5.4.4 (C:\Users\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.3.0

Utility:

   cordova-res : not installed
   native-run  : 0.2.9 (update available: 0.3.0)

System:

   NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10
5
6

After @ionic/angular 4.7.x has support for @angular/cli 8.x. you could try upgrading your angular dependencies and see if that solves anything

1 Like
7

Thr problem was in the tsconfig.json.

Target was es5, and must be es2015.

Thanks all