Froala Editor not referencing jQuery

Question

I'm trying to use Froala editor in my Angular4 App. This is an .NET Core project using Javascript Services and Angular2SpaTemplate.

Here is my configuration:

// [ 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 { }

Then I import the Layout module in any other module where its components will be used, Thus I have a module with a component which I want to use froala,

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

Everything compiles fine, I can run from the command line the following commands with no issues.

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

At runtime, the component throws this exception.

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)

I don't know where the problem is, apparently $ (jQuery) is not being imported as expected.

Any point to the right direction will be appreciated.

Answer 1

That is because jQuery is not visible globally. Maybe it would work if you add the following in your main.ts:

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