Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: angular 19 support #266 #268

Merged
merged 1 commit into from
Nov 21, 2024
Merged

feat: angular 19 support #266 #268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 50 additions & 28 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@

`angularx-qrcode` - a fast and easy-to-use Ivy compatible Ionic and Angular QR Code Generator library

- Compatible with **Angular 18** and **Ionic**
- Ivy compiler support, AOT, SSR (Server Side Rendering)
- Compatible with **Angular 19** and **Ionic**
- Under active development
- Standalone component support
- Ivy compiler support, AOT, SSR (Server Side Rendering)
- Accessibility (a11y) attributes supported (alt, aria-label, title)
- Support for images
- Trusted and used by thousands of developers like you
- Easy to use, [sample web app](#demo-app) included

`angularx-qrcode` is compatible with Ionic 3/4/5/6/7/8 and Angular 4/5/6/7/8/9/10/11/12/13/14/15/16/17/18+ with support for the Ivy compiler. It is a drop-in replacement for the no-longer-maintained angular component ng2-qrcode and based on node-qrcode.
`angularx-qrcode` is compatible with Ionic 3/4/5/6/7/8 and Angular 4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19+ with support for the Ivy compiler. It is a drop-in replacement for the no-longer-maintained angular component ng2-qrcode and based on node-qrcode.

- [Installation](#installation)
- [Demo App](#demo-app)
Expand All @@ -22,34 +23,35 @@

## Installation

**Angular 18 and Ionic with angularx-qrcode 18**
**Angular 19 and Ionic with angularx-qrcode 19**

```
npm install angularx-qrcode --save
# Or with yarn
yarn add angularx-qrcode
```

**Angular 17 and Ionic with angularx-qrcode 17**
**Angular 18 and Ionic with angularx-qrcode 18**

```
npm install angularx-qrcode@17.0.1 --save
npm install angularx-qrcode@18.0.2 --save
# Or with yarn
yarn add angularx-qrcode@17.0.1
yarn add angularx-qrcode@18.0.2
```

**Angular 16 and Ionic with angularx-qrcode 16**
**Angular 17 and Ionic with angularx-qrcode 17**

```
npm install angularx-qrcode@16.0.2 --save
npm install angularx-qrcode@17.0.1 --save
# Or with yarn
yarn add angularx-qrcode@16.0.2
yarn add angularx-qrcode@17.0.1
```

**All supported angular versions**

| Angular Version | angularx-qrcode Version |
| --------------- | ----------------------- |
| ^19 | ^19.0.0 |
| ^18 | ^18.0.2 |
| ^17 | ^17.0.1 |
| ^16 | ^16.0.2 |
Expand Down Expand Up @@ -80,26 +82,46 @@ and open the url `http://localhost:4200/` in your browser

# Usage and Example Implementations

The source for **[a live angularx-qrcode demo app](https://cordobo.github.io/angularx-qrcode/)** and more examples how to implement angularx-qrcode is in the folder [`projects/demo-app`](projects/demo-app/src/app) in this repository.
The source for **[a live angularx-qrcode demo app](https://cordobo.github.io/angularx-qrcode/)** and more examples how to implement angularx-qrcode is located in the directory [`projects/demo-app`](projects/demo-app/src/app) of this repository.

### Import the module and add it to your imports section in your main AppModule:
### Upgrade angularx-qrcode from angularx-qrcode 18 and earlier

```
// File: app.module.ts
// all your other imports...
Since Angular 19, the latest version of the angularx-qrcode module is now exported as a standalone component. If you’re upgrading from a version before Angular 19, please replace the import statement with the component’s name since it’s now a standalone component.


````
# OLD - angular 18 and older
# File: app.module.ts
import { QRCodeModule } from 'angularx-qrcode';

@NgModule({
declarations: [
AppComponent
],
imports: [
QRCodeModule
],
providers: [],
bootstrap: [AppComponent]
# NEW - angular 19 and newer
// File: app.component.ts
import { QRCodeComponent } from 'angularx-qrcode';
````
For more uses with angular 18 and earlier see: [angularx/qrcode as ngModule](https://github.com/Cordobo/angularx-qrcode/tree/18.0.0)


### Import the component and add it to your imports section in your main AppComponent:


```
// For angular 19, see above for angular 18 and older
// File: app.component.ts
// other imports...
import { QRCodeComponent } from 'angularx-qrcode';

@Component({
selector: "app-root",
imports: [
// other component imports...
QRCodeComponent,
],
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppModule { }
export class AppComponent {
// your code
}
```

```
Expand All @@ -109,10 +131,10 @@ export class AppModule { }
<qrcode [qrdata]="'Your data string'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
```

### Generate a QR Code from a string (directive only)
### Generate a QR Code from a string

Now that angular/Ionic know about the new QR Code module,
let's invoke it from our template with a directive.
Now that angular/Ionic know about the new QR Code component,
let's invoke it from our template.
If we use a simple text-string, we need no additional
code in our controller.

Expand Down
15 changes: 8 additions & 7 deletions angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,15 @@
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"builder": "@angular-devkit/build-angular:application",
"options": {
"allowedCommonJsDependencies": ["qrcode"],
"outputPath": "dist/demo-app",
"outputPath": {
"base": "dist/demo-app",
"browser": ""
},
"index": "projects/demo-app/src/index.html",
"main": "projects/demo-app/src/main.ts",
"polyfills": "projects/demo-app/src/polyfills.ts",
"polyfills": ["projects/demo-app/src/polyfills.ts"],
"tsConfig": "projects/demo-app/tsconfig.app.json",
"assets": [
"projects/demo-app/src/favicon.ico",
Expand All @@ -71,7 +73,8 @@
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"projects/demo-app/src/styles.css"
],
"scripts": []
"scripts": [],
"browser": "projects/demo-app/src/main.ts"
},
"configurations": {
"production": {
Expand All @@ -96,9 +99,7 @@
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
Expand Down
Loading