“ng2-CKEditor”节点模块不能使用打印机

我正在尝试在我的angular2应用程序中configurationCKEditor。 我使用节点作为我的后端平台,我使用的是ng2-CKEditor npm模块。

下面是我的代码在各自的文件。

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

错误::

zone.js:344未处理的Promise拒绝:模板parsing错误:无法绑定到“ngModel”,因为它不是“ckeditor”的已知属性。 (“] [(ngModel)] =”content“debounce =”500“>

你好世界

“):AppComponent @ 1:14'ckeditor'不是一个已知的元素:1.如果'ckeditor'是一个Angular组件,那么确认它是这个模块的一部分2.如果'ckeditor'是一个Web组件, “CUSTOM_ELEMENTS_SCHEMA”到这个组件的“@ NgModule.schema”来抑制这个消息(“[ERROR – >]

你好世界

; 任务:承诺。 值:错误:模板parsing错误:(…)错误:模板parsing错误:无法绑定到'ngModel',因为它不是'ckeditor'的已知属性。 (“] [(ngModel)] =”content“debounce =”500“>

你好世界

“):AppComponent @ 1:14'ckeditor'不是一个已知的元素:1.如果'ckeditor'是一个Angular组件,那么确认它是这个模块的一部分2.如果'ckeditor'是一个Web组件, “CUSTOM_ELEMENTS_SCHEMA”到这个组件的“@ NgModule.schema”来抑制这个消息(“[ERROR – >]

你好世界

在http:// localhost:3000 / node_modules / (本机)在编译时( http :// localhost:3000 / node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85 ), http: //www.umd.js:16905:53 ) :// localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49 )在ZoneDelegate.invoke( http:// localhost:3000 / node_modules / zone.js / dist / zone.js ( http:// localhost:3000 / node_modules / zone.js / dist / zone.js:85:43 ): http:// localhost:3000 / node_modules / zone.js / dist Zone.runTask ( http:// localhost:3000 / node.js ) :/zone.js:451: 57在ZoneDelegate.invokeTask( http:// localhost:3000 / node_modules / zone.js / dist / zone.js:225:37 ) console_ror: @ zone.js:344_loop_1 @ zone.js:371drainMicroTaskQueue @ zone.js:375ZoneTask.invoke @ zone.js:297 zone.js:346错误:未被捕获(承诺):Erro r:模板parsing错误:(…)consoleError @ zone.js:346_loop_1 @ zone.js:371drainMicroTaskQueue @ zone.js:375ZoneTask.invoke @ zone.js:297

由于我是新的angular2与打字稿和基本上为平均堆栈,请帮助。 我检查其他职位的同一个问题,但没有帮助解决我的问题。

您需要将FormsModule添加到模块的imports中,以便使用ngModel指令,因为它是FormsModule一部分:

 @NgModule({ imports: [ CKEditorModule, FormsModule ] 

你的代码也很乱,你应该看看官方的Angular 2快速启动应用程序 ,看看你的代码应该如何结构。