title: "ng2-CKEditor" node module is not working with typescript[Angular2]
body: <p>I am trying to configure CKEditor in my angular2 application.
  I am using node as my backend platform and i am using ng2-CKEditor npm module.</p>
  
  <p>Below are my code in respective files.</p>
  
  <p><strong>index.html::</strong></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link href="app/images/myblog.ico" rel="icon" type="image/x-icon" /&gt;
      &lt;link rel="stylesheet" href="app/css/app.css"&gt;
      &lt;!-- 1. Load libraries --&gt;
       &lt;!-- Polyfill(s) for older browsers --&gt;
      &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="//cdn.ckeditor.com/4.5.6/standard/ckeditor.js"&gt;&lt;/script&gt;
  
      &lt;!-- 2. Configure SystemJS --&gt;
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        System.import('app').catch(function(err){ console.error(err); });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;!-- 3. Display the application --&gt;
    &lt;body&gt;
      &lt;my-app&gt;Loading...&lt;/my-app&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>systemjs.config.ts::</strong></p>
  
  <pre><code>/**
   * System configuration for Angular 2 samples
   * Adjust as necessary for your application needs.
   */
  (function (global) {
    System.config({
      paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
      },
      // map tells the System loader where to look for things
      map: {
        // our app is within the app folder
        app: 'app',
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
        'ng2-ckeditor': 'app/utils/ckeditor/ckeditor.js',
        // other libraries
        'rxjs':                       'npm:rxjs',
        'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
      },
      // packages tells the System loader how to load when no filename and/or no extension
      packages: {
        app: {
          main: './js/main',
          defaultExtension: 'js'
        },
        rxjs: {
          defaultExtension: 'js'
        },
        'angular2-in-memory-web-api': {
          main: './index.js',
          defaultExtension: 'js'
        }
      }
    });
  })(this);
  </code></pre>
  
  <p><strong>main.ts::</strong></p>
  
  <pre><code>import {NgModule} from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app.module';
  import {FormsModule} from '@angular/forms';
  import {CKEditorModule} from 'ng2-ckeditor';
  
  const platform = platformBrowserDynamic();
  
  @NgModule({
    imports:      [
      CKEditorModule
    ],
    declarations: [
      AppModule,
    ],
    bootstrap: [AppModule]
  })
  export class AppMain { }
  
  platform.bootstrapModule(AppModule);
  </code></pre>
  
  <p><strong>app.component.ts::</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
    selector: 'my-app', 
    //templateUrl: 'app/templates/write-blog.html'
    template: `
      &lt;ckeditor [(ngModel)]="content" debounce="500"&gt;
        &lt;p&gt;Hello &lt;strong&gt;world&lt;/strong&gt;&lt;/p&gt;
      &lt;/ckeditor&gt;
      &lt;div [innerHTML]="content"&gt;&lt;/div&gt;`
  })
  export class AppComponent { 
     constructor(){
        //this.content = '&lt;p&gt;Hello &lt;strong&gt;World !&lt;/strong&gt;&lt;/p&gt;'
        }
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import {FormsModule} from '@angular/forms';
  import {CKEditorModule} from 'ng2-CKEditor'
  import { AppComponent } from './app.component';
  
  @NgModule({
    imports:      [ BrowserModule, FormsModule, CKEditorModule],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>Error::</strong></p>
  
  <blockquote>
    <p>zone.js:344 Unhandled Promise rejection: Template parse errors:
    Can't bind to 'ngModel' since it isn't a known property of 'ckeditor'. ("
        ][(ngModel)]="content" debounce="500">
          <p>Hello <strong>world</strong></p>
        
    "): AppComponent@1:14
    'ckeditor' is not a known element:
    1. If 'ckeditor' is an Angular component, then verify that it is part of this module.
    2. If 'ckeditor' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
        [ERROR ->]
          <p>Hello <strong>world</strong></p>
         ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
    Can't bind to 'ngModel' since it isn't a known property of 'ckeditor'. ("
        ][(ngModel)]="content" debounce="500">
          <p>Hello <strong>world</strong></p>
        
    "): AppComponent@1:14
    'ckeditor' is not a known element:
    1. If 'ckeditor' is an Angular component, then verify that it is part of this module.
    2. If 'ckeditor' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
        [ERROR ->]
          <p>Hello <strong>world</strong></p>
        http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21)
        at RuntimeCompiler._compileTemplate (<a href="http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53" rel="nofollow">http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53</a>)
        at eval (<a href="http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85" rel="nofollow">http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85</a>)
        at Set.forEach (native)
        at compile (<a href="http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49" rel="nofollow">http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49</a>)
        at ZoneDelegate.invoke (<a href="http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28" rel="nofollow">http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28</a>)
        at Zone.run (<a href="http://localhost:3000/node_modules/zone.js/dist/zone.js:85:43" rel="nofollow">http://localhost:3000/node_modules/zone.js/dist/zone.js:85:43</a>)
        at <a href="http://localhost:3000/node_modules/zone.js/dist/zone.js:451:57" rel="nofollow">http://localhost:3000/node_modules/zone.js/dist/zone.js:451:57</a>
        at ZoneDelegate.invokeTask (<a href="http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37" rel="nofollow">http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37</a>)
        at Zone.runTask (<a href="http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47)consoleError" rel="nofollow">http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47)consoleError</a> @ zone.js:344_loop_1 @ zone.js:371drainMicroTaskQueue @ zone.js:375ZoneTask.invoke @ zone.js:297
    zone.js:346 Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError @ zone.js:346_loop_1 @ zone.js:371drainMicroTaskQueue @ zone.js:375ZoneTask.invoke @ zone.js:297</p>
  </blockquote>
  
  <p>As i am new to angular2 with typescript and basically for MEAN stack, please help.
  I check other post for the same issue but did not help to resolve my issue.</p>