Using google-diff-match-patch in angular

Question

I'd like to use the google diff/match/patch lib in an angular app to show the difference between two texts.

My usage would be something like this:

public ContentHtml: SafeHtml;
compare(text1: string, text2: string):void {
        var dmp = new diff_match_patch();

        dmp.Diff_Timeout = 1;
        dmp.Diff_EditCost = 4;

        var d = dmp.diff_main(text1, text2);
        dmp.diff_cleanupSemantic(d);
        var ds = dmp.diff_prettyHtml(d);

        this.ContentHtml = this._sanitizer.bypassSecurityTrustHtml(ds);
}

Problem is, how do I import diff_match_patch for this line?
var dmp = new diff_match_patch();

Shashank Vivek · Accepted Answer · 2020-08-25 06:02:29Z

4

You need to import the npm package for angular project in package.json.

"diff-match-patch": "^1.0.5",

and import in component as:

import { Component } from '@angular/core';
import DiffMatchPatch from 'diff-match-patch';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  getDiff() {
    var dmp = new DiffMatchPatch();
    var diff = dmp.diff_main('Hello', 'Hallo');
    // Result: [(-1, "Hell"), (1, "G"), (0, "o"), (1, "odbye"), (0, " World.")]
    dmp.diff_cleanupSemantic(diff);
    // Result: [(-1, "Hello"), (1, "Goodbye"), (0, " World.")]
    console.log(diff);
  }

}

Here is a demo code

answered Aug 25, 2020 at 6:02

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sam Over a year ago

Do I need to add the package to webpack or something, too? After adding this I got an error on loading Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__ (bootstrap:79) and I'm not sure why

Shashank Vivek Over a year ago

@Sam : I tried using the same code on a small demo project of angular and things worked fine when I served using ng serve and also tried ng build --prod . Are you getting the error when you are running ng s ? For the provided error, there are few solutions I found : stackoverflow.com/questions/41549923/… . Do let me know more about your implementation.

Shashank Vivek Over a year ago

@Sam: any luck ?

Sam Over a year ago

In the end it was as simple as cleaning up the cache :/ Sorry it took me so long...

Shashank Vivek Over a year ago

@Sam : Glad to hear that it got fixed. Cheers !

Jozef - Spatialized.io · Accepted Answer · 2021-09-20 17:44:43Z

3

Building on top of @Shashank's answer -- to ensure type safety, you can also install the corresponding type defs via:

npm i -D @types/diff-match-patch
or 
yarn add -D @types/diff-match-patch

These type defs haven't changed much since 2017 which means you won't be able to use

import DiffMatchPatch from 'diff-match-patch';

because the types have no default export — they only export the rather poorly named diff_match_patch class (which looks like a function) -- which you were trying to run in the first place!

However, typescript also supports import renaming with which you can import the instantiable class we're all used to:

import { diff_match_patch as DiffMatchPatch } from 'diff-match-patch';

Once imported properly, you'll be able to enjoy intellisense and more:

answered Sep 20, 2021 at 17:44

Jozef - Spatialized.io

17k4 gold badges29 silver badges79 bronze badges

1 Comment

Mordred Over a year ago

You'll probably also need to add diff-match-patch to your angular.json config now to avoid the commonJS warning: "allowedCommonJsDependencies": [ "diff-match-patch" ]

Collectives™ on Stack Overflow

Using google-diff-match-patch in angular

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related