Angular2 - Add 3rd Party Javascript Library (Summernote)

Question

I'm new to Angular2 and trying to use 3rd party libraries in it. Trying to use summernote Js plugin, used for rich text area. http://summernote.org/getting-started/

This is my my-summernote.component.ts file.

import { ViewChild, ElementRef, AfterViewInit, Component} from '@angular/core';
import '../../assets/plugins/summernote/summernote.min.js';

declare var jQuery: any;

@Component({
    selector: 'my-summernote',
    templateUrl: './my-summernote.template.html'
})
export class SummerNoteComponent implements AfterViewInit {
    constructor(){   
     }
    ngAfterViewInit() {        
        jQuery("#theTextArea").summernote();
    }
}

And here is my-summernote.template.html file

<textarea class="form-control" name="theTextArea" id="theTextArea">                              
    </textarea>

I've included the jquery in index.html file, But i'm getting following error

    Uncaught Error: Cannot find module "codemirror"
        at webpackMissingModule (main.bundle.js:2211)
        at b.function.Array.reduce.Array.reduce.e (main.bundle.js:2211)
        at Object.505 (main.bundle.js:2211)
    Module not found: Error: Cannot resolve module 'codemirror' in C:\Project\Community3.0\CommunityAng\src\assets\plugins\summernote
resolve module codemirror in C:\Project\Community3.0\CommunityAng\src\assets\plugins\summernote
  looking for modules in C:\Project\Community3.0\CommunityAng\src
    C:\Project\Community3.0\CommunityAng\src\codemirror doesn't exist (module as directory)
    resolve 'file' codemirror in C:\Project\Community3.0\CommunityAng\src
      resolve file

Can someone please guide what i'm missing.

Answer 1

install bootstrap, summernote, ng2-summernote via npm.

• in .angular-cli.json

{

{"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/summernote/dist/summernote.css"
],

"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/summernote/dist/summernote.min.js",
"../node_modules/summernote/dist/lang/summernote-es-ES.min.js"
]}

}

• add Ng2Summernote in declarations of app.module.ts

  import { Ng2Summernote } from 'ng2-summernote/ng2-summernote';

• html and js

  <div class="row"> <div class="col-md-12"> <ng2-summernote [(ngModel)]="text"></ng2-summernote> </div> </div> <button class="btn btn-primary" (click)="submit()"> Submit</button> <div> {{model.text}} </div>

  import { Component, OnInit } from '@angular/core'; import { Ng2Summernote } from 'ng2-summernote/ng2-summernote'; @Component({ selector: 'app-summernote-richtext', templateUrl: './summernote-richtext.component.html', styleUrls: ['./summernote-richtext.component.css'] }) export class SummernoteRichtextComponent implements OnInit {

  constructor() { }

  ngOnInit() { } uploadData:string; text: string = 'appendix'; data: string = 'appendix'; model:any = {}; imgSrc = '/assets/img.jpg' options: any = { height: 100, toolbar: [['style', ['bold', 'italic', 'underline', 'clear']], ['para', ['ul', 'ol', 'paragraph']] ] }; disabled: boolean = false; submit(){ this.model.text = this.text; } }