Question

我想在我的角度应用程序中使用bootstrap3-wysihtml5编辑器。我已经在我的节点模块中包含了bootstrap3-wysihtml5-npm包，而不是在我的angular-cli.json文件中包含js和css文件，如下所示：

"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，它以这种方式工作。

UPDATE：

在chrome dev工具中发现此错误：

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

在Angular中导入bootstrap3-wysihtml5

UPDATE：

0 个答案: