livechat / angular-livechat

⚠️ DEPRECATED ⚠️ Package no longer supported. Please use @livechat/widget-angular instead.
MIT License
25 stars 19 forks source link

Infinite Loop during Chat Widget Initialization #35

Closed lenakath closed 2 years ago

lenakath commented 3 years ago

I'm trying to integrate Live Chat into our Angular app, but keep on getting an Range Error.

Unhandled Promise rejection: Maximum call stack size exceeded ; Zone: <root> ; Task: null ; Value: RangeError: Maximum call stack size exceeded

The code is a simple wrapper around the Live Chat Angular Chat Widget. Component:

@Component({
  selector: 'app-livechat',
  templateUrl: './live-chat.component.html',
})
export class LiveChatComponent {
  private liveChatApi: LiveChatWidgetApiModel;

  constructor() {}

  setApi(api: LiveChatWidgetApiModel) {
    this.liveChatApi = api;
  }
}

Template:

<livechat-widget (onChatLoaded)="setApi($event)" licenseId="xxxxxxx"></livechat-widget>

Full Stacktrace:

zone-evergreen.js:651 Unhandled Promise rejection: Maximum call stack size exceeded ; Zone: <root> ; Task: null ; Value: RangeError: Maximum call stack size exceeded
    at Zone.scheduleTask (zone-evergreen.js:218)
    at Zone.scheduleMicroTask (zone-evergreen.js:231)
    at scheduleResolveOrReject (zone-evergreen.js:845)
    at ZoneAwarePromise.then (zone-evergreen.js:955)
    at scheduleMicroTask (zone-evergreen.js:542)
    at ZoneDelegate.scheduleTask (zone-evergreen.js:381)
    at Zone.scheduleTask (zone-evergreen.js:211)
    at Zone.scheduleMicroTask (zone-evergreen.js:231)
    at scheduleResolveOrReject (zone-evergreen.js:845)
    at ZoneAwarePromise.then (zone-evergreen.js:955) RangeError: Maximum call stack size exceeded
    at Zone.scheduleTask (http://localhost:4200/polyfills.js:3568:36)
    at Zone.scheduleMicroTask (http://localhost:4200/polyfills.js:3581:25)
    at scheduleResolveOrReject (http://localhost:4200/polyfills.js:4195:14)
    at ZoneAwarePromise.then (http://localhost:4200/polyfills.js:4305:17)
    at scheduleMicroTask (http://localhost:4200/polyfills.js:3892:28)
    at ZoneDelegate.scheduleTask (http://localhost:4200/polyfills.js:3731:21)
    at Zone.scheduleTask (http://localhost:4200/polyfills.js:3561:43)
    at Zone.scheduleMicroTask (http://localhost:4200/polyfills.js:3581:25)
    at scheduleResolveOrReject (http://localhost:4200/polyfills.js:4195:14)
    at ZoneAwarePromise.then (http://localhost:4200/polyfills.js:4305:17)
api.onUnhandledError    @   zone-evergreen.js:651
handleUnhandledRejection    @   zone-evergreen.js:675
api.microtaskDrainDone  @   zone-evergreen.js:668
drainMicroTaskQueue @   zone-evergreen.js:566
invokeTask  @   zone-evergreen.js:469
invokeTask  @   zone-evergreen.js:1603
globalZoneAwareCallback @   zone-evergreen.js:1629
load (async)        
customScheduleGlobal    @   zone-evergreen.js:1742
scheduleTask    @   zone-evergreen.js:378
onScheduleTask  @   zone-evergreen.js:272
scheduleTask    @   zone-evergreen.js:372
scheduleTask    @   zone-evergreen.js:211
scheduleEventTask   @   zone-evergreen.js:237
(anonymous) @   zone-evergreen.js:1911
ngOnInit    @   livechat-angular-widget.js:41
checkAndUpdateDirectiveInline   @   core.js:31910
checkAndUpdateNodeInline    @   core.js:44367
checkAndUpdateNode  @   core.js:44306
debugCheckAndUpdateNode @   core.js:45328
debugCheckDirectivesFn  @   core.js:45271
eval    @   LiveChatComponent.html:1
debugUpdateDirectives   @   core.js:45259
checkAndUpdateView  @   core.js:44271
callViewAction  @   core.js:44637
execComponentViewsAction    @   core.js:44565
checkAndUpdateView  @   core.js:44278
callViewAction  @   core.js:44637
execComponentViewsAction    @   core.js:44565
checkAndUpdateView  @   core.js:44278
callWithDebugContext    @   core.js:45632
debugCheckAndUpdateView @   core.js:45194
detectChanges   @   core.js:31126
tick    @   core.js:41045
_loadComponent  @   core.js:41096
bootstrap   @   core.js:41019
(anonymous) @   core.js:40619
_moduleDoBootstrap  @   core.js:40615
(anonymous) @   core.js:40570
invoke  @   zone-evergreen.js:359
onInvoke    @   core.js:39699
invoke  @   zone-evergreen.js:358
run @   zone-evergreen.js:124
(anonymous) @   zone-evergreen.js:855
invokeTask  @   zone-evergreen.js:391
onInvokeTask    @   core.js:39680
invokeTask  @   zone-evergreen.js:390
runTask @   zone-evergreen.js:168
drainMicroTaskQueue @   zone-evergreen.js:559
invokeTask  @   zone-evergreen.js:469
invokeTask  @   zone-evergreen.js:1603
globalZoneAwareCallback @   zone-evergreen.js:1640
load (async)        
customScheduleGlobal    @   zone-evergreen.js:1742
scheduleTask    @   zone-evergreen.js:378
scheduleTask    @   zone-evergreen.js:211
scheduleEventTask   @   zone-evergreen.js:237
(anonymous) @   zone-evergreen.js:1911
desc.set    @   zone-evergreen.js:1252
get @   platform-browser-dynamic.js:546
_fetch  @   compiler.js:17638
(anonymous) @   compiler.js:17753
_loadMissingExternalStylesheets @   compiler.js:17753
_normalizeTemplateMetadata  @   compiler.js:17705
(anonymous) @   compiler.js:17664
then    @   compiler.js:2166
normalizeTemplate   @   compiler.js:17664
loadDirectiveMetadata   @   compiler.js:19822
(anonymous) @   compiler.js:25831
(anonymous) @   compiler.js:25830
_loadModules    @   compiler.js:25827
_compileModuleAndComponents @   compiler.js:25807
compileModuleAsync  @   compiler.js:25769
compileModuleAsync  @   platform-browser-dynamic.js:223
compileNgModuleFactory__PRE_R3__    @   core.js:40264
bootstrapModule @   core.js:40599
./src/main.ts   @   main.ts:10
__webpack_require__ @   bootstrap:79
0   @   main.ts:11
__webpack_require__ @   bootstrap:79
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.js:1
walaszczykm commented 2 years ago

Hello 👋

I am happy to say that we have created a new set of packages to support more frontend frameworks integration with LiveChat Chat Widget: Chat Widget Adapters 🙂

From now on it will be the official, actively maintained repository for each framework-specific package that allows easy integration of LiveChat Chat Widget. The new Angular package: @livechat/widget-angular.

We didn't observe such an issue on the new implementation but you can try it out and let us know what you think 🙂