Angular15集成grapesjs-preset-webpage报错：无法将命名空间'Editor'用作类型

问题场景 #

在Angular 15.0.4项目中集成grapesjs-preset-webpage插件：

• 已执行npm install grapesjs-preset-webpage完成安装
• 已在angular.json中配置相关样式与脚本
• 未启用插件时，GrapesJS基础区块、面板功能正常
• 启用插件后，抛出错误：Cannot use namespace 'Editor' as a type

相关代码示例 #

web-builder.component.ts #

import { Component, OnInit } from '@angular/core';
import grapesjs from 'grapesjs';
import 'grapesjs-preset-webpage';

@Component({
  selector: 'app-web-builder',
  templateUrl: './web-builder.component.html',
  styleUrls: ['./web-builder.component.scss']
})
export class WebBuilderComponent implements OnInit {

  private _editor: any;

  get editor(){
    return this._editor;
  }

  ngOnInit(): void {
    this._editor = this.initializeEditor();
    this.editor.on('asset:add', () => {
      console.log('Asset add fired');
      // this.editor.runCommand('open-assets');
    });
  }

  initializeEditor(){
    console.dir(window);
    return grapesjs.init({
      container: '#gjs',
      autorender: true,
      forceClass: false,
      components: '',
      style: '',
      plugins: ['gjs-preset-webpage'],
      pluginsOpts: {
        'gjs-preset-webpage': {
          navbarOpts: false,
          countdownOpts: false,
          formsOpts: false,
          blocksBasicOpts: {
            blocks: ['link-block', 'quote', 'image', 'video', 'text', 'column1', 'column2', 'column3'],
            flexGrid: false,
            stylePrefix: 'lala-' 
          }
        }
      },
      assetManager: {
        uploadText: 'Add image through link or upload image',
        modalTitle: 'Select Image',
        openAssetsOnDrop: 1,
        inputPlaceholder: 'http://url/to/the/image.jpg',
        addBtnText: 'Add image',
        uploadFile: (e: any) => {
          const file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
        },
        handleAdd: (textFromInput: any) => {
          this.editor.AssetManager.add(textFromInput);
        }
      },
      canvas: {
        styles: [
          'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
          'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'
        ],
        scripts: ['https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js']
      }
    });

  }
}

web-builder.component.html #

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <div id="gjs">
            </div>
        </div>
    </div>
</div>

解决方案 #

该错误源于插件TypeScript类型定义与GrapesJS的类型命名冲突，可通过以下方式解决：

1. 修正插件导入方式 #

移除组件中的import 'grapesjs-preset-webpage';，改为在angular.json的scripts数组中直接引入插件脚本：

"scripts": [
  "node_modules/grapesjs/dist/grapesjs.min.js",
  "node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js"
]

2. 安装/更新类型依赖 #

确保已安装GrapesJS的类型定义包，若未安装或版本不匹配，执行：

npm install @types/grapesjs --save-dev

若已安装，可尝试重新安装修复可能的类型损坏：

npm uninstall @types/grapesjs && npm install @types/grapesjs --save-dev

3. 跳过库类型检查（临时方案） #

若上述方法无效，可在tsconfig.json中启用skipLibCheck跳过库的类型检查，避免命名空间冲突错误：

{
  "compilerOptions": {
    "skipLibCheck": true,
    // 其他配置...
  }
}

4. 调整编辑器类型声明 #

若@types/grapesjs安装正确，可将组件中private _editor: any;改为官方类型声明：

import grapesjs, { Editor } from 'grapesjs';

// ...

private _editor: Editor;

内容的提问来源于stack exchange，提问作者sanjai