Angular 21.1.x

[anazhd]

Hi,

I was testing the latest 17.0.0 release with Angular 21.0.x and everything is okay. Then I switched over to Angular 21.1.0 today, and I'm getting issue with _VIEW_REPEATER_STRATEGY. They must have changed the @angular/cdk. This is the only blocker so far.

X [ERROR] No matching export in "node_modules/.pnpm/@angular+cdk@21.1.0_@angula_44c2e323958eda86e93d7f098e31c35a/node_modules/@angular/cdk/fesm2022/collections.mjs" for import "_VIEW_REPEATER_STRATEGY"

    node_modules/.pnpm/@nebular+theme@17.0.0_9d9861d31878af47b3775e17768a693d/node_modules/@nebular/theme/fesm2022/nebular-theme.mjs:22:9:
      22 │ import { _VIEW_REPEATER_STRATEGY, _DisposeViewRepeaterStrategy } from '@angular/cdk/collections';
         ╵          ~~~~~~~~~~~~~~~~~~~~~~~

E:\aproject\node_modules\.pnpm\esbuild@0.27.2\node_modules\esbuild\lib\main.js:1467
  let error = new Error(text);
              ^

Error: Error during dependency optimization:

X [ERROR] No matching export in "node_modules/.pnpm/@angular+cdk@21.1.0_@angula_44c2e323958eda86e93d7f098e31c35a/node_modules/@angular/cdk/fesm2022/collections.mjs" for import "_VIEW_REPEATER_STRATEGY"

    node_modules/.pnpm/@nebular+theme@17.0.0_9d9861d31878af47b3775e17768a693d/node_modules/@nebular/theme/fesm2022/nebular-theme.mjs:22:9:
      22 │ import { _VIEW_REPEATER_STRATEGY, _DisposeViewRepeaterStrategy } f...
         ╵          ~~~~~~~~~~~~~~~~~~~~~~~


    at failureErrorWithLog (E:\aproject\node_modules\.pnpm\esbuild@0.27.2\node_modules\esbuild\lib\main.js:1467:15)
    at E:\aproject\node_modules\.pnpm\esbuild@0.27.2\node_modules\esbuild\lib\main.js:926:25
    at E:\aproject\node_modules\.pnpm\esbuild@0.27.2\node_modules\esbuild\lib\main.js:1345:9
    at process.processTicksAndRejections (node:internal/process/task_queues:103:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

thought maybe @hoermillerj can have a look at this

[DiegoAndresCortes]

I am having the same issue

[kulichkoff]

@anazhd @DiegoAndresCortes
It looks like temporary downgrading to @angular/cdk@21.0 fixes build issues. I will wait for update before switching to cdk 21.1

[hoermillerj]

@anazhd thanks for giving the latest release a try. I will have a look and create a PR for compatibility with Angular 21.1.0.

[hoermillerj]

I created a PR #3311 Currently the PR checks show an error, but they are a little bit flaky.

[nssoft-rlagrange]

Hi, how is this issue going ?
I've just migrated my codebase to angular@21, so 21.1 by default, and I'm unable to start the project because of this issue, and couldn't find a way to rollback angular to 21.0.9.

[kisimediaDE]

@nssoft-rlagrange just change in your package.json all angular packages to ~21.0.0 it will automatically install the latest patch version of 21.0.x
Then delete your package-lock.json and node_modules folder and run npm install.
After this nebular is working fine again.

Hope the update will be released soon!!!

[DiegoAndresCortes]

downgrading would have breaking changes if you are using new signal forms features/syntax in angular 21.1

[nssoft-rlagrange]

downgrading would have breaking changes if you are using new signal forms features/syntax in angular 21.1

Thankfully I don't.
I have dependencies from other components on 21.1, but I have been able to --force and I don't see issue.
This dependencies hell is something I didn't see in a while -_-
For now my main issue is with angular2-smart-table which doesn't show data immediately after loading them in the datasource. The table display the headers but not the rows, which are shown when I move my mouse on the filters...

@kisimediaDE Thanks for the headup, I'm relatively new to npm syntax and didn't know the difference between ^21.X.Y and ~21.X.Y

[Marbulinek]

Hello, is this still in progress? This is a pretty annoying blocking issue. No matter, if I have angular cdk 21.0 or 21.1, there is still the same error mentioned above.

[soysergiogonza]

@Marbulinek i think it depends of the other angular libraries like build or another with @angular/.....

[anazhd]

upon testing, i actually getting the toaster affected even on 21.0.x. If you have NbDialogService, a form modal for example, when you call the toaster, it rendered behind the NbDialogService. same codebase, working just fine with Angular 20 / Nebular 16. Definitely the underlying cdk logic that angular team changed causing this issue.

with that tho, if i create a custom toaster interceptor, and inject it in NbDialogService modal I have, and call the toaster, it's fine. Just that, it's quite impossible to refactor my project and having to inject the custom toaster everytime.

@hoermillerj

[hoermillerj]

@anazhd I would recommend to open a new issue and add a working reproduction of your issue. This issue here is only to update the dependencies of Nebular for Angular Version 21.1.x. I have tested the NbDialog and the NbToastr and they both individually work fine in the playground app.

Additionally I just made some updates to my PR to ensure more PR checks run successfully. I hope that someone from the Akveo Team will have a look at the PR soon, but I have no connection with anyone from the Team, therefore I know as much as you guys about the progress here.

[anazhd]

@hoermillerj thanks. I was referencing possibility of other breaking stuff since this is related to @angular/cdk changes.

That note: I tested on playground, couldn't replicate. Still persist, just on my actual project, I moved over to browser popover api which works well with nbtoastr and nbdialog

[jkneepkens]

upon testing, i actually getting the toaster affected even on 21.0.x. If you have NbDialogService, a form modal for example, when you call the toaster, it rendered behind the NbDialogService. same codebase, working just fine with Angular 20 / Nebular 16. Definitely the underlying cdk logic that angular team changed causing this issue.

with that tho, if i create a custom toaster interceptor, and inject it in NbDialogService modal I have, and call the toaster, it's fine. Just that, it's quite impossible to refactor my project and having to inject the custom toaster everytime.

@hoermillerj

If you set this in your ApplicationConfig providers then it just works as before:

providers: [
    ...,
    {
        // Override default overlay config to disable use of top-layered popovers
        provide: OVERLAY_DEFAULT_CONFIG,
        useValue: {
            usePopover: false,
        },
    },
]