Импорт bootstrap3-wysihtml5 в Angular

Я хочу использовать редактор bootstrap3-wysihtml5 в моем угловом приложении. Для этого я включил пакет bootstrap3-wysihtml5-npm в модули моего узла, а затем включил файлы js и css в мой файл angular-cli.json следующим образом:

"styles": [        
    "../node_modules/bootstrap/dist/css/bootstrap.css",     
    "../node_modules/admin-lte/plugins/datatables/dataTables.bootstrap.css",   
    "../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css",  
    "../node_modules/bootstrap3-wysihtml5-npm/dist/bootstrap3-wysihtml5.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/admin-lte/dist/css/AdminLTE.css",
    "../node_modules/admin-lte/dist/css/skins/skin-red.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",        
    "../node_modules/admin-lte/dist/js/app.js",  
    "../node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js",
    "../node_modules/bootstrap3-wysihtml5-npm/dist/bootstrap3-wysihtml5.all.js"  
  ],

Но если я хочу импортировать его в свой компонент, у меня есть эта ошибка:

ERROR in ./~/bootstrap3-wysihtml5-npm/dist/bootstrap3-wysihtml5.min.js                                                                                                                     
Module not found: Error: Can't resolve 'bootstrap.wysihtml5.commands' in '...\src\portal\node_modules\bootstrap3-wysihtml5-npm\dist'                             
 @ ./~/bootstrap3-wysihtml5-npm/dist/bootstrap3-wysihtml5.min.js 2:19704-19833  
...
ERROR in ./~/bootstrap3-wysihtml5-npm/dist/bootstrap3-wysihtml5.min.js
Module not found: Error: Can't resolve 'wysihtml5' in '...\src\portal\node_modules\bootstrap3-wysihtml5-npm\dist'
...
ERROR in ./~/bootstrap3-wysihtml5-npm/dist/bootstrap3-wysihtml5.min.js
Module not found: Error: Can't resolve 'bootstrap.wysihtml5.templates' in '...\src\portal\node_modules\bootstrap3-wysihtml5-npm\dist'

Это мой компонент

import { Component, OnInit, Input } from '@angular/core';
import * as $ from 'jquery';
import 'bootstrap3-wysihtml5-npm';


@Component({
  selector: 'sys-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit(){
    $('#' + this.id + '.textarea').wysihtml5();
  }

}

Для boostrap-datepicker это работает таким образом.

ОБНОВИТЬ:

Нашел эту ошибку в chrome dev tools:

Uncaught ReferenceError: handlebars is not defined
    at eval (eval at webpackJsonp.85.module.exports (scripts.bundle.js:84), <anonymous>:14301:36)
    at eval (eval at webpackJsonp.85.module.exports (scripts.bundle.js:84), <anonymous>:14303:2)
    at eval (<anonymous>)
    at webpackJsonp.85.module.exports (scripts.bundle.js:84)
    at Object.307 (scripts.bundle.js:20)
    at __webpack_require__ (inline.bundle.js:53)
    at Object.897 (scripts.bundle.js:97)
    at __webpack_require__ (inline.bundle.js:53)
    at webpackJsonpCallback (inline.bundle.js:24)
    at scripts.bundle.js:1

0 ответов

Другие вопросы по тегам