不引用jQuery的Froala编辑器

Question

我试图在我的Angular4应用程序中使用Froala编辑器。这是一个使用Javascript和Angular2SpaTemplate的Angular2SpaTemplate核心项目。

这是我的配置：

// [ 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"] = $;