How to integrate GrapesJS with Angular?

Question

I have (followed this https://medium.com/@camiloht23/integraci%C3%B3n-de-grapesjs-con-angular-11ebf3bb80c5) installed and trying to import GrapesJS in Angular. But I am getting an error as "Could not find a declaration file for module 'node_modules/grapesjs'. 'app-test/node_modules/grapesjs/dist/grapes.min.js' implicitly has an 'any' type. Try npm install @types/grapesjs if it exists or add a new declaration (.d.ts) file containing declare module 'node_modules/grapesjs';". How to clear the error?

Answer 1

Step1: Install using

npm i grapesjs --save

Step2: Add Styles and scripts to angular.json

"projects": {
    // ...,
    "architect":{
        // ...,
        "options": {
            "build": {
                ...,
                "styles": [
                    ...,
                    // Add this line
                    "node_modules/grapesjs/dist/css/grapes.min.css"
                ],
                "scripts": [
                    ...,
                    // Add this line
                    "node_modules/grapesjs/dist/grapes.min.js"
                ]
            }
        }
    }
}

Step3: Refrence

Create a file name typings.d.ts in the /src/ directory if it does not exists. Open the file typings.d.ts and add the following content:

declare var grapesjs: any;

Step4: Now open your component.ts file and initialize the library:

grapesjs.init({
    container: '#gjs',
    fromElement: true,
    height: '300px',
    width: 'auto',
    storageManager: false,
    panels: { defaults: [] },
});

In your component.html

<div id="gjs"></div>

Note: Its redundant to import grapesjs in the component file.

Answer 2

This is a typescript issue.

Seems you are using typescript, but GrapesJS doesn't have type definitions yet.

A quick fix for this is to disable this check by adding a disable rule before the import

// @ts-ignore
import * as grapesjs from 'grapesjs';

A better solution would be to create a types.d.ts file in the root of your project with declare module 'grapesjs' in it and then making sure this is included in your typescript transpile step. This is a little trickier than the disable rule above if you're unfamiliar with Typescript.

If you want a better understanding of this issue, I would recommend you search your error text and find some typescript stack overflow with more solutions. You can also consult the Typescript documentation here https://www.typescriptlang.org/docs/handbook/2/type-declarations.html

In the near future, we may have types for GrapesJS, current discourse is happening here:

https://github.com/artf/grapesjs/issues/1759

https://github.com/artf/grapesjs/pull/2224

Answer 3

I cleared this error by adding declare var grapesjs: any; in component.ts and initializing editor in ngOnInit() method.

Answer 4

Use:

npm i grapesjs

then add to angular.json

"projects": {
   ...,
   "architect":{
      ...,
      "options": {
         "build": {
             ...,
             "styles": {
                ...,
                "node_modules/grapesjs/dist/css/grapes.min.css" //<-- Add this
             },
             "scripts": {
               ...,
               "node_modules/grapesjs/dist/grapes.min.js", //<- Add this
             }
         }
      }
   }
}

And finally add to your component.ts something like this

import 'grapesjs-preset-webpage';
import grapesjs from 'grapesjs';

...

var editor = grapesjs.init({
  container : '#gjs',
  components: '<div class="txt-red">Hello world!</div>',
  style: '.txt-red{color: red}',
});