Update to Angular 19 (#128)

nerPatricia · patricia.costa · web-flow · commit 5ae5e80215f6 · 2025-09-17T09:39:31.000+03:00
* chore(packages): update angular builders/jest package to version 19

* chore(packages): update angular packages with schematics to v19

* chore(packages): update angular eslint to v19

* chore(packages): update typescript to v5.7.3

* chore(packages): update peer dependencies to angular v19

* chore(version): update lib version 3.5.0

* chore: update readme

* test: fix tests with standalone component now

* chore(packages): update outdated packages

* chore(lock): update lock with new packages versions

* chore(lint): add lint ignore and rmv deprecated ignorePatterns

* chore: update lib version

* chore: revert version number

---------

Co-authored-by: patricia.costa &lt;patricia.costa@telefonicabigdata.onmicrosoft.com&gt;
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,8 +1,5 @@
 {
   "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
   "overrides": [
     {
       "files": [
diff --git a/README.md b/README.md
@@ -24,14 +24,16 @@ Or run locally:
 # Usage
 
 ## Installation
+
 ```shell
 npm install angular-cc-library --save
 ```
 
 ## Version Compatibility
 
 | Angular | Library |
-|---------|---------|
+| ------- | ------- |
+| 19.x    | 3.5.x   |
 | 18.x    | 3.4.x   |
 | 17.x    | 3.3.x   |
 | 16.x    | 3.2.x   |
@@ -40,92 +42,103 @@ npm install angular-cc-library --save
 | 13.x    | 3.0.0   |
 | 12.x    | 2.1.3   |
 
-
 ## Formatting Directive
+
 On the input fields, add the specific directive to format inputs.
 All fields must be `type='tel'` in order to support spacing and additional characters.
 
-Since `angular-cc-library@3.3.0` all directives declared as standalone, 
+Since `angular-cc-library@3.3.0` all directives declared as standalone,
 so you can import them directly into your component:
 
 ```typescript
-import { Component } from '@angular/core';
-import { CreditCardFormatDirective } from 'angular-cc-library';
+import { Component } from "@angular/core";
+import { CreditCardFormatDirective } from "angular-cc-library";
 
 @Component({
-  selector: 'credit-card-number-input',
+  selector: "credit-card-number-input",
   standalone: true,
   deps: [CreditCardFormatDirective],
-  template: `<input id="cc-number" type="tel" autocomplete="cc-number" ccNumber>`
+  template: `<input
+    id="cc-number"
+    type="tel"
+    autocomplete="cc-number"
+    ccNumber
+  />`,
 })
 export class CreditCardNumberInputComponent {}
 ```
 
 But you can still import them all at once using `CreditCardDirectivesModule`:
 
 ```typescript
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-import { CreditCardDirectivesModule } from 'angular-cc-library';
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { FormsModule } from "@angular/forms";
+import { CreditCardDirectivesModule } from "angular-cc-library";
 
-import { AppComponent } from './app.component';
+import { AppComponent } from "./app.component";
 
 @NgModule({
-    imports: [BrowserModule, FormsModule, CreditCardDirectivesModule],
-    declarations: [AppComponent],
-    bootstrap: [AppComponent]
+  imports: [BrowserModule, FormsModule, CreditCardDirectivesModule],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
 })
-export class AppModule {
-}
+export class AppModule {}
 ```
 
 **Credit Card Formatter**
-* add `ccNumber` directive:
+
+- add `ccNumber` directive:
+
 ```html
-<input id="cc-number" type="tel" autocomplete="cc-number" ccNumber>
+<input id="cc-number" type="tel" autocomplete="cc-number" ccNumber />
 ```
-* this will also apply a class name based off the card `.visa`, `.amex`, etc. See the array of card types in `credit-card.ts` for all available types
 
-* You can get parsed card type by using export api: 
+- this will also apply a class name based off the card `.visa`, `.amex`, etc. See the array of card types in `credit-card.ts` for all available types
+
+- You can get parsed card type by using export api:
 
 ```html
-<input type="tel" ccNumber #ccNumber="ccNumber">
+<input type="tel" ccNumber #ccNumber="ccNumber" />
 <span class="scheme">{{ccNumber.resolvedScheme$ | async}}</span>
 ```
 
 `resolvedScheme$` will be populated with `visa`, `amex`, etc.
 
-
 **Expiration Date Formatter**
 Will support format of MM/YY or MM/YYYY
-* add `ccExp` directive:
+
+- add `ccExp` directive:
+
 ```html
-<input id="cc-exp-date" type="tel" autocomplete="cc-exp" ccExp>
+<input id="cc-exp-date" type="tel" autocomplete="cc-exp" ccExp />
 ```
 
 **CVC Formater**
-* add `ccCVC` directive:
+
+- add `ccCVC` directive:
+
 ```html
-<input id="cc-cvc" type="tel" autocomplete="off" ccCVC>
+<input id="cc-cvc" type="tel" autocomplete="off" ccCVC />
 ```
 
 ### Validation
+
 Current only Model Validation is supported.
 To implement, import the validator library and apply the specific validator on each form control
 
 ```typescript
-import { CreditCardValidators } from 'angular-cc-library';
+import { CreditCardValidators } from "angular-cc-library";
 
 @Component({
-  selector: 'app',
+  selector: "app",
   template: `
     <form #demoForm="ngForm" (ngSubmit)="onSubmit(demoForm)" novalidate>
         <input id="cc-number" formControlName="creditCard" type="tel" autocomplete="cc-number" ccNumber>
         <input id="cc-exp-date" formControlName="expirationDate" type="tel" autocomplete="cc-exp" ccExp>
         <input id="cc-cvc" formControlName="cvc" type="tel" autocomplete="off" ccCVC>
     </form>
-  `
+  `,
 })
 export class AppComponent implements OnInit {
   form: FormGroup;
@@ -135,9 +148,12 @@ export class AppComponent implements OnInit {
 
   ngOnInit() {
     this.form = this._fb.group({
-      creditCard: ['', [CreditCardValidators.validateCCNumber]],
-      expirationDate: ['', [CreditCardValidators.validateExpDate]],
-      cvc: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(4)]] 
+      creditCard: ["", [CreditCardValidators.validateCCNumber]],
+      expirationDate: ["", [CreditCardValidators.validateExpDate]],
+      cvc: [
+        "",
+        [Validators.required, Validators.minLength(3), Validators.maxLength(4)],
+      ],
     });
   }
 
diff --git a/package.json b/package.json
@@ -13,41 +13,41 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@angular/common": "^18.2.2",
-    "@angular/compiler": "^18.2.2",
-    "@angular/core": "^18.2.2",
-    "@angular/forms": "^18.2.2",
-    "@angular/platform-browser": "^18.2.2",
-    "@angular/platform-browser-dynamic": "^18.2.2",
+    "@angular/common": "^19.1.5",
+    "@angular/compiler": "^19.1.5",
+    "@angular/core": "^19.1.5",
+    "@angular/forms": "^19.1.5",
+    "@angular/platform-browser": "^19.1.5",
+    "@angular/platform-browser-dynamic": "^19.1.5",
     "rxjs": "~7.8.1",
-    "tslib": "^2.7.0",
-    "zone.js": "~0.14.10"
+    "tslib": "^2.8.1",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-builders/jest": "18.0.0",
-    "@angular-devkit/build-angular": "^18.2.2",
-    "@angular-eslint/builder": "18.3.0",
-    "@angular-eslint/eslint-plugin": "18.3.0",
-    "@angular-eslint/eslint-plugin-template": "18.3.0",
-    "@angular-eslint/schematics": "18.3.0",
-    "@angular-eslint/template-parser": "18.3.0",
-    "@angular/cli": "^18.2.2",
-    "@angular/compiler-cli": "^18.2.2",
-    "@angular/language-service": "^18.2.2",
+    "@angular-builders/jest": "19.0.0",
+    "@angular-devkit/build-angular": "^19.1.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.1.6",
+    "@angular/compiler-cli": "^19.1.5",
+    "@angular/language-service": "^19.1.5",
     "@release-it/bumper": "^6.0.1",
-    "@release-it/conventional-changelog": "^8.0.1",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^22.5.3",
-    "@typescript-eslint/eslint-plugin": "8.4.0",
-    "@typescript-eslint/parser": "8.4.0",
-    "eslint": "^8.56.0",
-    "husky": "^9.1.5",
+    "@release-it/conventional-changelog": "^8.0.2",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.1",
+    "@typescript-eslint/eslint-plugin": "8.23.0",
+    "@typescript-eslint/parser": "8.23.0",
+    "eslint": "^8.57.1",
+    "husky": "^9.1.7",
     "jest": "29.7.0",
-    "lint-staged": "^15.2.10",
-    "ng-packagr": "^18.2.1",
-    "release-it": "^17.6.0",
+    "lint-staged": "^15.4.3",
+    "ng-packagr": "^19.1.2",
+    "release-it": "^17.11.0",
     "ts-node": "~10.9.2",
-    "typescript": "~5.5.4"
+    "typescript": "~5.7.3"
   },
   "lint-staged": {
     "*.{ts,component.html}": [
diff --git a/projects/angular-cc-library/package.json b/projects/angular-cc-library/package.json
@@ -20,10 +20,10 @@
     "url": "git+https://github.com/timofei-iatsenko/angular-cc-library.git"
   },
   "dependencies": {
-    "tslib": "^2.4.1"
+    "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "@angular/common": "^18.0.0",
-    "@angular/core": "^18.0.0"
+    "@angular/common": "^19.1.4",
+    "@angular/core": "^19.1.4"
   }
 }
diff --git a/projects/angular-cc-library/src/lib/directives/credit-card-format.directive.spec.ts b/projects/angular-cc-library/src/lib/directives/credit-card-format.directive.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testin
 import { CreditCardFormatDirective } from './credit-card-format.directive';
 import { Component, DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
 
 const KEY_MAP = {
   ONE: 49, // input `1`
@@ -22,15 +23,15 @@ describe('Directive: CreditCardFormat', () => {
   describe('general cases', () => {
     @Component({
       template: `<input type="tel" ccNumber>`,
+      imports: [CreditCardFormatDirective],
     })
     class TestCreditCardFormatComponent {}
 
     let fixture: ComponentFixture<TestCreditCardFormatComponent>;
     let inputEl: DebugElement;
     beforeEach(() => {
       TestBed.configureTestingModule({
-        declarations: [TestCreditCardFormatComponent],
-        imports: [CreditCardFormatDirective]
+        imports: [TestCreditCardFormatComponent]
       });
       fixture = TestBed.createComponent(TestCreditCardFormatComponent);
       inputEl = fixture.debugElement.query(By.css('input'));
@@ -144,7 +145,8 @@ describe('Directive: CreditCardFormat', () => {
   describe('exportAs cases', () => {
     @Component({
       template: `<input type="tel" ccNumber #ccNumber="ccNumber">
-      <span class="scheme">{{ccNumber.resolvedScheme$ | async}}</span>`,
+      <span class="scheme">{{ ccNumber.resolvedScheme$ | async }}</span>`,
+      imports: [CreditCardFormatDirective, CommonModule],
     })
     class TestCreditCardFormatComponent {}
 
@@ -153,8 +155,7 @@ describe('Directive: CreditCardFormat', () => {
 
     beforeEach(() => {
       TestBed.configureTestingModule({
-        declarations: [TestCreditCardFormatComponent],
-        imports: [CreditCardFormatDirective],
+        imports: [TestCreditCardFormatComponent],
       });
       fixture = TestBed.createComponent(TestCreditCardFormatComponent);
       inputEl = fixture.debugElement.query(By.css('input'));
diff --git a/projects/example/src/app/app.component.ts b/projects/example/src/app/app.component.ts
@@ -6,10 +6,9 @@ import { defer } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, AsyncPipe, CreditCardDirectivesModule]
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    imports: [FormsModule, ReactiveFormsModule, AsyncPipe, CreditCardDirectivesModule]
 })
 export class AppComponent {
   public demoForm = this.fb.group({
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"root": true,`
`3`		`- "ignorePatterns": [`
`4`		`- "projects/*/"`
`5`		`- ],`
`6`	`3`	`"overrides": [`
`7`	`4`	`{`
`8`	`5`	`"files": [`
Original file line number	Diff line number	Diff line change
`@@ -20,10 +20,10 @@`
`20`	`20`	`"url": "git+https://github.com/timofei-iatsenko/angular-cc-library.git"`
`21`	`21`	`},`
`22`	`22`	`"dependencies": {`
`23`		`- "tslib": "^2.4.1"`
	`23`	`+ "tslib": "^2.8.1"`
`24`	`24`	`},`
`25`	`25`	`"peerDependencies": {`
`26`		`- "@angular/common": "^18.0.0",`
`27`		`- "@angular/core": "^18.0.0"`
	`26`	`+ "@angular/common": "^19.1.4",`
	`27`	`+ "@angular/core": "^19.1.4"`
`28`	`28`	`}`
`29`	`29`	`}`