Jyotirmay Jyotirmay - 2 months ago 164
Node.js Question

"ng2-CKEditor" node module is not working with typescript[Angular2]

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.

Below are my code in respective files.

index.html::

<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="app/images/myblog.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" href="app/css/app.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="//cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>

<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>


systemjs.config.ts::

/**
* 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);


main.ts::

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);


app.component.ts::

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
//templateUrl: 'app/templates/write-blog.html'
template: `
<ckeditor [(ngModel)]="content" debounce="500">
<p>Hello <strong>world</strong></p>
</ckeditor>
<div [innerHTML]="content"></div>`
})
export class AppComponent {
constructor(){
//this.content = '<p>Hello <strong>World !</strong></p>'
}
}


app.module.ts

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 { }


Error::


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">
Hello world

"): 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 ->]
Hello world
; 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">
Hello world

"): 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 ->]
Hello world
http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21)
at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53)
at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85)
at Set.forEach (native)
at compile (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49)
at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28)
at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:85:43)
at http://localhost:3000/node_modules/zone.js/dist/zone.js:451:57
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47)consoleError @ 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


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.

Answer

You need to add FormsModule to your module's imports in order to use ngModel directive because it is part of FormsModule:

@NgModule({
    imports: [
        CKEditorModule,
        FormsModule
    ]

Your code is also very messy, you should check out official Angular 2 quickstart app to see how your code should be structured.