1

我想在我的 Angular 应用程序中使用 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，它以这种方式工作。

更新：

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

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
4

0 回答 0