Froala Editor not referencing jQuery

Question

我正在尝试在我的Angular4应用程序中使用Froala编辑器。这是一个使用 Javascript Services 和 Angular2SpaTemplate 的 .NET Core 项目。

这是我的配置：

// [ webpack.config.vendor.js ]
...
module.exports = (env) => {
entry: {
vendor: [
...
'font-awesome/css/font-awesome.css',
'froala-editor/css/froala_editor.pkgd.css',
'froala-editor/css/froala_style.css',
'jquery'
...
]
},
plugins: {
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
...
},
...
}
}
// [ Layout.module.ts ]
// I created a LayoutModule, to group all layout stuff
// Import the Froala Editor plugin.
import "froala-editor/js/froala_editor.pkgd.min.js";
// Import Angular plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
@NgModule({
imports: [
...
// Froala
FroalaEditorModule.forRoot(),
FroalaViewModule.forRoot()
],
exports: [
...
FroalaEditorModule,
FroalaViewModule,
]
})
export class LayoutModule { }

然后我将布局模块导入任何其他将使用其组件的模块中，因此我有一个模块，其中包含我想使用 froala，

// [ mycomponent.html ]
<textarea [froalaEditor] class="form-control" name="summary" id="summary" formControlName="summary"></textarea>

一切编译正常，我可以从命令行运行以下命令，没有问题。

webpack 
webpack --config webpack.config.vendor.js

在运行时，组件会引发此异常。

ERROR ReferenceError: $ is not defined
at new FroalaEditorDirective (editor.directive.js:29)
at createClass (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:15748)
at createDirectiveInstance (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:15579)
at createViewNodes (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17007)
at callViewAction (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17451)
at execComponentViewsAction (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17360)
at createViewNodes (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17034)
at createRootView (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:16902)
at callWithDebugContext (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:18283)
at Object.debugCreateRootView [as createRootView] (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17600)

我不知道问题出在哪里，显然$ (jQuery(没有按预期导入。

任何指向正确方向的点都将不胜感激。

Answer 1

这是因为jQuery在全局上不可见。如果您在main.ts中添加以下内容，也许它会起作用：

import * as $ from 'jquery';
window["$"] = $;
window["jQuery"] = $;