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

[saurabh sharma]

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]

<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]

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]

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]

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]

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]

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]

That function is not getting called. It is just skipped the function

[Jamie Peabody]

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]

Here is the mergely-angular example.  Use "npm install"

[saurabh sharma]

Thank you so much Jamie this is really worked for me.