How to use it with angular 4

[froala]

How to use it with angular 4

[alfredalfie]

Actually I tried the webpack guideline.

...
import "froala-editor/js/froala_editor.pkgd.min.js";
import { FroalaEditorModule, FroalaViewModule } from 'angular2-froala-wysiwyg';
...

@NgModule({
imports: [
CommonModule,
HttpModule,
TransferHttpModule,
FroalaEditorModule.forRoot(),
FroalaViewModule.forRoot(),
RouterModule.forRoot([
{ path: '', component: HomeView, pathMatch: 'full'},
{ path: 'lazy', loadChildren: './+lazy/lazy.module#LazyModule'}
])
],
declarations: [ AppComponent, HomeView ],
exports: [ AppComponent ]
})

and the error occurs:

WEBPACK_AMD_DEFINE_RESULT !== undefined && (module.exports = WEBPACK_AMD_DEFINE_RESULT)):"object"==typeof module&&module.exports?module.exports=function(b,c){return void 0===c&&(c="undefined"!=typeof window?require("jquery"):require("jquery")(b)),a(c)}:a(window.jQuery)}(function(a){var b=function(c,d){this.id=++a.FE.ID,this.opts=a.extend(!0,{},a.extend({},b.DEFAULTS,"object"==typeof d&&d));var e=JSON.stringify(this.opts);a.FE.OPTS_MAPPING[e]=a.FE.OPTS_MAPPING[e]||this.id,this.sid=a.FE.OPTS_MAPPING[e],a.FE.SHARED[this.sid]=a.FE.SHARED[this.sid]||{},this.shared=a.FE.SHARED[this.sid],this.shared.count=(this.shared.count||0)+1,this.$oel=a(c),this.$oel.data("froala.editor",this),this.o_doc=c.ownerDocument,this.o_win="defaultView"in this.o_doc?this.o_doc.defaultView:this.o_doc.parentWindow;var f=a(this.o_win).scrollTop();this.$oel.on("froala.doInit",a.proxy(function(){this.$oel.off("froala.doInit"),this.doc=this.$el.get(0).ownerDocument,th

TypeError: Cannot set property 'froalaEditor' of undefined
at Object. (/home/alfred/workspace/ng-universal-demo/dist/server.js:123122:5421)
at d.id (/home/alfred/workspace/ng-universal-demo/dist/server.js:123121:37)
at Object. (/home/alfred/workspace/ng-universal-demo/dist/server.js:123122:283)
at webpack_require (/home/alfred/workspace/ng-universal-demo/dist/server.js:26:30)
at Object. (/home/alfred/workspace/ng-universal-demo/dist/server.js:86774:101)
at webpack_require (/home/alfred/workspace/ng-universal-demo/dist/server.js:26:30)
at Object. (/home/alfred/workspace/ng-universal-demo/dist/server.js:49842:70)
at webpack_require (/home/alfred/workspace/ng-universal-demo/dist/server.js:26:30)
at Object. (/home/alfred/workspace/ng-universal-demo/dist/server.js:86875:81)
at Object. (/home/alfred/workspace/ng-universal-demo/dist/server.js:86927:30)
at webpack_require (/home/alfred/workspace/ng-universal-demo/dist/server.js:26:30)
at /home/alfred/workspace/ng-universal-demo/dist/server.js:94:18
at Object. (/home/alfred/workspace/ng-universal-demo/dist/server.js:97:10)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)

[gouthamsaie]

@alfredalfie, Have you solved the above proble..? If yes please let me know how to overcome this error.

[stefanneculai]

It looks you are using webpack, so please follow the steps for webpack integration: https://github.com/froala/angular2-froala-wysiwyg#use-with-webpack.

[stefanneculai]

@gouthamsaie I believe you should change the import for the editor to:

import * as FroalaEditor from 'froala-editor/js/froala_editor.pkgd.min';

[stadja]

Yes @alfredalfie ... did you fixed this problem ? If yes, how did you do that ?

[jainankit102]

@gouthamsaie Thanks for suggestion, but its not working for me.

Can you please tell me the full syntax.

thanks in advance.