javascript - Load CKEDITOR in angular 2 -

alright, life of me can't figure out how load ckeditor in angular 2.

i have ran

"typings install dt~ckeditor --global --save" 

ckeditor located @ /lib/ckeditor/ckeditor.js in system.config.js in map section have:

"ckeditor": 'lib/ckeditor/ckeditor.js' 

now can't figure out how import angular 2 component.

i have added refence tag (/// <reference...>) , didn't work. totally stuck

edit

here system.config.js

 /**  * system configuration angular 2 samples  * adjust necessary application needs.  */ (function(global) {   // map tells system loader things   var map = {     'app':                        'app', // 'dist',     '@angular':                   'node_modules/@angular',     'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',     'rxjs':                       'node_modules/rxjs',     'moment':                     'node_modules/moment/moment.js',     'ckeditor' :                   'node_modules/ckeditor'   };   // packages tells system loader how load when no filename and/or no extension   var packages = {     'app':                        { main: 'main.js',  defaultextension: 'js' },     'rxjs':                       { defaultextension: 'js' },     'angular2-in-memory-web-api': { main: 'index.js', defaultextension: 'js' },     'ckeditor':                   { main:'ckeditor.js', defaultextension:'js' },   };   var ngpackagenames = [     'common',     'compiler',     'core',     'forms',     'http',     'platform-browser',     'platform-browser-dynamic',     'router',     'router-deprecated',     'upgrade'   ];   // individual files (~300 requests):   function packindex(pkgname) {     packages['@angular/'+pkgname] = { main: 'index.js', defaultextension: 'js' };   }   // bundled (~40 requests):   function packumd(pkgname) {     packages['@angular/'+pkgname] = { main: '/bundles/' + pkgname + '.umd.js', defaultextension: 'js' };   }   // environments should use umd; (karma) need individual index files   var setpackageconfig = system.packagewithindex ? packindex : packumd;   // add package entries angular packages   ngpackagenames.foreach(setpackageconfig);   var config = {     map: map,     packages: packages   };   system.config(config); })(this); 

installing typings adds type checking , , not import library self, show 2 ways add ckeditor 1 way import path in component : ( installed ckeditor via npm command npm install ckeditor -s replace path yours)

import { component, elementref , afterviewinit} '@angular/core'; let ckeditor = require("node_modules/ckeditor/ckeditor.js"); @component( {     moduleid: module.id,     selector: 'my-app',     templateurl: './app.tmpl.html' }) export class appcomponent implements afterviewinit {     ngafterviewinit()     {          ckeditor.basepath="/node_modules/ckeditor/";         console.log(ckeditor);         ckeditor.replace('sample');      } } 

you can add ckeditor type via : variable defined , , benefit type checking , don't forget add basepath it's necceasary ckeditor find dependencies. way load via systemjs , solution go system.config.js file , add these lines :

var map = {     'app':                        'src', // 'dist',     '@angular':                   'node_modules/@angular',     'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',     'rxjs':                       'node_modules/rxjs'     ,'ckeditor' :                   'node_modules/ckeditor/'   };    // packages tells system loader how load when no filename and/or no extension   var packages = {     'app':                        { main: 'main.js',  defaultextension: 'js' },     'rxjs':                       { defaultextension: 'js' },     'angular2-in-memory-web-api': { main: 'index.js', defaultextension: 'js' }     ,'ckeditor':                  {main:'ckeditor.js',defaultextension:'js'}   }; 

now mind ckeditor parts defined in both map , packages object both neccessary in component can import this:

import { component, elementref , afterviewinit} '@angular/core'; //let ckeditor = require("node_modules/ckeditor/ckeditor.js"); import * ckeditor "ckeditor"; @component( {     moduleid: module.id,     selector: 'my-app',     templateurl: './app.tmpl.html' }) export class appcomponent implements afterviewinit {     ngafterviewinit()     {          ckeditor.basepath="/node_modules/ckeditor/";         console.log(ckeditor);         ckeditor.replace('sample');      } }