Grapesjs: Unable to use this liberary in Angular2 Kindly create any demo project

[aliassad]

AppComponent_Host.html:1 ERROR TypeError: Right-hand side of 'instanceof' is not an object
    at n._setElement (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:2:15188)
    at n.setElement (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:2:15110)
    at n._ensureElement (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:2:16010)
    at n.e.View (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:2:14646)
    at new n (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:2:22607)
    at Object.init (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:2:327758)
    at n.loadModule (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:2:354056)
    at n.eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:2:353244)
    at Array.forEach (<anonymous>)
    at n.initialize (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:2:353219)

[aliassad]

Jquery added
Please don't close this issue without fixing it

[artf]

What is on the right-hand side of 'instanceof'?

[aliassad]

Unable to figure out this think now i am using AngularJS to test this liberary work with AngularJS 1 or not

[artf]

Unable to figure out

If the error is in console just click on it and show the part which throws the error

[andre-bonfatti-movile]

I think you're doing something wrong, @aliassad

This is how I got to use grapesjs with Angular 2/4 Angular:

1) npm install grapesjs --save. jQuery will be installed for you

2) on _.angular-cli.json_, add the source of both style and script of grapesjs and jQuery script:

  // ...
  apps: {
    // ...
    "styles": [
       "styles.scss", // your styles
       "../node_modules/grapesjs/dist/css/grapes.min.css"
     ],
     "scripts": [
       "../node_modules/jquery/dist/jquery.min.js",
       "../node_modules/grapesjs/dist/grapes.min.js" // ORDER MATTERS!
     ]
  }

3) call grapes on your module:

import { Component, OnInit } from '@angular/core';

declare var grapesjs: any; // Important!

@Component({
  selector: 'app-awesome-component',
  template: '<div id="gjs"></div>'
})
export class AwesomeComponent implements OnInit {
  // ...
  ngOnInit() {
    grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
    });
  }
}

--

I'd close this issue if these steps above work (which is the Angular way of dealing with 3rd party libraries). It is somewhat confusing to configure grapesjs on an Angular project, but it works.

I faced @aliassad's problem when I was importing [email protected] on the index.html. It could be that jQuery's version is your problem

Obs: it works if you import [email protected] on the index.html. But please, don't.

[andre-bonfatti-movile]

Oops. Just now realized he was talking about Angular 1 :see_no_evil:

[artf]

thanks @andre-bonfatti-movile for your examples, might be useful for someone else
@aliassad try to update the grapesjs to the latest version, I've made some errors a little bit more verbose (eg. missing jQuery). For now, I close this one

[deepuke]

Thanks @andre-bonfatti-movile :)

[abdodeve]

I think you're doing something wrong, @aliassad

This is how I got to use grapesjs with Angular 2/4 Angular:

1. npm install grapesjs --save. jQuery will be installed for you
2. on _.angular-cli.json_, add the source of both style and script of grapesjs and jQuery script:

  // ...
  apps: {
    // ...
    "styles": [
       "styles.scss", // your styles
       "../node_modules/grapesjs/dist/css/grapes.min.css"
     ],
     "scripts": [
       "../node_modules/jquery/dist/jquery.min.js",
       "../node_modules/grapesjs/dist/grapes.min.js" // ORDER MATTERS!
     ]
  }

1. call grapes on your module:

import { Component, OnInit } from '@angular/core';

declare var grapesjs: any; // Important!

@Component({
  selector: 'app-awesome-component',
  template: '<div id="gjs"></div>'
})
export class AwesomeComponent implements OnInit {
  // ...
  ngOnInit() {
    grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
    });
  }
}

--

I'd close this issue if these steps above work (which is the Angular way of dealing with 3rd party libraries). It is somewhat confusing to configure grapesjs on an Angular project, but it works.

I faced @aliassad's problem when I was importing [email protected] on the index.html. It could be that jQuery's version is your problem

Obs: it works if you import [email protected] on the index.html. But please, don't.

You help a lot thanks a million

[j0131n]

I think you're doing something wrong, @aliassad

This is how I got to use grapesjs with ~Angular 2/4~ Angular:

1. npm install grapesjs --save. jQuery will be installed for you
2. on _.angular-cli.json_, add the source of both style and script of grapesjs and jQuery script:

  // ...
  apps: {
    // ...
    "styles": [
       "styles.scss", // your styles
       "../node_modules/grapesjs/dist/css/grapes.min.css"
     ],
     "scripts": [
       "../node_modules/jquery/dist/jquery.min.js",
       "../node_modules/grapesjs/dist/grapes.min.js" // ORDER MATTERS!
     ]
  }

1. call grapes on your module:

import { Component, OnInit } from '@angular/core';

declare var grapesjs: any; // Important!

@Component({
  selector: 'app-awesome-component',
  template: '<div id="gjs"></div>'
})
export class AwesomeComponent implements OnInit {
  // ...
  ngOnInit() {
    grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
    });
  }
}

--

I'd close this issue if these steps above work (which is the Angular way of dealing with 3rd party libraries). It is somewhat confusing to configure grapesjs on an Angular project, but it works.

I faced @aliassad's problem when I was importing [email protected] on the index.html. It could be that jQuery's version is your problem

Obs: it works if you import [email protected] on the index.html. But please, don't.

Will give this a try, thanks anyway!

[RizwanMalvat260]

@andre-bonfatti-movile Thanks for that answer. I tried te same way around and grapejs loads but the components or we say plugins don't load. Any workaround that is available for that? Thanks in advance

[shellprog]

Thanks for the amazing comment @andre-bonfatti-movile. I cant find .min.js. If it is the case for anyone use the below code
"scripts": [ "../node_modules/grapesjs/dist/grapes.js" ]

[tmmschmit]

I've the same problem, i've installed grapejs with npm, but no dist folder inside.

[artf]

@tmmschmit grapesjs not grapejs