CanvasDesigner with Typescript/Angular7

[krishisola]

Hi Muaz,

I'm trying to use Canvas-Designer into my Angular7 (Typescript) application. I tried to follow the documentation and couldn't make it work with Typescript.
The 1st hurdle is at "new CanvasDesigner()" with error "ReferenceError: CanvasDesigner is not defined".

1. Copied canvas-designer-widget.js, widget.js and widget.html files
2. Declared both js files in "angular.json". Declared the function in ts file.
   "declare function CanvasDesigner(): void"
3. Then the following code:
   let designer = new CanvasDesigner();
   designer.widgetHtmlURL = './widget.html';
   designer.widgetJsURL = './widget.js';

Could you offer any suggestions to resolve this error?

[krishisola]

The following changes resolved the above mentioned error:
canvas-designer-widget.js: export function CanvasDesigner()
...
import { CanvasDesigner } from "./canvas-designer-widget.js"

However, got the below error related to iframe and its source set to URL of "widget.html + widget.js"

designer.appendTo = function(parentNode, callback) {
    callback = callback || function() {};
    designer.iframe = document.createElement('iframe');

...
designer.iframe.src = designer.widgetHtmlURL + '?widgetJsURL=' + designer.widgetJsURL + '&tools=' + JSON.stringify(tools) + '&selectedIcon=' + selectedIcon + '&icons=' + JSON.stringify(designer.icons);
...
parentNode.appendChild(designer.iframe);
};

Error message:
Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'widget.html'
Error: Cannot match any routes. URL Segment: 'widget.html'
at ApplyRedirects.noMatchError

How to deal with the iframe or replace with what?
Note: Quick replace of iframe with div resulted in failure at iframe.contentWindow.postMessage().

[thangaraj80]

I tried this below code, its working

ngOnInit(): void { 
     let designer = new CanvasDesigner();
     designer.setTools(this.tools);
    //  designer.setTools(this.selectedIcon);  
 designer.widgetHtmlURL = '../../assets/widget.html';
 designer.widgetJsURL = '../../assets/widget.js';
if(!designer.iframe) {
  designer.appendTo(document.body);
}

[GauravBatla]

I tried this below code, its working

ngOnInit(): void { 
     let designer = new CanvasDesigner();
     designer.setTools(this.tools);
    //  designer.setTools(this.selectedIcon);  
 designer.widgetHtmlURL = '../../assets/widget.html';
 designer.widgetJsURL = '../../assets/widget.js';
if(!designer.iframe) {
  designer.appendTo(document.body);
}

can you tell how you connect socket.io
i face many issues can you share integrated canvas code