DevExpress/devextreme-angular

Error when using with Angular 16.0.0

nuwanwp opened this issue · 10 comments

nuwanwp commented

Bug Report

I am using "devextreme": "22.2.6", "devextreme-angular": "22.2.6" in my recent project and migrated to Angular 16.0.0. I am facing following issue when compiling

node_modules/devextreme-angular/core/transfer-state.d.ts:10:90 - error TS2339: Property 'BrowserTransferStateModule' does not exist on type 'typeof import("C:/Users/xxx/source/repos/BDSCore/CoreAngular/BdsCore/node_modules/@angular/platform-browser/index")'.

It seems like BrowserTransferStateModule module used in "devextreme-angular/core/transfer-state" is not available in platform-browser (Angular 16).

Package versions:

devexteme version:22.2.6
devextreme-angular version:22.2.6

Steps to reproduce:
Create angular 16 app and add DxDataGridModule

Current behavior:

Expected behavior:

Screenshots:

michalma commented

My workaround for this is to patch the @angular/platform-browser package using patch-package with a dummy export of BrowserTransferStateModule. Works good, but I don't use SSR.

iqmeta commented

My workaround for this is to patch the @angular/platform-browser package using patch-package with a dummy export of BrowserTransferStateModule. Works good, but I don't use SSR.

Hey @michalma,
can you share steps with some code on your workaround? Thanks and kind regards.

borgez commented

for me, work with "@angular/platform-browser": "^16.0.0", (16.0.1) and yarn stable
copy
@angular-platform-browser-npm-16.0.1-9dedd3c7ac.patch
to .yarn\patches\

add to package.json
"resolutions": { "@angular/platform-browser@^16.0.0": "patch:@angular/platform-browser@npm%3A16.0.1#./.yarn/patches/@angular-platform-browser-npm-16.0.1-9dedd3c7ac.patch" }

  • 👍1
michalma commented

My workaround for this is to patch the @angular/platform-browser package using patch-package with a dummy export of BrowserTransferStateModule. Works good, but I don't use SSR.

Hey @michalma, can you share steps with some code on your workaround? Thanks and kind regards.

Angular team removed the BrowserStateTransferModule in v16. Starting from version 14 it was just a empty class. So all you have to do is to create that empty class via patch-package (until dx team fixes it).
image

Follow the patch-package installation guide at https://github.com/ds300/patch-package.

Then edit the @angular/platform-browser files:

  1. Add this line to node_modules/@angular/platform-browser/esm2022/public_api.mjs:
    export class BrowserTransferStateModule {}

  2. Add this line to node_modules/@angular/platform-browser/index.d.ts:
    export declare class BrowserTransferStateModule {}

  3. Run npx patch-package @angular/platform-browser

Then the devextreme-angular code should compile properly :)

  • 👍1
iqmeta commented

Thanks a lot both of you!

Not using yarn, so I guess resolution isn't working with npm.

To get ng build and ng serve back I also had to disable .angular cache folder
in angular.json

"cli": {
   "cache": {
     "enabled": false
   }
}

and add this code to @angular/platform-browser/fesm2022/platform-browser.mjs

BrowserTransferStateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BrowserTransferStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
BrowserTransferStateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: BrowserTransferStateModule });
BrowserTransferStateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BrowserTransferStateModule });
i0.ɵɵngDeclareClassMetadata({
    minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BrowserTransferStateModule, decorators: [{
        type: NgModule,
        args: [{}]
    }]
});

export { BrowserModule, BrowserTransferStateModule, ......

Otherwise all over all devextreme packages there was an import error.
Thanks again, finanally we can prepare our move to Angular 16 now 🚀

devartkr commented

The above method is still problematic in the es-build method.

gurelsoycaner commented

I guess, waiting for devextreme team to fix this might be better, sometimes workarounds can course back around.

artem-kurchenko commented

Hell all,

We released the devextreme@23.1.2-beta and devextreme-angular@23.1.2-beta packages to address this issue.
Please test them and share your results.

  • 🚀1
iqmeta commented

Looks perfect to me 🚀 Angular 16 with Signals is awesome!

image

and the best... even with vite it's working in dev preview instant correct

image

Big thanks... 👍

  • 👍1
devartkr commented

Thank you very much for your quick response and hard work.
There is no problem with eb-build.
Thanks once again.

  • 👍1