TypeError: this.callbacks[i] is not a function

[XHunter74]

Have next exception: TypeError: this.callbacks[i] is not a function embed.js:1:11102 value https://editor.unlayer.com/embed.js:1 value https://editor.unlayer.com/embed.js:1 unlayer https://editor.unlayer.com/embed.js:1 invokeTask https://email-editor.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:423 runTask https://email-editor.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:195 invokeTask https://email-editor.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:498 invokeTask https://email-editor.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:1693 globalZoneAwareCallback https://email-editor.stackblitz.io/turbo_modules/[email protected]/dist/zone.js:1730

Sample code: https://stackblitz.com/edit/email-editor

Steps:

1. Press 'Edit' on root page
2. Press 'Save' on 'Editor' page
3. Press 'Edit' on root page
4. Press 'Save' on 'Editor' page Catch exception

[wimagee]

I'm seeing the same thing. Not figured out why yet.

[wimagee]

I've looked into this a bit more. It fails if you destroy and recreate the host component of EmailEditorComponent. On trying to exportHtml after a destroy & create it gives the callbacks[i] error.

I initially thought the problem was due to a script tag that is added in the background to HEAD when the EmailEditorComponent is created. If you destroy and recreate the host component it adds another one each time! It's possible to get around this by removing the script tag manually in an ngOnDestroy but although it is certainly a problem it turns out not to be the cause of this issue. There also seems to be a globally scoped unlayer object created and my guess is that it's something related to that which isn't getting cleaned up properly when the angular component is destroyed. I've tried various ways to deal with it without success.

Don't see how this could be used in anything other than the simplest of Angular projects as it stands.

[mbagliojr]

any update on this?

[phongdvt]

How can resolve this problem. I just have the same problem :(

[mbagliojr]

@wimagee what was the script you removed in the onDestroy? can you post a sample?

[wimagee]

This is the where the script tag is created in EmailEditorComponent. ..

ngOnInit() {
    const unlayerScript = document.createElement('script');
    unlayerScript.setAttribute('src', '//editor.unlayer.com/embed.js');
    unlayerScript.onload = () => {
      this.loadEditor();
    };
    document.head.appendChild(unlayerScript);
  }

Every time you create an EmailEditorComponent instance it adds another one to HEAD! I added an ngOnDestroy that removed the script tag when the component was destroyed but it doesn't work because once the code is added into memory just removing the script tag won't remove it.

This kind of thing fundamentally won't work in Angular. I gave up and used an alternative editor at the time, although thinking about it now it may be possible to remove this script stuff from ngOnInit completely and load the embed.js file as you normally would in angular - either in your base html file or in your angular.json file. And then just run this.loadEditor() in the ngOnInit. I can't remember if I tried this at the time but might work?

[eni9889]

I am experiencing a similar issue. Is there any chance this will be fixed in the near future?

[mayorquin]

Any update on this? I have the same problem :(

[adeelraza]

@tboeckmann thank you for the PR. The update should resolve this problem.