Froala Editor CSS not applying angular 5

Question

I am new with Froala Editor and trying to integrate it in my Angular 5 Project but after integration styles and css not applying on Froala Editor. Following guide from here

I have tried as follow.

angular.json

"styles": [
              "src/styles.css",
              "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
              "node_modules/froala-editor/css/froala_style.min.css",
              "node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/froala-editor/js/froala_editor.pkgd.min.js"
            ],

Folder Structure

app.module.ts

//..Other Imports 

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

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FroalaEditorModule.forRoot(), 
    FroalaViewModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import * as $ from 'jquery';
window["$"] = $;
window["jQuery"] = $;


if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

app.component.html

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

Output

Description

Don't know why it's result is weird. If have any idea then please share with us.

Answer 1

Finally I found the answer and I did silly mistake, But I want to answer my own question in detail so it will helps other.

Installing @angular/cli

Note: you can skip this part if you already have application generated.

npm install -g @angular/cli
ng new my-app
cd my-app

Add angular-froala-wysiwyg

npm install angular-froala-wysiwyg --save   

open src/app/app.module.ts and add

// Import Angular plugin. 
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';

@NgModule({
   ...
   imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
   ...
})

open angular.json file and insert a new entry into the styles array

"styles": [
  "styles.css",
  "../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
  "../node_modules/froala-editor/css/froala_style.min.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

in angular.json file insert a new entry into the scripts array

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/froala-editor/js/froala_editor.pkgd.min.js"
]

open src/app/app.component.html and add

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

Note :

Make sure you are adding styles and scrips in build portion as below. Because I did the same mistake and I asked question here. So Please you don't do that.

"build": {
          //..other code
            "styles": [
              "src/styles.css",
              "./node_modules/froala-editor/css/froala_editor.pkgd.min.css",
              "./node_modules/froala-editor/css/froala_style.min.css",
              "./node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/froala-editor/js/froala_editor.pkgd.min.js"
            ]
          },
          //..other Code
        },