CanvasDesigner with Typescript/Angular7
krishisola opened this issue · comments
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".
- Copied canvas-designer-widget.js, widget.js and widget.html files
- Declared both js files in "angular.json". Declared the function in ts file.
"declare function CanvasDesigner(): void" - 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?
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().
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);
}
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