yobryon / ngx-barcode Goto Github PK
View Code? Open in Web Editor NEWAn angular component for Angular 4+ for creating 1-D barcodes based on Lindell's JsBarcode
Home Page: https://yobryon.github.io/ngx-barcode
An angular component for Angular 4+ for creating 1-D barcodes based on Lindell's JsBarcode
Home Page: https://yobryon.github.io/ngx-barcode
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.
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 ?
Is it possible to update the package to be compatible with Angular 12?
Thank you
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]
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?
In NgxBarcodeComponent the enumeration for format should be changed like this:
EAN => EAN13
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?
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:
Like it is said, will you consider moving to Ivy?
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,
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.
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?
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 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 ?
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:
Hi,
When I am using EAN13 in the format its generating the blank. Please suggest me.
Thanks
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?
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)
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.
Happpens in last version
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
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.
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
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.
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!
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?
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)
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>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.