FroalaエディタがjQueryを参照していない

Question

私はAngular4 AppでFroalaエディタを使用しようとしています。これは、Javascript ServicesとAngular2SpaTemplateを使用した.NETコアプロジェクトです。ここで

は私の設定です：

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