yobryon / ngx-barcode Goto Github PK

In NgxBarcodeComponent the enumeration for format should be changed like this:
EAN => EAN13

Is it possible to update the package to be compatible with Angular 12?

Thank you

After updating my project to the latest Angular version (11.2.4) I get this error;

ERROR in /../../node_modules/ngx-barcode/ivy_ngcc/index.js 128:8-32
"export 'ɵɵstaticViewQuery' (imported as 'ɵngcc0') was not found in '@angular/core'

Can this be solved? Or is there a workaround?

I tried to add this repository to Angular v17 but it failed.

$ npm i ngx-barcode
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^17.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"^4.0.0" from [email protected]
npm ERR! node_modules/ngx-barcode
npm ERR!   ngx-barcode@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:

after update to v0.2.2, i got this error in browser
Module build failed: Error: ENOENT: no such file or directory, open 'xxx\node_modules\ngx-barcode\index.js' at Error (native)

It works fine in v0.2.1

plateform:

• ionic v3.5.0
• angular v4.1.3
• node v7.7.3
• npm v4.1.2

I get this error when I try to install this package on an app using Angular 12. I was of the impression that this tool is compatible with Angular versions 4 and up. Below is my error. Any tips on how to resolve this?

npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: @angular/[email protected] npm ERR! node_modules/@angular/core npm ERR! @angular/core@"~12.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/core@"^4.0.0" from [email protected] npm ERR! node_modules/ngx-barcode npm ERR! ngx-barcode@"^0.3.0" from the root project npm ERR!

I use this package in a angular2 cli project, works fine. But it always seem to render with the CODE128 format, I'd like to use EAN (13)

I use it like this, where currentProduct.Barcode = 2072400208056

<ngx-barcode [bc-element-type]="svg" [bc-format]="EAN" [bc-font-size]="13" [bc-height]="32" [bc-background]="transparent" [bc-value]="currentProduct.Barcode" [bc-display-value]="true"> </ngx-barcode>

Any thoughts?

angular/cli: 1.1.0
node: 7.9.0
os: linux x64

angular/[email protected]
angular/[email protected]
angular/[email protected]
angular/[email protected]
angular/[email protected]
angular/[email protected]
angular/[email protected]
angular/[email protected]
angular/[email protected]
angular/[email protected]
angular/[email protected]
angular/[email protected]
angular/[email protected]
angular/[email protected]
types/[email protected]
types/[email protected]
types/[email protected]
types/[email protected]
types/[email protected]
types/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

Like it is said, will you consider moving to Ivy?

Can't generate barcode for alpha numeric values. Tried CODE128, CODE128B, CODE39.
If its just numbers its working fine.

This is not working. But if i rremove A from the bc-value it is generating bar code. Am I missing something?
<ngx-barcode [bc-element-type]="svg"
[bc-value]="A121234"
[bc-format]="CODE128B" [bc-width]="2"
[bc-height]="100"
[bc-display-value]="true"
[bc-font-options]=""
[bc-font]="monospace"
[bc-text-align]="center"
[bc-text-position]="bottom"
[bc-text-margin]="2"
[bc-font-size]="20" [bc-margin]="10"
[bc-margin-top]="10" [bc-margin-bottom]="10" [bc-margin-left]="10" [bc-margin-right]="10">

ng update @angular/core

leads to

                  Package "ngx-barcode" has an incompatible peer dependency to "rxjs" (requires "^5.1.0", would install "6.2.1").
                  Package "ngx-barcode" has an incompatible peer dependency to "@angular/core" (requires ">=5.0.0-rc.0 <6.0.0||>=4.0.0 <5.0.0", would install "6.0.5").
Incompatible peer dependencies found. See above.

Please fix the deprecated npm dependency. I am using ngx-barcode with @angular/core: ^5.2.3 and it works fine, but the unnecessary warning is really annoying. Thank you.

Hello,
I'm trying to set it up on my project. It shows up very well on a Chrome browser or another ; but on Safari, it's just showing a large black area instead of my barcode.
Any idea ?

I tried installing this in Angular 2. It doesn't seem to work. Any tips for what I need to do to modify this to work with Angular 2?

