Angular2 - サードパーティのJavascriptライブラリ（サマータイム）を追加

Question

Angular2が新しく、サードパーティライブラリを使用しようとしています。リッチテキストエリアに使用されるsummernote Jsプラグインを使用しようとしています。 http://summernote.org/getting-started/

これは私のmy-summernote.component.tsファイルです。

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(); 
    } 
} 

そして、ここに私の-summernote.template.htmlファイル

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

である私は、のindex.htmlファイルにjqueryのを含めましたが、私は次のエラーに

を取得しています

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 

誰かが紛失しているものを指導できますか？

Answer 1

インストールブートストラップ、summernote、ng2-summernoteからnpm。

.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" 
]} 

}

• app.module.ts

  インポートの宣言でNg2Summernoteを追加{Ng2 Summernote}から 'ng2-summernote/ng2-summernote'を選択します。あなたは `codemirror`ファイルを含めている

• htmlと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; } }