# Getting error while creating custom annotaion

**URL:** <https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229>\
**Category:** Technical Support\
**Created:** [August 24, 2020, 10:27am UTC](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229 "2020-08-24T10:27:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![maharoh9841](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/maharoh9841/32/88_2.png) [@maharoh9841](https://pdfjs.community/u/maharoh9841)\
**Post date:** [August 24, 2020, 10:27am UTC](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229/1 "2020-08-24T10:27:32Z")

</div>

**Detailed description of issue**  
I followed this documentation for custom annotation  
[https://pdfjs.express/documentation/annotation/custom-annotations](https://pdfjs.express/documentation/annotation/custom-annotations)  
But I get the following error:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/a584eabed2cbfc56bacafe621753856aa24c8dca.png)

**Code snippet**  
this code is in my myConfig.js file  
WebViewer({

```
path: '../public'

```

})

.then((instance) =\> {

```
const {

  Annotations,

  Tools,

  annotManager,

  docViewer

} = instance;

const TriangleAnnotation = () => {

  Annotations.MarkupAnnotation.call(this);

  this.Subject = 'Triangle';

}

TriangleAnnotation.prototype = new Annotations.MarkupAnnotation();

TriangleAnnotation.prototype.elementName = 'triangle';

TriangleAnnotation.prototype.draw = (ctx, pageMatrix) => {

  this.setStyles(ctx, pageMatrix);

  ctx.translate(this.X, this.Y);

  ctx.beginPath();

  ctx.moveTo(this.Width / 2, 0);

  ctx.lineTo(this.Width, this.Height);

  ctx.lineTo(0, this.Height);

  ctx.closePath();

  ctx.fill();

  ctx.stroke();

}

const TriangleCreateTool = docViewer => {

    Tools.GenericAnnotationCreatetool.call(this, docViewer, RedactionAnnotation);

  }

  TriangleCreateTool.prototype = new Tools.GenericAnnotationCreatetool();

const triangleToolName = 'AnnotationCreateTriangle';

annotManager.registerAnnotationType(TriangleAnnotation.prototype.elementName, TriangleAnnotation);

const triangleTool = new RedactCreateTool(docViewer);

instance.registerTool({

  toolName: triangleToolName,

  toolObject: triangleTool,

  buttonImage: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">' +

    '<path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"/>' +

    '<path fill="none" d="M0 0h24v24H0V0z"/>' +

    '</svg>',

  buttonName: 'triangleToolButton',

  tooltip: 'Triangle'

}, TriangleAnnotation);

instance.setHeaderItems(header => {

  const triangleButton = {

    type: 'toolButton',

    toolName: triangleButton

  };

  header.get('freeHandToolGroupButton').insertBefore(triangleButton);

});

docViewer.on('documentLoaded', () => {

  // set the tool mode to our tool so that we can start using it right away

  instance.setToolMode(triangleToolName);

});

```

})

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [August 24, 2020, 3:02pm UTC](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229/2 "2020-08-24T15:02:29Z")

</div>

Hi,

This means that WebViewer is not getting loaded, or you are calling this code before the script has finished loading.

Can you please verify that `webviewer.min.js` is getting loaded correctly, and you are calling your code _after_ it is done loading.

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![maharoh9841](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/maharoh9841/32/88_2.png) [@maharoh9841](https://pdfjs.community/u/maharoh9841)\
**Post date:** [August 25, 2020, 4:10am UTC](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229/3 "2020-08-25T04:10:51Z")

</div>

[myConfig.zip](https://pdfjs.community/uploads/short-url/1iW1BD1y65yaDzJOZe0wJhLu7Mz.zip) (992 Bytes)

Here is my config file. Am I doing this right? And I am using Angular to call this config file like this

WebViewer(  
{  
path: “…/public”,  
config: “…/assets/myConfig.js”,  
},  
this.viewer.nativeElement  
);

Is there any sample on how to create a config file for Angular?

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [August 25, 2020, 7:33pm UTC](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229/4 "2020-08-25T19:33:14Z")

</div>

Hi!

You don’t need to re-call the WebViewer constructor inside the config file. You can just directly start calling APIs.

Can I ask why you opted to use the config file? Odds are it’s probably not necessary for your use case.

Logan

---

<div class="post-metadata">

**Author:** ![maharoh9841](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/maharoh9841/32/88_2.png) [@maharoh9841](https://pdfjs.community/u/maharoh9841)\
**Post date:** [August 26, 2020, 3:29am UTC](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229/5 "2020-08-26T03:29:15Z")

</div>

I just followed the documentation.

It said " Code snippets in this guide should run in a config file. See [config files guide](https://pdfjs.express/documentation/learn-more/advanced/config-files) for details."

Is there a sample of custom-annotations for Angular?

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [August 31, 2020, 4:29pm UTC](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229/6 "2020-08-31T16:29:07Z")

</div>

Hi,

Angular (or any framework) has nothing to do with custom annotations or Express in general, so we do not have specific guides for this. PDF.js Express is framework agnostic.

That documentation about the `code snippets should be run in a config file` is mistake on our part and we will fix that. You do not need to use a config file for custom annotations.

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [August 31, 2020, 4:29pm UTC](https://pdfjs.community/t/getting-error-while-creating-custom-annotaion/229/7 "2020-08-31T16:29:14Z")

</div>

Closed on August 31, 2020, 4:29pm UTC