feat!: update to angular 19 (#106)

- updates to angular 19
- **BREAKING CHANGE** removes the use of `NgModule` and makes the
components / directives `standalone: true`

Author: mnahkies

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

.nvmrc

@@ -1 +1 @@
-20.13.1
+22.12.0

CHANGES.md

@@ -1,3 +1,13 @@
+# 19.0.0 - 2025-01-05
+- Support Angular 19 (#106)
+
+*BREAKING CHANGES:* 
+- `QrCodeComponent` and `QrCodeDirective` are now `standalone` components
+- `QrCodeModule` has been removed
+
+See the [readme](https://github.com/mnahkies/ng-qrcode#importing) for instructions on how to import the 
+components correctly after these changes, but **tldr; replace imports of `QrCodeModule` with `QrCodeComponent`** 
+
 # 18.0.0 - 2024-05-25
 - Support Angular 18 (#98)
 - Add new inputs `style` / `styleClass` (#88)

README.md

@@ -6,7 +6,7 @@
 Easy to use QR code generator for Angular projects.
 
 **Features:**
-* Compatible with Angular 18
+* Compatible with Angular 19, uses `standalone` components
 * Leverages the widely used [qrcode](https://www.npmjs.com/package/qrcode) 
   package to do the heavy lifting
 * Renders to HTML Canvas
@@ -16,6 +16,9 @@ Easy to use QR code generator for Angular projects.
 <!-- toc -->
 
   - [Installation](#installation)
+    - [Importing](#importing)
+      - [Standalone Component](#standalone-component)
+      - [NgModule](#ngmodule)
   - [Usage](#usage)
     - [Component](#component)
       - [value: string (required)](#value-string-required)
@@ -42,19 +45,45 @@ Add as a dependency to your angular application:
 
     npm install ng-qrcode --save
 
-## Usage
-Import into your consuming module (Eg: AppModule):
+### Importing
+This library ships with [standalone components](https://angular.dev/reference/migrations/standalone)
+
+How you consume it depends on whether you have migrated to standalone components (the default since Angular v19)
+
+#### Standalone Component
+
+Add the `QrCodeComponent` or `QrCodeDirective` to your `@Component` declarations `imports` array. Eg:
+```typescript
+import { QrCodeComponent } from 'ng-qrcode';
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"],
+  standalone: true,
+  imports: [
+    QrCodeComponent,
+  ]
+})
+export class AppComponent {
+  // ...
+}
+```
+#### NgModule
 
+If you're still using `NgModule` / non-standalone components, then you can add `QrCodeComponent` or `QrCodeDirective` to your `@NgModule` declarations `imports` array. Eg:
 ```typescript
-import { QrCodeModule } from 'ng-qrcode';
+import { QrCodeComponent } from 'ng-qrcode';
 
 @NgModule({
   imports: [
-    QrCodeModule
+    QrCodeComponent
   ]
 })
 ```
 
+## Usage
+
 ### Component
 ```angular17html
 <qr-code value="Hello world!" 
@@ -135,6 +164,7 @@ major version.
 
 | Angular Version | ng-qrcode Versions |
 |-----------------|--------------------|
+| ^19             | ^19                |
 | ^18             | ^18                |
 | ^17             | ^17                |
 | ^16             | ^16                |

package.json

@@ -33,48 +33,48 @@
     "ci-lint": "ng lint"
   },
   "dependencies": {
-    "@angular/animations": "^18.0.0",
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
-    "@angular/platform-browser": "^18.0.0",
-    "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/router": "^18.0.0",
-    "qrcode": "^1.5.3",
+    "@angular/animations": "^19.0.5",
+    "@angular/common": "^19.0.5",
+    "@angular/compiler": "^19.0.5",
+    "@angular/core": "^19.0.5",
+    "@angular/forms": "^19.0.5",
+    "@angular/platform-browser": "^19.0.5",
+    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/router": "^19.0.5",
+    "qrcode": "^1.5.4",
     "rxjs": "^7.8.1",
-    "tslib": "^2.6.2",
-    "zone.js": "~0.14.2"
+    "tslib": "^2.8.1",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.1",
-    "@angular-eslint/builder": "18.0.0-alpha.1",
-    "@angular-eslint/eslint-plugin": "18.0.0-alpha.1",
-    "@angular-eslint/eslint-plugin-template": "18.0.0-alpha.1",
-    "@angular-eslint/schematics": "18.0.0-alpha.1",
-    "@angular-eslint/template-parser": "18.0.0-alpha.1",
-    "@angular/cli": "^18.0.1",
-    "@angular/compiler-cli": "^18.0.0",
-    "@angular/language-service": "^18.0.0",
-    "@types/jasmine": "~5.1.2",
-    "@types/node": "^20.9.2",
+    "@angular-devkit/build-angular": "^19.0.6",
+    "@angular-eslint/builder": "19.0.2",
+    "@angular-eslint/eslint-plugin": "19.0.2",
+    "@angular-eslint/eslint-plugin-template": "19.0.2",
+    "@angular-eslint/schematics": "19.0.2",
+    "@angular-eslint/template-parser": "19.0.2",
+    "@angular/cli": "^19.0.6",
+    "@angular/compiler-cli": "^19.0.5",
+    "@angular/language-service": "^19.0.5",
+    "@types/jasmine": "~5.1.5",
+    "@types/node": "^20.17.11",
     "@types/qrcode": "^1.5.5",
-    "@typescript-eslint/eslint-plugin": "7.10.0",
-    "@typescript-eslint/parser": "7.10.0",
-    "eslint": "^8.54.0",
-    "gh-pages": "^6.1.1",
-    "husky": "^9.0.11",
-    "jasmine-core": "~5.1.1",
+    "@typescript-eslint/eslint-plugin": "8.19.0",
+    "@typescript-eslint/parser": "8.19.0",
+    "eslint": "^9.17.0",
+    "gh-pages": "^6.3.0",
+    "husky": "^9.1.7",
+    "jasmine-core": "~5.5.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "^6.4.2",
+    "karma": "^6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "^2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "lint-staged": "^15.2.5",
+    "lint-staged": "^15.3.0",
     "markdown-toc": "^1.2.0",
-    "ng-packagr": "^18.0.0",
-    "typescript": "~5.4.5"
+    "ng-packagr": "^19.0.1",
+    "typescript": "~5.6.3"
   },
   "lint-staged": {
     "*.md": [
@@ -84,5 +84,5 @@
   "engines": {
     "node": ">=20 <23"
   },
-  "packageManager": "yarn@4.2.2"
+  "packageManager": "yarn@4.6.0"
 }

projects/ng-qrcode-demo/src/app/app.component.html

@@ -67,7 +67,7 @@ <h3>Result:</h3>
                [lightColor]="lightColor"
                [errorCorrectionLevel]="errorCorrectionLevel"
                [centerImageSrc]="centerImageSrc"
-               [centerImageSize]="centerImageSize ? this.centerImageSize : undefined"
+               [centerImageSize]="centerImageSize"
                [margin]="margin" />
     </div>
   </div>

projects/ng-qrcode-demo/src/app/app.component.spec.ts

@@ -1,12 +1,11 @@
 import { TestBed } from "@angular/core/testing"
 import { AppComponent } from "./app.component"
-import { AppModule } from "./app.module"
 
 describe("AppComponent", () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        AppModule,
+        AppComponent,
       ],
     }).compileComponents()
   })

projects/ng-qrcode-demo/src/app/app.component.ts

@@ -1,10 +1,16 @@
 import { Component } from "@angular/core"
-import { QrCodeErrorCorrectionLevel, RGBAColor } from "ng-qrcode"
+import { FormsModule } from "@angular/forms"
+import { QrCodeComponent, QrCodeErrorCorrectionLevel, RGBAColor } from "ng-qrcode"
 
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.scss"],
+  standalone: true,
+  imports: [
+    QrCodeComponent,
+    FormsModule,
+  ]
 })
 export class AppComponent {
 
@@ -25,13 +31,13 @@ export class AppComponent {
   get example() {
     return `
 <qr-code value="${ this.value }"
-         size="${ this.size }"${this.darkColor ? `
-         darkColor="${this.darkColor}"` : ""}${this.lightColor ? `
-         lightColor="${this.lightColor}"` : ""}
+         size="${ this.size }"${ this.darkColor ? `
+         darkColor="${ this.darkColor }"` : "" }${ this.lightColor ? `
+         lightColor="${ this.lightColor }"` : "" }
          errorCorrectionLevel="${ this.errorCorrectionLevel }"
          centerImageSrc="${ this.centerImageSrc }"
          centerImageSize="${ this.centerImageSize ? parseInt(this.centerImageSize, 10) : undefined }"
-         margin="${ this.margin }">
+         [margin]="${ this.margin }">
 </qr-code>`
   }
 

projects/ng-qrcode-demo/src/app/app.module.ts

@@ -1,12 +1,11 @@
 import { enableProdMode } from "@angular/core"
-import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
-
-import { AppModule } from "./app/app.module"
+import { bootstrapApplication } from "@angular/platform-browser"
+import { AppComponent } from "./app/app.component"
 import { environment } from "./environments/environment"
 
 if (environment.production) {
   enableProdMode()
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch((err) => console.error(err))
+bootstrapApplication(AppComponent)
+  .catch(e => console.error(e))

projects/ng-qrcode-demo/src/main.ts

@@ -1,7 +1,7 @@
 {
   "name": "ng-qrcode",
   "description": "Simple AOT compatible QR code generator for your Angular project.",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "license": "MIT",
   "author": {
     "name": "Michael Nahkies",
@@ -19,8 +19,8 @@
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "@angular/common": ">=18 <19",
-    "@angular/core": ">=18 <19"
+    "@angular/common": ">=19 <20",
+    "@angular/core": ">=19 <20"
   },
   "keywords": [
     "qr",

projects/ng-qrcode/package.json

@@ -1,17 +1,15 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing"
 
 import { QrCodeComponent } from "./qr-code.component"
-import { QrCodeDirective } from "./qr-code.directive"
 
 describe("QrCodeComponent", () => {
   let component: QrCodeComponent
   let fixture: ComponentFixture<QrCodeComponent>
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         QrCodeComponent,
-        QrCodeDirective,
       ],
     })
       .compileComponents()

projects/ng-qrcode/src/lib/qr-code.component.spec.ts

@@ -1,4 +1,6 @@
+import { CommonModule } from "@angular/common"
 import { Component, Input } from "@angular/core"
+import { QrCodeDirective } from "./qr-code.directive"
 import { QrCodeErrorCorrectionLevel, RGBAColor } from "./types"
 
 @Component({
@@ -23,6 +25,8 @@ import { QrCodeErrorCorrectionLevel, RGBAColor } from "./types"
     }
   `,
   styles: [],
+  standalone: true,
+  imports: [QrCodeDirective, CommonModule]
 })
 export class QrCodeComponent {
 
@@ -33,14 +37,14 @@ export class QrCodeComponent {
   size?: string | number
 
   @Input()
-  style?: { 
+  style?: {
     // matches type of ngStyle https://angular.io/api/common/NgStyle
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [klass: string]: any 
-  } | null;
+    [klass: string]: any
+  } | null
 
   @Input()
-  styleClass?: string;
+  styleClass?: string
 
   @Input()
   darkColor?: RGBAColor

projects/ng-qrcode/src/lib/qr-code.component.ts

@@ -7,6 +7,7 @@ const validColorRegex = /^#(?:[0-9a-fA-F]{3,4}){1,2}$/
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
   selector: `canvas[qrCode]`,
+  standalone: true,
 })
 export class QrCodeDirective implements OnChanges {
 

projects/ng-qrcode/src/lib/qr-code.directive.ts

@@ -4,5 +4,4 @@
 
 export * from "./lib/qr-code.component"
 export * from "./lib/qr-code.directive"
-export * from "./lib/qr-code.module"
 export * from "./lib/types"