Froala 编辑器不引用 jQuery

Question

我正在尝试在我的 Angular4 应用程序中使用 Froala 编辑器。这是一个使用 Javascript 服务和 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 { }

然后我将 Layout 模块导入到将使用其组件的任何其他模块中，因此我有一个带有我想使用 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"] = $;