CODEWITHSUNDEEP
angularnpm
AlanObject
AlanObject

Reputation: 9973

How to resolve dependencies for ng2-ckeditor

To verify this problem I created a new Angular project:

$ ng new cktest
installing ng
  create .editorconfig
  create README.md

I added some trivial html input to the app component and ran it with ng serve to make sure everything was working ok. Then add the editor:

$ npm install ckeditor --save
[email protected] /Users/me/WebstormProjects/cktest
└── [email protected]

next:

$ npm install ng2-ckeditor --save
[email protected] /Users/me/WebstormProjects/cktest
└── [email protected] 

npm WARN [email protected] requires a peer of @angular/core@^2.1.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/forms@^2.1.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/common@^2.1.0 but none was installed.

At this point I have in my package.json

 "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "ckeditor": "^4.6.2",
    "core-js": "^2.4.1",
    "ng2-ckeditor": "^1.1.6",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },

So it seems like ng2-ckeditor is written to work with a much earlier version of angular than I have. Is there any easy way to resolve this?

UPDATE: I have a temporary work-around.

I pulled down the source (git clone https://github.com/chymz/ng2-ckeditor.git) for ng2-ckeditor. Reading the code I could not find any visible issue with Angular 4 vs Angular 2. So the following steps work:

  1. Copy the src directory in ng2-ckeditor project into my application in its own folder. It is just a few .ts files.
  2. Uninstall (npm uninstall) the ng2-ckeditor so it is no longer in the node_modules directory. I think this is not necessary but it eliminates the possibility of something accidentally getting imported.
  3. In the app.module.ts redo the import for CKEditorModule to reference the folder created in step 1.

  4. Load ckeditor.js in index.html:

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

I don't know why but it just doesn't work when you try to include it in the .angular-cli.json file.

Now ng2-ckeditor works with no issues I have seen so far. When the source is updated in the npm repository I will go for that but for now I am coding.

UPDATE:

The ng2-ceditor 1.1.7 release fixes this problem.

Upvotes: 1

Views: 2990

Answers (2)

dimson d
dimson d

Reputation: 1660

i checked ckeditor on angular 2.4. it works fine. angular 2.4 in many cases == angular 4. just try to use editor

Upvotes: 1

Julia Passynkova
Julia Passynkova

Reputation: 17889

Yes, you can see the dependencies of it - it is Angular 2 (previous version of Angular, Angular 3 does not exist). You can either use Angular 2 for while in your project and contact the code maintainer of the ng2-ckeditor project with question when he is planning to upgrade.

https://github.com/chymz/ng2-ckeditor/blob/master/package.json

"devDependencies": {
  "@angular/common": "^2.1.0",
  "@angular/compiler": "^2.1.0",
  "@angular/compiler-cli": "^2.1.0",
  "@angular/core": "^2.1.0",
  ...
},

Upvotes: 1

Related Questions