As active users have no doubt noticed, I have not had the time to devote to this project as I did back at the beginning. Seeing that there is an active community, I would like to protect the community and keep the project alive (or give it new life).

To that end -- if anyone is interested in taking part in this project, please ping me. I am considering moving the repo to an organization, and bringing in folks to take on administering/furthering the project.

Any interest?

Hi,
When I am using EAN13 in the format its generating the blank. Please suggest me.
Thanks

Hi,
I'm trying to use the Codabar format, this is my code:
<ngx-barcode [bc-value]="'something'" [bc-display-value]="true" [bc-format]="'codabar'"></ngx-barcode>

I got this error:

ERROR TypeError: api.options(...)[options.format] is not a function

(same for most other formats)

Am I doing it wrong?

Currently we're on ng4 for ngx-barcode, which is very out of date. The only way to prevent NPM dependency collisions is to completely suppress all of them or find a workaround like https://www.npmjs.com/package/npm-force-resolutions.

We need to add versions corresponding to each major Angular release.

If barcode is wrong svg graphic will not be displayed. Is it possible to validate barcode correctness from code different than checking like this ?

(this.barElement as NgxBarcodeComponent).bcElement.nativeElement.innerText.length === 0)

Hello yobryon,
I used your ngx barcode package to generate barcodes,it works fine in chrome and browser i.e inside the div tag with class barcode svg are being populated.
Whereas in Edge the svg are not being populated.

Could you please look into this and provide a solution asap.

error NG6002: 'NgxBarcodeModule' does not appear to be an NgModule class.

44 NgxBarcodeModule,
~~~~~~~~~~~~~~~~

