Set up
I have a component named InputAutocomplete that when clicked, uses the ModalController to open a modal. That modeluses a custom component PageAutocompleteComponent as its template.
Problem
My problem is, when I click the InputAutocomplete button, sometimes the modal shows up and sometimes it doesn't.
I've been so hesitant to ask for help here in Stack Overflow because it's so difficult for me to explain what the problem is (because I also have difficulty reliably replicating the issue).
Also, when this bug occurs, my emulator doesn't refresh with code changes anymore. Opening alerts using AlertController also no longer works.
Ionic Info
Ionic:
Ionic CLI : 5.4.15 (F:\Program Files\nodejs\node_modules\ionic)
Ionic Framework : @ionic/angular 4.11.5
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, browser 5.0.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 20 other plugins)
Utility:
cordova-res (update available: 0.9.0) : 0.8.1
native-run (update available: 0.3.0) : 0.2.9
System:
Android SDK Tools : 26.1.1 (D:\Users\Darren\AppData\Local\Android\Sdk)
NodeJS : v10.16.3 (C:\nProgram Files\nodejs\node.exe)
npm : 6.10.3
OS : Windows 10
Errors
Error messages
The error messages I get follow these patterns:
Loading chunk 40 failed.Unhandled Promise rejection: Cannot read property 'isProxied' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'isProxied' of undefined
These look like very deep errors in angular, or possibly webpack, which makes it daunting for me to try to fix. I don't even know where to start.
Error log
The error log on Chrome Dev Tools shows the following:
input-autocomplete: Getting top modal...
consolelogs.js:49 input-autocomplete: Generating a new modal...
consolelogs.js:49 input-autocomplete: Getting top modal...
consolelogs.js:49 input-autocomplete: Generating a new modal...
consolelogs.js:49 input-autocomplete: Getting top modal...
consolelogs.js:49 input-autocomplete: Generating a new modal...
consolelogs.js:49 input-autocomplete: Getting top modal...
consolelogs.js:49 input-autocomplete: Generating a new modal...
consolelogs.js:49 input-autocomplete: Getting top modal...
consolelogs.js:49 input-autocomplete: Generating a new modal...
5consolelogs.js:49 Error: Loading chunk 40 failed.
(timeout: http://localhost:8100/40.js)
at requireEnsure (bootstrap:126)
at Array.map (<anonymous>)
at webpackAsyncContext (.*\.entry\.js$ include: \.entry\.js$ exclude: \.system\.entry\.js$ namespace object:393)
at loadModule (core-ca0488fc.js:75)
at initializeComponent (core-ca0488fc.js:1710)
at nextTick (core-ca0488fc.js:1851)
at ZoneDelegate.invoke (zone-evergreen.js:359)
at Zone.run (zone-evergreen.js:124)
at zone.scheduleMicroTask (zone-evergreen.js:855)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
(anonymous) @ consolelogs.js:49
consoleError @ core-ca0488fc.js:63
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
zone.scheduleMicroTask @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
invokeTask @ zone-evergreen.js:469
ZoneTask.invoke @ zone-evergreen.js:454
timer @ zone-evergreen.js:2650
setTimeout (async)
scheduleTask @ zone-evergreen.js:2671
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:211
scheduleMacroTask @ zone-evergreen.js:234
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1107
(anonymous) @ zone-evergreen.js:2686
proto.(anonymous function) @ zone-evergreen.js:1428
requireEnsure @ bootstrap:145
webpackAsyncContext @ .*\.entry\.js$ include: \.entry\.js$ exclude: \.system\.entry\.js$ namespace object:393
loadModule @ core-ca0488fc.js:75
initializeComponent @ core-ca0488fc.js:1710
nextTick @ core-ca0488fc.js:1851
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
zone.scheduleMicroTask @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
nextTick @ core-ca0488fc.js:156
(anonymous) @ core-ca0488fc.js:95
then @ core-ca0488fc.js:1219
then @ core-ca0488fc.js:1341
scheduleUpdate @ core-ca0488fc.js:1219
setValue @ core-ca0488fc.js:1378
set @ core-ca0488fc.js:1403
(anonymous) @ fesm5.js:1453
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:34127
set @ fesm5.js:1450
updateProp @ core.js:28067
checkAndUpdateDirectiveInline @ core.js:27753
checkAndUpdateNodeInline @ core.js:38472
checkAndUpdateNode @ core.js:38411
debugCheckAndUpdateNode @ core.js:39433
debugCheckDirectivesFn @ core.js:39376
(anonymous) @ SelectTextComponent.html:21
debugUpdateDirectives @ core.js:39364
checkAndUpdateView @ core.js:38376
callViewAction @ core.js:38742
execEmbeddedViewsAction @ core.js:38699
checkAndUpdateView @ core.js:38377
callViewAction @ core.js:38742
execComponentViewsAction @ core.js:38670
checkAndUpdateView @ core.js:38383
callViewAction @ core.js:38742
execEmbeddedViewsAction @ core.js:38699
checkAndUpdateView @ core.js:38377
callViewAction @ core.js:38742
execComponentViewsAction @ core.js:38670
checkAndUpdateView @ core.js:38383
callViewAction @ core.js:38742
execEmbeddedViewsAction @ core.js:38699
checkAndUpdateView @ core.js:38377
callViewAction @ core.js:38742
execEmbeddedViewsAction @ core.js:38699
checkAndUpdateView @ core.js:38377
callViewAction @ core.js:38742
execComponentViewsAction @ core.js:38670
checkAndUpdateView @ core.js:38383
callViewAction @ core.js:38742
execEmbeddedViewsAction @ core.js:38699
checkAndUpdateView @ core.js:38377
callViewAction @ core.js:38742
execComponentViewsAction @ core.js:38670
checkAndUpdateView @ core.js:38383
callViewAction @ core.js:38742
execEmbeddedViewsAction @ core.js:38699
checkAndUpdateView @ core.js:38377
callViewAction @ core.js:38742
execComponentViewsAction @ core.js:38670
checkAndUpdateView @ core.js:38383
callViewAction @ core.js:38742
execEmbeddedViewsAction @ core.js:38699
checkAndUpdateView @ core.js:38377
callViewAction @ core.js:38742
execEmbeddedViewsAction @ core.js:38699
checkAndUpdateView @ core.js:38377
callViewAction @ core.js:38742
execComponentViewsAction @ core.js:38670
checkAndUpdateView @ core.js:38383
callViewAction @ core.js:38742
execComponentViewsAction @ core.js:38670
checkAndUpdateView @ core.js:38383
callViewAction @ core.js:38742
execComponentViewsAction @ core.js:38670
checkAndUpdateView @ core.js:38383
callViewAction @ core.js:38742
execEmbeddedViewsAction @ core.js:38699
checkAndUpdateView @ core.js:38377
callViewAction @ core.js:38742
execComponentViewsAction @ core.js:38670
checkAndUpdateView @ core.js:38383
callWithDebugContext @ core.js:39716
debugCheckAndUpdateView @ core.js:39299
detectChanges @ core.js:27092
tick @ core.js:35380
_zone.run @ core.js:35228
invoke @ zone-evergreen.js:359
onInvoke @ core.js:34201
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
run @ core.js:34066
next @ core.js:35225
schedulerFn.__isAsync @ core.js:31051
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
(anonymous) @ spy-core.js:478
notify_ @ spy-core.js:443
next @ spy-core.js:478
next @ spy-core.js:526
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:31013
checkStable @ core.js:34144
onHasTask @ core.js:34221
hasTask @ zone-evergreen.js:411
_updateTaskCount @ zone-evergreen.js:431
_updateTaskCount @ zone-evergreen.js:264
runTask @ zone-evergreen.js:185
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
resolvePromise @ zone-evergreen.js:791
(anonymous) @ zone-evergreen.js:707
Promise.then (async)
ZoneAwarePromise @ zone-evergreen.js:1033
ZoneAwarePromise @ zone-evergreen.js:876
Ctor.then @ zone-evergreen.js:1032
resolvePromise @ zone-evergreen.js:758
(anonymous) @ zone-evergreen.js:707
(anonymous) @ tslib.es6.js:72
ZoneAwarePromise @ zone-evergreen.js:876
step @ tslib.es6.js:72
(anonymous) @ tslib.es6.js:73
ZoneAwarePromise @ zone-evergreen.js:876
__awaiter @ tslib.es6.js:69
presentModal @ input-autocomplete.ts:59
(anonymous) @ InputAutocomplete.html:2
handleEvent @ core.js:38098
callWithDebugContext @ core.js:39716
debugHandleEvent @ core.js:39352
dispatchEvent @ core.js:25818
(anonymous) @ core.js:27715
schedulerFn.__isAsync @ core.js:31094
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
(anonymous) @ spy-core.js:478
notify_ @ spy-core.js:443
next @ spy-core.js:478
next @ spy-core.js:526
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:31013
subscription.clicks.pipe.subscribe.e @ DebounceClickDirective.ts:27
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
(anonymous) @ spy-core.js:478
notify_ @ spy-core.js:443
next @ spy-core.js:478
next @ spy-core.js:526
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
debouncedNext @ debounceTime.js:40
dispatchNext @ debounceTime.js:53
_execute @ AsyncAction.js:51
execute @ AsyncAction.js:39
flush @ AsyncScheduler.js:33
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:34182
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
ZoneTask.invoke @ zone-evergreen.js:454
timer @ zone-evergreen.js:2650
setInterval (async)
scheduleTask @ zone-evergreen.js:2671
scheduleTask @ zone-evergreen.js:378
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleMacroTask @ zone-evergreen.js:234
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1107
(anonymous) @ zone-evergreen.js:2686
proto.(anonymous function) @ zone-evergreen.js:1428
requestAsyncId @ AsyncAction.js:25
schedule @ AsyncAction.js:21
schedule @ Scheduler.js:7
schedule @ AsyncScheduler.js:21
_next @ debounceTime.js:28
next @ Subscriber.js:49
(anonymous) @ spy-core.js:478
notify_ @ spy-core.js:443
next @ spy-core.js:478
next @ spy-core.js:526
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
clickEvent @ DebounceClickDirective.ts:38
(anonymous) @ InputAutocomplete.html:2
handleEvent @ core.js:38098
callWithDebugContext @ core.js:39716
debugHandleEvent @ core.js:39352
dispatchEvent @ core.js:25818
(anonymous) @ core.js:37030
(anonymous) @ platform-browser.js:1789
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:34182
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
5consolelogs.js:49 Unhandled Promise rejection: Cannot read property 'isProxied' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'isProxied' of undefined
at initializeComponent (core-ca0488fc.js:1715) TypeError: Cannot read property 'isProxied' of undefined
at initializeComponent (http://localhost:8100/vendor.js:107818:24)
onClick function
This is what the click function looks like:
async presentModal() {
this.Sulat.debug("Getting top modal...");
const topModal = await this.modalController.getTop();
if (isNonNullAndUndefined(topModal)) {
this.Sulat.debug("Dismissing existing modal...");
await topModal.dismiss();
}
this.Sulat.debug("Generating a new modal...");
const modal = await this.modalController.create({
component: PageAutocompleteComponent,
componentProps: {
initialChoices: this.initialChoices,
values: this.values,
selectedValue: this.selectedValue
}
});
this.Sulat.debug("Modal generated.");
modal.onDidDismiss().then(({ data }) => {
this.Sulat.debug("Input-autocomplete modal dismissed.");
if (data && data.hasOwnProperty("label")) {
this.selectedValue = data;
this.modelChanged(data);
}
});
this.Sulat.debug("Presenting modal.");
return await modal.present();
}
And this is how it is called on the HTML, with debounce click functionality:
<div appDebounceClick [debounceTime]="200" (debounceClick)=presentModal()>
...
</div>
Hypotheses
Here are my potential guesses as to why this error occurs:
It might be related to Webpack because it's talking about loading chunks. Could it possibly be related to hot module reload? Like possibly the web server thinks I applied some changes on my IDE and it was trying to reload data? I highly think it is related to webpack or something because my code changes don't reload the emulator anymore.
It might be related to
ModalController, because the modal isn't being generated or it's not showing up. I don't know.
Please help, thank you!
