Hello there! I am currently in the process of learning Angular2 and wanted to integrate 3rd party libraries into it. Specifically, I am exploring the use of the summernote Js plugin, which is great for creating rich text areas. You can find more information about it here:
Let's take a look at 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 now let's explore the content of my-summernote.template.html:
<textarea class="form-control" name="theTextArea" id="theTextArea">
</textarea>
I have already included jQuery in my index.html file, but unfortunately, I am encountering the 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
If anyone could provide guidance on what might be causing this issue, I would greatly appreciate it. Thank you!