node_modules/ngx-barcode/ngx-barcode.module.d.ts:2:22
2 export declare class NgxBarcodeModule {
~~~~~~~~~~~~~~~~
This likely means that the library (ngx-barcode) which declares NgxBarcodeModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Hi Team,

I am able to install ngx-barcode in angular 8 version but not in angular 9.1.1. Tried "enableIvy": false and also "aot": false, still no luck. any alternate solution for this please suggest?

Getting below error before disabling the ivy.

ERROR in node_modules/ngx-barcode/ngx-barcode.module.d.ts:2:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (ngx-barcode) which declares NgxBarcodeModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

After disabling Ivy still error like below:

ERROR TypeError: Cannot read property 'nativeElement' of undefined

at NgxBarcodeComponent.push../node_modules/ngx-barcode/index.js.NgxBarcodeComponent.createBarcode (index.js:88)

at NgxBarcodeComponent.push../node_modules/ngx-barcode/index.js.NgxBarcodeComponent.ngOnChanges (index.js:65)

at checkAndUpdateDirectiveInline (core.js:22677)

at checkAndUpdateNodeInline (core.js:31501)

at checkAndUpdateNode (core.js:31463)

at debugCheckAndUpdateNode (core.js:32100)

at debugCheckDirectivesFn (core.js:32060)

at Object.eval [as updateDirectives] (BarCodeComponent.html:109)

at Object.debugUpdateDirectives [as updateDirectives] (core.js:32052)

at checkAndUpdateView (core.js:31445)

I'm looking for an angular js plugin that'll scan MSI barcodes in Android devices. The ionic native phonegap-plugin-barcodescanner does not support MSI barcodes in Android. Any help is greatly appreciated.

Cheers

Balaji

Happpens in last version

Hi community,

I am currently using ngx-barcode with CODE128 format. I am facing problem where some of the barcodes produced randomly cannot be read by scanner from analyzer. I would like to ask what might be the possible cause and solutions to this problem. Thank you for any suggestions.

In my project with Angular 11 I get the following message into the CLI

Warning: /my-ng-app/src/app/components/my-component/my-component/my-component.module.ts depends on 'ngx-barcode'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

This can be fixed?

Hello,
I am doing a page to print batch of barcodes and each one will be same size but different text and length of text. anyway to do this ?

Edit - I have found the problem to be that ngx-barcode doesn't implement the flat: true option property

Please implement this because at the moment I have to include JsBarcode from an external JS file only so I can use flat: true

Ideally I want to see a flat barcode, like JsBarcode generates for UPC-A

JsBarcode:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>
<svg
        id="barcode1"
        class="barcode1"
        jsbarcode-height="100px"
        jsbarcode-flat="true"
        data-flat="true"
        jsbarcode-format="UPC"
></svg>
<script type="text/javascript">JsBarcode(".barcode1", "123456789012").init();</script>

You will see that this generates a UPC barcode without any hanging bars - https://ibb.co/C7LZ35w

This is what is generated using ngx-barcode - https://ibb.co/C7LZ35w using this code:

<ngx-barcode
            [bc-value]="'123456789012'"
            [bc-width]="this.barcodeWidth"
            [bc-height]="this.barcodeHeight"
            [bc-display-value]="false"
            [bc-format]="'UPC'"
    >
</ngx-barcode>

There is an Option ean128 for Code128 to "Enable encoding CODE128 as GS1-128/EAN-128." AFAICS there is no method to use that option provided by the underlying BarcodeJS Lib.

Hi,
I was wondering how I would go about giving the svg or image an ID so I can reference it within another SVG, or (if possible) how I would go about putting the barcode directly into another SVG.

For example, in the code (below) I would like to replace the Blue Rectangle in this SVG with the generated barcode, weather that is in Image format or a nested SVG doesn't matter to me.

<svg viewBox="0 0 675 315">
  <line x1="0" y1="0" x2="595" y2="0" style="stroke:rgb(0,0,0);stroke-width:2"></line>
  <line x1="595" y1="0" x2="675" y2="84" style="stroke:rgb(0,0,0);stroke-width:2"></line>
  <line x1="675" y1="84" x2="675" y2="300" style="stroke:rgb(0,0,0);stroke-width:2"></line>
  <line x1="675" y1="300" x2="0" y2="300" style="stroke:rgb(0,0,0);stroke-width:2"></line>
  <line x1="0" y1="0" x2="0" y2="300" style="stroke:rgb(0,0,0);stroke-width:2"></line>
  <!--Labels-->
  <text x="180" y="40">Consumables Kanban</text>
  <text x="60" y="84">Part #</text>
  <text x="60" y="126">Supplier Item #</text>
  <text x="60" y="168">Description</text>
  <text x="60" y="210">Supplier</text>
  <text x="60" y="273">Shelf Location</text>
  <text x="435" y="273">Bin Quantity</text>
  <!--Details-->
  <rect x="5" y="5" width="50" height="290" fill="blue"></rect>
  <text x="241" y="84">{{itemData.Item_ID}}</text>
  <text x="241" y="126">{{itemData.Supplier_Item_Code}}</text>
  <text x="241" y="168">{{itemData.Description}}</text>
  <text x="241" y="210">{{itemData.Supplier_Name}}</text>
  <text x="200" y="273">{{itemData.Location_String}}</text>
  <text x="595" y="273">{{itemData.Bin_Count}}</text>
</svg>

Should Look like this:

Thanks

Hi,
thanks for the great work creating this repo.
i am trying to create barcode and print it using bluetooth printer,

unfortunately when i try to use element-type img the result still svg

i try to change it by force on node_modules
element = this.renderer.createElement('img', 'img');

but the result is error
Uncaught (in promise): InvalidElementException: Not supported type to render on
InvalidElementException: Not supported type to render on
at new InvalidElementException (http://localhost:8100/build/vendor.js:82157:135)
at getRenderProperties (http://localhost:8100/build/vendor.js:140911:14)
at JsBarcode (http://localhost:8100/build/vendor.js:139004:60)
at NgxBarcodeComponent.createBarcode (http://localhost:8100/build/vendor.js:138857:9)
at NgxBarcodeComponent.ngOnChanges (http://localhost:8100/build/vendor.js:138835:14)
at checkAndUpdateDirectiveInline (http://localhost:8100/build/vendor.js:12706:19)
at checkAndUpdateNodeInline (http://localhost:8100/build/vendor.js:14212:20)
at checkAndUpdateNode (http://localhost:8100/build/vendor.js:14155:16)
at debugCheckAndUpdateNode (http://localhost:8100/build/vendor.js:15027:76)
at debugCheckDirectivesFn (http://localhost:8100/build/vendor.js:14968:13)

can you help me,
please give me suggestion how to fix this,

so i can generate img using this library,