Angular 20 Support

[kisimediaDE]

Issue type

• bug report
• feature request

Issue description

Since Angular v20 got released May 28, 2025. Thought I'd just submit the feature request in regards to that.

Current behavior:
Nebular 15 does not support Angular 20, it expects Angular 19 as a dependency. When used with Angular 20, npm throws errors in regards to type definitions since dependcies and etc.

Expected behavior:
Nebular should work out of the box with Angular 20

[Eugeno]

I have a temporary solution I made for one project, maybe it'll be useful for someone.

1. npm i -D patch-package
2. package.json:

"scripts": {
  "postinstall": "patch-package"
},
"overrides": {
  "@nebular/theme": {
    "@angular/animations": "20",
    "@angular/cdk": "20",
    "@angular/common": "20",
    "@angular/core": "20",
    "@angular/router": "20"
  }
}

3. Add file patches/@nebular+theme+15.0.0.patch:

Content

diff --git a/node_modules/@nebular/theme/fesm2022/nebular-theme.mjs b/node_modules/@nebular/theme/fesm2022/nebular-theme.mjs
index 32b14e3..e9b13ca 100644
--- a/node_modules/@nebular/theme/fesm2022/nebular-theme.mjs
+++ b/node_modules/@nebular/theme/fesm2022/nebular-theme.mjs
@@ -10,7 +10,7 @@ import * as i2 from '@angular/router';
 import { RouterModule, NavigationEnd } from '@angular/router';
 import * as i1 from '@angular/cdk/a11y';
 import { FocusTrap, FocusTrapFactory, FocusKeyManager, ActiveDescendantKeyManager, FocusMonitor } from '@angular/cdk/a11y';
