Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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)

Issue Analytics

State:
Created 6 years ago
Comments:14 (4 by maintainers)

Top GitHub Comments

20reactions

andre-bonfatti-movilecommented, Aug 15, 2017

I think you’re doing something wrong, @aliassad

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

npm install grapesjs --save. jQuery will be installed for you
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!
     ]
  }

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 jQuery@2.2.4 on the index.html. It could be that jQuery’s version is your problem

Obs: it works if you import jQuery@3.2.1 on the index.html. But please, don’t.

3reactions

artfcommented, Aug 16, 2017

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