Angular CLI 18中无法加载grapesjs-blocks-basic的问题求助

问题根源 #

grapesjs-blocks-basic的新版本已切换为ESM模块输出，不再提供旧版的.min.js文件，且Angular 18对ES模块的处理更严格，旧的导入方式已不再适用。

修正步骤 #

1. 确认依赖安装完整

确保同时安装grapesjs核心库和blocks-basic插件：

npm install grapesjs grapesjs-blocks-basic

2. 组件内正确导入并注册插件

在你的Angular组件（例如editor.component.ts）中，按ESM规范导入并初始化：

import grapesjs from 'grapesjs';
import blocksBasic from 'grapesjs-blocks-basic';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnInit {
  ngOnInit(): void {
    const editor = grapesjs.init({
      container: '#gjs',
      // 其他GrapesJS配置项（如画布尺寸、样式等）
      plugins: [blocksBasic],
      pluginsOpts: {
        [blocksBasic]: {
          // 可选：自定义加载的基础块，比如只加载单列、双列布局
          blocks: ['column1', 'column2']
        }
      }
    });
  }
}

3. 修复TypeScript模块解析报错

如果TS提示"找不到模块"，检查tsconfig.json的compilerOptions，确保以下配置正确：

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    // 其他原有配置...
  }
}

4. 可选：使用UMD模式导入（不推荐）

如果一定要用script标签方式，需使用包内的UMD输出文件。在angular.json的构建配置中添加脚本引用：

{
  "architect": {
    "build": {
      "options": {
        "scripts": [
          "node_modules/grapesjs/dist/grapesjs.min.js",
          "node_modules/grapesjs-blocks-basic/dist/index.umd.js"
        ]
      }
    }
  }
}

然后在组件中声明全局变量并注册：

declare var grapesjs: any;
declare var grapesjsBlocksBasic: any;

// 初始化时注册插件
const editor = grapesjs.init({
  // ...其他配置
  plugins: [grapesjsBlocksBasic],
});

验证 #

启动Angular应用后，检查GrapesJS编辑器是否加载了基础块（如文本、列布局等）。若仍有问题，打开开发者工具查看控制台错误，排查是否存在模块解析或依赖缺失问题。

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