-import { CdkPortal, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
+import { CdkPortal, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import * as i3 from '@angular/cdk/overlay';
 import { Overlay, OverlayPositionBuilder, OverlayContainer, FlexibleConnectedPositionStrategy, OverlayModule, ViewportRuler, GlobalPositionStrategy, ScrollDispatcher, BlockScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
@@ -18,7 +18,7 @@ import * as i1$2 from '@angular/platform-browser';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { Directionality, BidiModule } from '@angular/cdk/bidi';
 import * as i4 from '@angular/cdk/table';
-import { CdkCellDef, CdkHeaderCellDef, CdkFooterCellDef, CdkColumnDef, CdkHeaderCell, CdkFooterCell, CdkCell, DataSource, DataRowOutlet, HeaderRowOutlet, FooterRowOutlet, NoDataRowOutlet, CdkCellOutlet, CdkHeaderRowDef, CdkFooterRowDef, CdkRowDef, CdkHeaderRow, CdkFooterRow, CdkRow, STICKY_POSITIONING_LISTENER, _COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler, CdkTable, CdkTableModule, CDK_TABLE } from '@angular/cdk/table';
+import { CdkCellDef, CdkHeaderCellDef, CdkFooterCellDef, CdkColumnDef, CdkHeaderCell, CdkFooterCell, CdkCell, DataSource, DataRowOutlet, HeaderRowOutlet, FooterRowOutlet, NoDataRowOutlet, CdkCellOutlet, CdkHeaderRowDef, CdkFooterRowDef, CdkRowDef, CdkHeaderRow, CdkFooterRow, CdkRow, STICKY_POSITIONING_LISTENER, CdkTable, CdkTableModule, CDK_TABLE } from '@angular/cdk/table';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { _VIEW_REPEATER_STRATEGY, _DisposeViewRepeaterStrategy } from '@angular/cdk/collections';
 import { ESCAPE, ENTER, SPACE, BACKSPACE, DELETE } from '@angular/cdk/keycodes';
@@ -77,6 +77,56 @@ const DEFAULT_MEDIA_BREAKPOINTS = [
         width: 1600,
     },
 ];
+class PortalInjector {
+  _parentInjector;
+  _customTokens;
+  constructor(_parentInjector, _customTokens) {
+    this._parentInjector = _parentInjector;
+    this._customTokens = _customTokens;
+  }
+  get(token, notFoundValue) {
+    const value = this._customTokens.get(token);
+    if (typeof value !== 'undefined') {
+      return value;
+    }
+    return this._parentInjector.get(token, notFoundValue);
+  }
+}
+const _COALESCED_STYLE_SCHEDULER = new InjectionToken('_COALESCED_STYLE_SCHEDULER');
+class _CoalescedStyleScheduler {
+  _currentSchedule = null;
+  _ngZone = inject(NgZone);
+  constructor() { }
+  schedule(task) {
+    this._createScheduleIfNeeded();
+    this._currentSchedule.tasks.push(task);
+  }
+  scheduleEnd(task) {
+    this._createScheduleIfNeeded();
+    this._currentSchedule.endTasks.push(task);
+  }
+  _createScheduleIfNeeded() {
+    if (this._currentSchedule) {
+      return;
+    }
+    this._currentSchedule = new _Schedule();
+    this._ngZone.runOutsideAngular(() =>
+      queueMicrotask(() => {
+        while (this._currentSchedule.tasks.length || this._currentSchedule.endTasks.length) {
+          const schedule = this._currentSchedule;
+          // Capture new tasks scheduled by the current set of tasks.
+          this._currentSchedule = new _Schedule();
+          for (const task of schedule.tasks) {
+            task();
+          }
+          for (const task of schedule.endTasks) {
+            task();
+          }
+        }
+        this._currentSchedule = null;
+      }));
+  }
+}
 /**
  * Manages media breakpoints
  *

4. npm i

[hoermillerj]

@kisimediaDE are you sure that Nebular v15 is out of the box compatible with Angular v20? I tried to update and it seems like there are some changes to the angular/cdk "ComponentPortal". The NbWindowService tries to pass the componentFactoryResolver as an argument, which was now removed.

edit: additionally the "afterRender" method does not exist anymore in Angular 20. It is used by some @nebular/theme components (e.g. popover).

[kisimediaDE]

Hey @hoermillerj, just to be clear — I never said Nebular v15 works out of the box with Angular 20. Quite the opposite: this feature request exists because it doesn't 😉

[hoermillerj]

Hey @hoermillerj, just to be clear — I never said Nebular v15 works out of the box with Angular 20. Quite the opposite: this feature request exists because it doesn't 😉

sorry, I read your message wrong. I assumed you meant it should work out of the box, but of course you meant that we want it to work with the latest version of Angular. My bad 😅

[kisimediaDE]

No worries at all @hoermillerj — happens to the best of us 😄

Yeah, I’ve actually started working on a fork to make it compatible with Angular 20, but as you already pointed out, there are a lot of breaking changes.

Some of the bigger challenges:

• Removal of ComponentFactoryResolver (affects things like NbWindowService)
• Removal of afterRender
• Standalone component support is still missing across most of Nebular
• CDK internals (like ComponentPortal) changed quite a bit

So it’s definitely not just a matter of updating peer dependencies. A proper Angular 20-compatible release will require quite a few internal refactors.

[MPTres]

No worries at all @hoermillerj — happens to the best of us 😄

Yeah, I’ve actually started working on a fork to make it compatible with Angular 20, but as you already pointed out, there are a lot of breaking changes.

Some of the bigger challenges:

• Removal of ComponentFactoryResolver (affects things like NbWindowService)
• Removal of afterRender
• Standalone component support is still missing across most of Nebular
• CDK internals (like ComponentPortal) changed quite a bit

So it’s definitely not just a matter of updating peer dependencies. A proper Angular 20-compatible release will require quite a few internal refactors.

Hi

I've checked the forked repo. Thanks for the work.

i'd like to try it in a project with angular 20. Is it ready to test in its current state? I mean test, not "production ready" , or something like that. Just would like to add it to a sample base project i have that uses nebular and see if i can replace it with this one.

any recommendation about how to integrate it? just change the dependency and use it as it was a regular nebular?

agains, thanks for the work to keep this up to date.

[kisimediaDE]

My fork still have some significant bugs. So no currently you can't test with it.

[marticrespi]

Is there any news about?