Feat/angular 18

.commitlintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["@commitlint/config-conventional"],
+  "extends": ["@commitlint/config-angular"],
   "rules": {
     "type-enum": [2, "always", ["ci", "chore", "docs", "feat", "fix", "perf", "refactor", "revert", "style"]]
   }

.github/workflows/main.yml

@@ -17,7 +17,7 @@ jobs:
       - name: 🗜️ Setup node version
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           registry-url: 'https://registry.npmjs.org'
 
       - name: 🛠️ Install
@@ -66,7 +66,7 @@ jobs:
         if: startsWith(github.ref, 'refs/tags/v') && contains(github.ref, 'beta') == false
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           registry-url: https://npm.pkg.github.com/
           scope: '@celtian'
 
@@ -84,7 +84,7 @@ jobs:
 
       - name: 🚀 Deploy Github Pages
         if: startsWith(github.ref, 'refs/tags/v') && contains(github.ref, 'beta') == false
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
           publish_branch: gh-pages

.github/workflows/pull-request.yml

@@ -13,7 +13,7 @@ jobs:
       - name: 🗜️ Setup node version
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           registry-url: 'https://registry.npmjs.org'
 
       - name: 🛠️ Install

.nvmrc

@@ -1 +1 @@
-20
+22

README.md

@@ -14,7 +14,7 @@
 
 > Angular directive for repeating HTML element by count
 
-> ✓ _Angular 17 compatible_
+> ✓ _Angular 18 compatible_
 
 Here's the [demo](http://celtian.github.io/ngx-repeat/) or [stackblitz live preview](https://stackblitz.com/edit/ngx-repeat) or [codesandbox live preview](https://codesandbox.io/s/ngx-repeat-bew8f)
 

angular.json

@@ -66,7 +66,6 @@
             "index": "projects/demo/src/index.html",
             "browser": "projects/demo/src/main.ts",
             "polyfills": [
-              "zone.js"
             ],
             "tsConfig": "projects/demo/tsconfig.app.json",
             "assets": [

package.json

@@ -32,51 +32,50 @@
     "fix-vulnerabilities": "npx yarn-audit-fix && npx browserslist --update-db"
   },
   "dependencies": {
-    "@angular/animations": "^17.1.3",
-    "@angular/common": "^17.1.3",
-    "@angular/compiler": "^17.1.3",
-    "@angular/core": "^17.1.3",
-    "@angular/forms": "^17.1.3",
-    "@angular/platform-browser": "^17.1.3",
-    "@angular/platform-browser-dynamic": "^17.1.3",
-    "@angular/router": "^17.1.3",
+    "@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",
     "rxjs": "^7.8.1",
-    "tslib": "^2.6.2",
-    "zone.js": "^0.14.2"
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.1.3",
-    "@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.3",
-    "@angular/compiler-cli": "^17.1.3",
-    "@angular/language-service": "^17.1.3",
-    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.6.0",
+    "@angular-devkit/build-angular": "^18.0.1",
+    "@angular-eslint/builder": "17.5.2",
+    "@angular-eslint/eslint-plugin": "17.5.2",
+    "@angular-eslint/eslint-plugin-template": "17.5.2",
+    "@angular-eslint/schematics": "17.5.2",
+    "@angular-eslint/template-parser": "17.5.2",
+    "@angular/cli": "^18.0.1",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/language-service": "^18.0.0",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-angular": "^19.3.0",
     "@types/jasmine": "^5.1.4",
     "@types/jasminewd2": "^2.0.13",
-    "@types/node": "^20.11.17",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@types/node": "^20.12.12",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "auto-changelog": "^2.4.0",
-    "eslint": "^8.56.0",
-    "husky": "^9.0.10",
+    "eslint": "^8.57.0",
+    "husky": "^9.0.11",
     "jasmine-core": "^5.1.2",
     "jasmine-spec-reporter": "^7.0.0",
-    "karma": "^6.4.2",
+    "karma": "^6.4.3",
     "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.2",
-    "ng-packagr": "^17.1.2",
+    "lint-staged": "^15.2.5",
+    "ng-packagr": "^18.0.0",
     "prettier": "^3.2.5",
     "protractor": "~7.0.0",
-    "tsx": "^4.7.1",
-    "typescript": "^5.3.3"
+    "tsx": "^4.11.0",
+    "typescript": "^5.4.5"
   },
   "peerDependencies": {},
   "homepage": "https://github.com/Celtian/ngx-repeat",
@@ -97,7 +96,7 @@
     "dist"
   ],
   "engines": {
-    "node": ">=20 <22",
+    "node": ">=22 <24",
     "npm": "please-use-yarn"
   },
   "publishConfig": {

projects/demo/src/app/app.component.spec.ts

@@ -1,28 +1,30 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   let fixture: ComponentFixture<AppComponent>;
   let component: AppComponent;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [AppComponent]
+      imports: [AppComponent],
+      providers: [provideExperimentalZonelessChangeDetection()]
     }).compileComponents();
 
     fixture = TestBed.createComponent(AppComponent);
     component = fixture.componentInstance;
-  }));
+  });
 
   it('should create the app', () => {
     expect(component).toBeTruthy();
   });
 
-  it(`should get github link`, waitForAsync(() => {
+  it(`should get github link`, () => {
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
     expect(compiled.querySelector('.github-logo').href).toContain('https://github.com/celtian/ngx-repeat');
-  }));
+  });
 
   it('should increment', () => {
     component.increment();

projects/demo/src/app/app.config.ts

@@ -1,6 +1,6 @@
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
-  providers: [importProvidersFrom(BrowserModule)]
+  providers: [provideAnimations(), provideExperimentalZonelessChangeDetection()]
 };

projects/demo/src/polyfills.ts

@@ -45,7 +45,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js'; // Included with Angular CLI.
+// import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

projects/demo/src/test.ts

@@ -1,6 +1,5 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 

projects/ngx-repeat/src/lib/ngx-repeat.directive.spec.ts

@@ -1,4 +1,10 @@
-import { Component, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+  provideExperimentalZonelessChangeDetection
+} from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NgxRepeatDirective, RepeatDirectiveContext } from './ngx-repeat.directive';
 
@@ -46,7 +52,8 @@ describe('NgxRepeatDirective', () => {
       declarations: [TestDirectiveComponent],
       providers: [
         { provide: TemplateRef, useValue: templateRef },
-        { provide: ViewContainerRef, useValue: viewContainer }
+        { provide: ViewContainerRef, useValue: viewContainer },
+        provideExperimentalZonelessChangeDetection()
       ]
     }).createComponent(TestDirectiveComponent);
 

projects/ngx-repeat/src/test.ts

@@ -1,7 +1,5 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js';
-import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 

tsconfig.json

@@ -5,7 +5,7 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
+    "esModuleInterop": true,
     "experimentalDecorators": true,
     "module": "es2020",
     "moduleResolution": "node",
@@ -17,7 +17,6 @@
       "ngx-repeat/*": ["dist/ngx-repeat/*"]
     },
     "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true,
     "useDefineForClassFields": false
   },
   "angularCompilerOptions": {