Import bootstrap3-wysihtml5 in Angular

875 views Asked by At

I want to use the bootstrap3-wysihtml5 editor in my angular application. I have included for that the bootstrap3-wysihtml5-npm package in my node modules and than i include the js and css files in my angular-cli.json file like this:

"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"  
  ],

But if I want to import it in my component I have this error:

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'

This is my component

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

}

For the boostrap-datepicker it works in this way.

UPDATE:

Found this error in 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

There are 0 answers