#Angular library using javascript package

46 messages · Page 1 of 1 (latest)

bold sleet
#

Hi I was trying to create angular library that at behind was using one of javascript package (bwip-js) https://www.npmjs.com/package/bwip-js.
The problem is idk how to use bwip-js in library as normally in angular app I will just add js file into angular.json => scripts section:
"scripts": [ "./node_modules/bwip-js/dist/bwip-js-min.js"]
And then in component import it:
import bwipjs from 'bwip-js';

and use:
renderBarcode(value: string): void { const canvas = this.barcode?.nativeElement; if (canvas) { bwipjs.toCanvas(canvas, { bcid: this.type, text: value, scale: this.scale, rotate: this.rotate, includetext: this.includetext, textxalign: 'center' }); }
}

deft tapir
#

You shouldnt need both the scripts entry and the import.

Additionally, before thinking about a library, you want to think about how to make this an angular component first.

# 
import bwipjs from 'bwip-js';

@Component({
  standalone: true,
  selector: 'my-barcode',
  template: '<canvas #barcodeCanvas></canvas>',
})
export class Barcode implements OnInit, AfterViewInit {
  @ViewChild('barcodeCanvas')
  canvas!: ElementRef<HTMLCanvasElement>;
  @Input()
  value!: string;

  ngAfterViewInit() {
    bwipjs.toCanvas(this.canvas.nativeElement, {
      bcid: 'code128',
      text: this.value,
      textxalign: 'center',
    });
  }
}
#

And use it like so:

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, Barcode],
  template: `
    <my-barcode [value]="name"></my-barcode>
  `,
})
export class App {
  name = 'Angular';
}
#

Then you can start thinking into moving it into a library

bold sleet
#

Hi @deft tapir thx for your help. I know how to use bwip-js in normal angular application but when it comes to library I have an error as attached in screen. Because normaly I was adding script into angular.json otherwise it is not working even your example will not work without installed bwip-js package and specify script in angular.json. You can try by your own to create anglar lib with 1 component expose that is using bwip-js.

image.png
deft tapir
#

That's a typescript issue.

#

Did u install the types ?

bold sleet
#

Yes everything is installed

#

Tommorow or maybe today I can upload example proj on git and share the link with you if you are ok with that.

deft tapir
#

Sure.

#

It does look like an issue with that library

bold sleet
#

you know I was using this package sucessfuly in normal angular app but when I wanted to create lib (wrapper for bwip-js) then problems occurs 😦

deft tapir
#

Yeah it looks like there are some issues with the es import syntax and the types together.

deft tapir
#

Well that got removed fast 🤣

#

I was just about to say it doesnt work

bold sleet
#

yes sorry for that ^^

#

U know it looks that I have some internet connection problems I will try to upload proj tomorrow and let u know

bold sleet
deft tapir
deft tapir
#

First things first, I did:

  • Install @types/swip-js, as the error indicates.
  • add swip-js to the types array in your libs tsconfig

Then I get another error, which tells me to put allowSyntheticDefaultImports to true in the tsconfig for the lib.

Once doing both, the library compiles.

deft tapir
#

You will also need "preserveSymlinks": true in the demo app's angular.json file for the architect/build/options part. This is related to how you are currently using your library, and wont be needed when installing it through npm.

#

Next, you need to specify your library has a dependency on bwip-js by updating the libs package.json located in jk-barcode/projects/jk-barcode (so not the root one)

# 
{
  "name": "jk-barcode",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^15.2.0",
    "@angular/core": "^15.2.0"
  },
  "dependencies": {
    "tslib": "^2.3.0",
    "bwip-js": "^3.4.3"
  },
  "sideEffects": false
}
#

Next, ensure your library allows nonPeerDependencies by updating ng-package.json:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/jk-barcode",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "allowedNonPeerDependencies": ["bwip-js"]
}

Note: this isnt recommended. Instead you should not add bwip-js as a dependency, but as a peerDependency. But I believe what you are trying is to avoid having to install bwip-js. Anyway, for you to pick. If u make it a peerDependency, u dont need to modify the ng-package.json but u need to install bwip-js in the demo project.

urban ruin
#

I hope i can help here and maybe Frederik can improve my answer. This will work:

import * as bwipjs from 'bwip-js';

  renderBarcode(value: string): void {
    const canvas = this.barcode?.nativeElement;
    if (canvas) {
      (bwipjs as any).datamatrix({ text: 'test value' }, canvas);
    }
  }
deft tapir
#

This is about a library setup not working with external files.

urban ruin
#

by external files you mean the library vs the demo project?

deft tapir
#

He has bwip working and wants to move it to a library but has been unable to. So I explained above what needs to happen to be able to do that

#

Why would u want import * as bwipjs tho?

#

Anyway, using the steps abve, the demo app works:

#

I will open a PR for u.

urban ruin
#

i was testing out the project really quickly and import bwipjs from 'bwip-js'; wasn't working.
So I hacked a working version together even i know it's not recomanded

deft tapir
#

U dont need that to make it work tho 😄

#

But u can.

deft tapir
urban ruin
#

yes but i was missing the allowSyntheticDefaultImports flag 😅

deft tapir
deft tapir
#

Anyway, u should be able to use both. But I prefer to stick to the libs docs.

urban ruin
bold sleet
#

@deft tapir and @urban ruin thanks for your effort I will check and test it! I was installing swip-js but didn't change tsconfig for allowSyntheticDefaultImports 😕.

deft tapir