chore: updated to angular 18 (#125)

* init

* version up

* updating to 18

* fix: yarn updated to 1.22.22 and tests fix

* chore: reverted changes to lock files and updated yarn to 1.22.22

---------

Co-authored-by: Chris Withhart <[email protected]>

.yarnrc.yml

@@ -1 +1 @@
-yarnPath: .yarn/releases/yarn-1.22.1.cjs
+yarnPath: .yarn/releases/yarn-1.22.22.cjs

README.md

@@ -32,6 +32,7 @@ npm install angular-cc-library --save
 
 | Angular | Library |
 |---------|---------|
+| 18.x    | 3.4.x   |
 | 17.x    | 3.3.x   |
 | 16.x    | 3.2.x   |
 | 15.x    | 3.1.x   |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-cc-library",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "scripts": {
     "run:demo": "ng serve example",
     "build:demo": "ng build example --configuration production",
@@ -14,41 +14,41 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^17.1.2",
-    "@angular/compiler": "^17.1.2",
-    "@angular/core": "^17.1.2",
-    "@angular/forms": "^17.1.2",
-    "@angular/platform-browser": "^17.1.2",
-    "@angular/platform-browser-dynamic": "^17.1.2",
+    "@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",
     "rxjs": "~7.8.1",
-    "tslib": "^2.1.0",
-    "zone.js": "~0.14.3"
+    "tslib": "^2.7.0",
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-builders/jest": "17.0.0",
-    "@angular-devkit/build-angular": "^17.1.2",
-    "@angular-eslint/builder": "17.2.1",
-    "@angular-eslint/eslint-plugin": "17.2.1",
-    "@angular-eslint/eslint-plugin-template": "17.2.1",
-    "@angular-eslint/schematics": "17.2.1",
-    "@angular-eslint/template-parser": "17.2.1",
-    "@angular/cli": "^17.1.2",
-    "@angular/compiler-cli": "^17.1.2",
-    "@angular/language-service": "^17.1.2",
+    "@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",
     "@release-it/bumper": "^6.0.1",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@types/jest": "^29.5.2",
-    "@types/node": "^20.11.16",
-    "@typescript-eslint/eslint-plugin": "6.19.0",
-    "@typescript-eslint/parser": "6.19.0",
+    "@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.0.10",
-    "jest": "29.5.0",
-    "lint-staged": "^15.2.1",
-    "ng-packagr": "^17.1.2",
-    "release-it": "^17.0.3",
-    "ts-node": "~9.1.1",
-    "typescript": "~5.3.3"
+    "husky": "^9.1.5",
+    "jest": "29.7.0",
+    "lint-staged": "^15.2.10",
+    "ng-packagr": "^18.2.1",
+    "release-it": "^17.6.0",
+    "ts-node": "~10.9.2",
+    "typescript": "~5.5.4"
   },
   "lint-staged": {
     "*.{ts,component.html}": [

projects/angular-cc-library/package.json

@@ -23,7 +23,7 @@
     "tslib": "^2.4.1"
   },
   "peerDependencies": {
-    "@angular/common": "^17.0.0",
-    "@angular/core": "^17.0.0"
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0"
   }
 }

projects/angular-cc-library/src/lib/directives/credit-card-format.directive.spec.ts

@@ -29,7 +29,8 @@ describe('Directive: CreditCardFormat', () => {
     let inputEl: DebugElement;
     beforeEach(() => {
       TestBed.configureTestingModule({
-        declarations: [TestCreditCardFormatComponent, CreditCardFormatDirective],
+        declarations: [TestCreditCardFormatComponent],
+        imports: [CreditCardFormatDirective]
       });
       fixture = TestBed.createComponent(TestCreditCardFormatComponent);
       inputEl = fixture.debugElement.query(By.css('input'));
@@ -152,7 +153,8 @@ describe('Directive: CreditCardFormat', () => {
 
     beforeEach(() => {
       TestBed.configureTestingModule({
-        declarations: [TestCreditCardFormatComponent, CreditCardFormatDirective],
+        declarations: [TestCreditCardFormatComponent],
+        imports: [CreditCardFormatDirective],
       });
       fixture = TestBed.createComponent(TestCreditCardFormatComponent);
       inputEl = fixture.debugElement.query(By.css('input'));

projects/example/src/app/app.component.html

@@ -5,8 +5,10 @@
     <p>A general purpose library for building credit card forms, validating inputs and formatting numbers.</p>
     <div class="form-group">
         <label for="cc-number" class="control-label">Card number formatting
-            <small class="text-muted"
-                   *ngIf="type$ | async as type">[<span class="cc-brand">{{type}}</span>]</small></label>
+            @if(type$ | async; as type) {
+                <small class="text-muted">[<span class="cc-brand">{{type}}</span>]</small>
+            }            
+        </label>
         <input id="cc-number"
                (input)="goToNextField('creditCard', expireInput)"
                formControlName="creditCard"
@@ -44,9 +46,15 @@
     </div>
 
     <div class="errors">
-        <div *ngIf="!demoForm.controls.creditCard.valid && demoForm.controls.creditCard.dirty" class="alert alert-danger">Credit Card is invalid</div>
-        <div *ngIf="!demoForm.controls.expDate.valid && demoForm.controls.expDate.dirty" class="alert alert-danger">Expiration Date is required</div>
-        <div *ngIf="!demoForm.controls.cvc.valid  && demoForm.controls.cvc.dirty" class="alert alert-danger">CVC is required</div>
+        @if(!demoForm.controls.creditCard.valid && demoForm.controls.creditCard.dirty){
+            <div class="alert alert-danger">Credit Card is invalid</div>
+        }
+        @if(!demoForm.controls.expDate.valid && demoForm.controls.expDate.dirty){
+            <div class="alert alert-danger">Expiration Date is required</div>
+        }
+        @if(!demoForm.controls.cvc.valid  && demoForm.controls.cvc.dirty){
+            <div class="alert alert-danger">CVC is required</div>
+        }        
     </div>
 </form>
 

projects/example/src/app/app.component.ts

@@ -1,12 +1,15 @@
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
-import { Validators, FormGroup, FormBuilder } from '@angular/forms';
-import { CreditCardValidators, CreditCard } from 'angular-cc-library';
+import { Validators, FormGroup, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CreditCardValidators, CreditCard, CreditCardDirectivesModule } from 'angular-cc-library';
 import { defer } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
+  standalone: true,
+  imports: [FormsModule, ReactiveFormsModule, AsyncPipe, CreditCardDirectivesModule]
 })
 export class AppComponent {
   public demoForm = this.fb.group({

projects/example/src/main.ts

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