Issue #1443Opened September 19, 2018by sapien990 reactions

Angularjs components as grapesjs components

Question

Hey artf,

first gratulations to this awesome project, i really enjoy using it. Second: this is NOT about running grapesjs within an angular project, its more the exact opposite: grapesjs already runs fine as a angular 6 component. What i want to do is to use other angular-components within the grapesjs canvas. On the main page the component (just some helloworld) works without any problems next to the grapesjs component, which looks like the following:

<demo-component></demo-component> <grapesjs-component></grapesjs-component>

demo-component renders as it should as

\<demo-component _ngcontent-c0="" _nghost-c1=""> \<h1 _ngcontent-c1="">DEMO HERE\</h1> \</demo-component>

Put the whole bunch of angular deps as scripts in the canvas, they seem to load successfully according to the network tab in the browser. I also made a custom block for the component, and dragged it into the canvas.

... canvas: { scripts: [ '/vendor.js', '/main.js', '/polyfills.js', '/runtime.js', '/scripts.js', '/styles.js', ] },

Looking at the html export "preview" i see the custom element - as expected

<demo-component> </demo-component>

The only problem is that i dont see its angular representation. Looking at the rendered code in the iframe of the preview-window i think i know why - i dont see any script tags there. Am i right and those scripts should be in there when i specify them in the iframe (or i got something wrong on https://grapesjs.com/docs/modules/Components-js.html#dependencies). Or is there a better grapesjs'ish solution to achieve angular components as components in grapes?

Thanks a lot and Cheers

Answers (2)

artfSeptember 20, 20180 reactions

All custom scripts loaded via canvas.scripts are loaded BEFORE components, so if you try to mount on something obviously it doesn't work. Probably you need also make use of Component related scripts

lock[bot]September 20, 20190 reactions

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.