如何在Angular应用中集成CKEditor？解决@angular/core模块找不到错误

我之前配置ng2-ckeditor的时候也踩过这个坑，给你几个实用的解决步骤，一步步来应该能搞定这个找不到@angular/core的错误：

1. 确认依赖安装完整且版本兼容 #

这个错误首先要排查依赖问题，别让版本不兼容或者依赖缺失拖后腿：

• 先打开项目根目录的package.json，确认里面有@angular/core这个依赖。如果没有，直接执行安装命令：

  npm install @angular/core --save
  

• 然后检查ng2-ckeditor和你的Angular版本是否匹配。比如Angular 4+对应的ng2-ckeditor版本要对应，建议先卸载再重新安装最新适配版：

  npm uninstall ng2-ckeditor --save
  npm install ng2-ckeditor --save
  

2. 修正SystemJS配置（systemjs.config.js） #

这个错误大概率是SystemJS没正确识别ng2-ckeditor的依赖路径，你需要在配置文件里补全映射和包规则：

• 在map对象里添加ng2-ckeditor和@angular/core的映射（如果@angular/core的映射已经存在就跳过）：

  map: {
    // 保留你已有的其他映射
    'ng2-ckeditor': 'npm:ng2-ckeditor',
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js'
  }
  

• 接着在packages对象里添加ng2-ckeditor的包配置：

  packages: {
    // 保留你已有的其他包配置
    'ng2-ckeditor': {
      main: './index.js',
      defaultExtension: 'js'
    }
  }
  

这样SystemJS就能正确定位到ng2-ckeditor及其依赖的@angular/core文件了。

3. 检查AppModule的导入是否正确 #

打开app.module.ts，确保你正确导入并声明了CKEditor模块，别写错名称：

import { CKEditorModule } from 'ng2-ckeditor';

@NgModule({
  imports: [
    // 保留你已有的其他模块
    CKEditorModule
  ],
  // 其他组件、服务配置...
})
export class AppModule { }

4. 清理缓存并重启服务 #

有时候缓存会导致依赖识别异常，彻底清理一下再重启：

• 删除项目根目录的node_modules文件夹和package-lock.json（如果用yarn就是yarn.lock）
• 重新安装所有依赖：npm install
• 重启Angular开发服务器：ng serve

如果以上步骤都不行，你可以试试手动引入CKEditor资源：下载CKEditor的标准包，把解压后的文件放到项目的assets文件夹里，然后在index.html里引入本地脚本：

<script src="assets/ckeditor/ckeditor.js"></script>

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