Issues with @types/ckeditor

Question

I'm having some issues using @types/ckeditor from the following source.

https://www.npmjs.com/package/@types/ckeditor

I've installed the package fine, and then imported the type into the relevant file and all is green in VS code.

import "CKEDITOR";
import { Injectable } from '@angular/core';

export interface IEditor {
    editor: CKEDITOR.editor
    addEventHandler(eventName: string, onEvent: Function): void;
    addContextMenuItem(menulabel: string, onEvent: Function): void;
    getTrackingPlugin(): any;
}
@Injectable({
    providedIn: 'root'
  })

export class Editor implements IEditor {
  public editor: CKEDITOR.editor

  constructor(rootElement: HTMLElement, config: CKEDITOR.config) {
      this.editor = CKEDITOR.inline(rootElement, config);
  }
}

Thats great, however when I do a build, I get the following error.

ERROR in ./src/app/modules/single-editor/services/editor.service.ts
Module not found: Error: Can't resolve 'CKEDITOR' in 'C:\Code\***\src\web\src\app\modules\single-editor\services'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `ng build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\***\AppData\Roaming\npm-cache\_logs\2019-05-07T10_31_08_926Z-debug.log
The terminal process terminated with exit code: 1

Terminal will be reused by tasks, press any key to close it.

This code is inside it's own module, I'm on the latest version of Angular, and I'm using ckeditor 4.

Answer 1

I believe i've found the answer. I needed to include the following.

/// <reference types="@types/ckeditor" /> 

I'd tried this before and it didn't work, the key thing I did wrong though was to not include it at the very beginning of the file, thats essential.