有角度的Froala _this.$element.froalaEditor不是函数

我已经阅读了SO和git上的所有答案,以了解为什么froalaEditor不能在我的项目中工作。

这是我的设置:

我已经通过使用

npm install angular-froala-wysiwyg --save

"styles": [
    "styles.scss",
    "../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
    "../node_modules/froala-editor/css/froala_style.min.css"
  ],
"scripts": [
    "../node_modules/froala-editor/js/froala_editor.pkgd.min.js"

  ],

然后在我的模块中:

import {FroalaEditorModule, FroalaViewModule} from 'angular-froala-wysiwyg';

 @NgModule({
    imports: [
        HttpClientModule, CommonModule, RouterModule.forChild(routes), LayoutModule, FormsModule, ReactiveFormsModule, DropzoneModule,
        FroalaEditorModule.forRoot(), FroalaViewModule.forRoot()

    ], exports: [
        RouterModule,
    ], declarations: [
        ContentMakerComponent,
        VideoElementComponent,
        TextElementComponent,
        MultipleChoiceElementComponent,
        SoundElementComponent,
        DocumentElementComponent
    ],
    providers: [
        {
            provide: DROPZONE_CONFIG,
            useValue: DEFAULT_DROPZONE_CONFIG
        }
    ]
})

然后在我的组件中:

<div [froalaEditor]>Hello, Froala!</div>

现在,每当我打开组件时,我得到:

ERROR TypeError: _this._$element.froalaEditor is not a function
at eval (editor.directive.js:167)
at ZoneDelegate.invoke (zone.js:388)
at Zone.run (zone.js:138)
at NgZone.runOutsideAngular (core.js:4708)
at FroalaEditorDirective.createEditor (editor.directive.js:166)
at FroalaEditorDirective.ngOnInit (editor.directive.js:244)
at checkAndUpdateDirectiveInline (core.js:12411)
at checkAndUpdateNodeInline (core.js:13935)
at checkAndUpdateNode (core.js:13878)
at debugCheckAndUpdateNode (core.js:14771)