angulargrapesjs

How to integrate GrapesJS with Angular?


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?


Solution

  • 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.