diff --git a/projects/angular-split/src/lib/split-area/split-area.component.ts b/projects/angular-split/src/lib/split-area/split-area.component.ts
index 788cccb3..ce0d9391 100644
--- a/projects/angular-split/src/lib/split-area/split-area.component.ts
+++ b/projects/angular-split/src/lib/split-area/split-area.component.ts
@@ -9,7 +9,7 @@ import {
   input,
   isDevMode,
 } from '@angular/core'
-import { SplitComponent } from '../split/split.component'
+import { SPLIT_AREA_CONTRACT, SplitComponent } from '../split/split.component'
 import { createClassesString, mirrorSignal } from '../utils'
 import { SplitAreaSize, areaSizeTransform, boundaryAreaSizeTransform } from '../models'
 
@@ -19,6 +19,12 @@ import { SplitAreaSize, areaSizeTransform, boundaryAreaSizeTransform } from '../
   exportAs: 'asSplitArea',
   templateUrl: './split-area.component.html',
   styleUrl: './split-area.component.css',
+  providers: [
+    {
+      provide: SPLIT_AREA_CONTRACT,
+      useExisting: SplitAreaComponent,
+    },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SplitAreaComponent {
diff --git a/projects/angular-split/src/lib/split/split.component.ts b/projects/angular-split/src/lib/split/split.component.ts
index 42ee10c0..013518e9 100644
--- a/projects/angular-split/src/lib/split/split.component.ts
+++ b/projects/angular-split/src/lib/split/split.component.ts
@@ -3,6 +3,7 @@ import {
   Component,
   ElementRef,
   HostBinding,
+  InjectionToken,
   NgZone,
   Renderer2,
   booleanAttribute,
@@ -17,7 +18,7 @@ import {
   untracked,
 } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
-import { SplitAreaComponent } from '../split-area/split-area.component'
+import type { SplitAreaComponent } from '../split-area/split-area.component'
 import { Subject, filter, fromEvent, map, pairwise, skipWhile, startWith, switchMap, take, takeUntil, tap } from 'rxjs'
 import {
   ClientPoint,
@@ -61,6 +62,8 @@ interface DragStartContext {
   areaAfterGutterIndex: number
 }
 
+export const SPLIT_AREA_CONTRACT = new InjectionToken<SplitAreaComponent>('Split Area Contract')
+
 @Component({
   selector: 'as-split',
   standalone: true,
@@ -83,7 +86,7 @@ export class SplitComponent {
   /**
    * @internal
    */
-  readonly _areas = contentChildren(SplitAreaComponent)
+  readonly _areas = contentChildren(SPLIT_AREA_CONTRACT)
   protected readonly customGutter = contentChild(SplitGutterDirective)
   readonly gutterSize = input(this.defaultOptions.gutterSize, {
     transform: numberAttributeWithFallback(this.defaultOptions.gutterSize),