$('#mergely').mergely is not a function in angular 6 typescript

394 views
Skip to first unread message

saurabh sharma

unread,
Aug 2, 2018, 2:01:14 AM8/2/18
to Mergely
Hi I have downloaded mergely.js from the http://www.mergely.com/download and  added mergely.js, mergely.css in my angular 6 project's typescript file still I am getting error  $('#mergely').mergely is not a function. in my angular 6 project. Please help me how can I solve this problem.

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
...
ngOnInit() {
$(document).ready(function () {
// initialize mergely
$('#mergely').mergely();

// set editor content
$('#mergely').mergely({
license: 'lgpl',
cmsettings: {
readOnly: true
},
lhs: function(setValue) {
setValue('the quick red fox\njumped over the hairy dog');
},
rhs: function(setValue) {
setValue('the quick brown fox\njumped over the lazy dog');
}
});
});
}
...

saurabh sharma

unread,
Aug 2, 2018, 2:03:38 AM8/2/18
to Mergely
<script src="../xyz/lib/mergely-4.0.5/lib/jquery.min.js"></script>
<script src="../xyz/lib/mergely-4.0.5/lib/codemirror.min.js"></script>
<link rel="stylesheet" media="all" href="../xyz/lib/mergely-4.0.5/lib/codemirror.css" />
<script src="../xyz/lib/mergely-4.0.5/lib/searchcursor.min.js"></script>
<script src="../xyz/lib/mergely-4.0.5/lib/mergely.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" href="../xyz/lib/mergely-4.0.5/lib/mergely.css" />


<h6 class="text-blue">Code Diff</h6> &nbsp;
<!-- <div [innerHtml]="outputHtml"></div> -->

<div class="mergely-full-screen-8">
<div class="mergely-resizer">
<div id="mergelyId" #mergelyId></div>
</div>
</div>

qiany...@163.com

unread,
Aug 2, 2018, 2:55:09 AM8/2/18
to Mergely
Hi. In you html file, the div's id is:
<div id="mergelyId" #mergelyId></div>
"mergelyId",but in your typescript,the id is"mergely"$('#mergely').mergely,please modify this error and try again!
在 2018年8月2日星期四 UTC+8下午2:01:14,saurabh sharma写道:

saurabh sharma

unread,
Aug 2, 2018, 3:16:35 AM8/2/18
to Mergely
Thank you for your reply. I have changed the id but still the problem is same
$(document).ready(function () {
// initialize mergely
$('#mergelyId').mergely();

// set editor content
$('#mergelyId').mergely({
license: 'lgpl',
cmsettings: {
readOnly: true
},
lhs: function(setValue) {
setValue('the quick red fox\njumped over the hairy dog');
},
rhs: function(setValue) {
setValue('the quick brown fox\njumped over the lazy dog');
}
});
});

<h6 class="text-blue">Code Diff</h6> &nbsp;
<!-- <div [innerHtml]="outputHtml"></div> -->

<div class="mergely-full-screen-8">
<div class="mergely-resizer">
<div id="mergelyId"></div>
</div>
</div>


core.js:1449 ERROR TypeError: $(...).mergely is not a function

Jamie Peabody

unread,
Aug 2, 2018, 3:21:29 AM8/2/18
to Mergely
Put a breakpoint in lib/mergely.js in jQuery.pluginMaker - it should be called. Also, there is something strange about the error:

TypeError: $(...).mergely is not a function

It looks like $.mergely is defined, but it is not a function.

qiany...@163.com

unread,
Aug 2, 2018, 7:32:59 AM8/2/18
to Mergely
I think you can try Jamie's function to debug. I encountered this problem before because I downloaded the files from the official website, but I accidentally changed the file, causing the function mergely() to be a incomplete function. So I think you should put a breakpoint in lib/mergely.js in jQuery.pluginMaker to see whether the function is called.

在 2018年8月2日星期四 UTC+8下午3:16:35,saurabh sharma写道:

saurabh sharma

unread,
Aug 6, 2018, 3:09:12 AM8/6/18
to Mergely
I had putted breakpoint   in lib/mergely.js in jQuery.pluginMaker it is skipping that function. The function is not getting called. any further suggestion or guidance how I can make it called
in my typings.d.ts I have defined an interface so that Iwill not get any compile time error. and in my angularcli.json I have registered the scripts and styles needed by mergely
interface JQuery{
mergely (options?: any): any;
mergely (param_one:any,param_two:any)
}

saurabh sharma

unread,
Aug 6, 2018, 3:21:24 AM8/6/18
to Mergely
That function is not getting called. It is just skipped the function

Jamie Peabody

unread,
Aug 6, 2018, 7:32:38 AM8/6/18
to Mergely
I started working on an example, but I am totally new to Angular.  That said, I got pretty far - just some css issues at this stage.  I think your problem is that you need to declare 'mergely' as a type.

I created a new app, and followed this jQuery plugin setup here.

I use npm to install jquery, mergely and codemirror modules.

I added the css files to ./src/app/app.component.ts, e.g.:
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    '../../node_modules/codemirror/lib/codemirror.css',
    '../../node_modules/mergely/lib/mergely.css',
    './app.component.css'
  ]
})

Add typings.d.ts file (this defines mergely as a function):
interface JQuery {
   mergely(options?: any) : any;
}

That's as far as I got for now.  CSS is not quite right.  Looking into it, but maybe the above helps.  I'll create a github project once I have the example done.

Jamie Peabody

unread,
Aug 6, 2018, 7:53:07 AM8/6/18
to Mergely
Here is the mergely-angular example.  Use "npm install"

saurabh sharma

unread,
Aug 6, 2018, 9:59:09 AM8/6/18
to Mergely
Thank you so much Jamie this is really worked for me. 
Reply all
Reply to author
Forward
Message has been deleted
Message has been deleted
0 new messages