DevExtreme v22.2 in Angular v16 is missing "BrowserTransferStateModule" from @angular/platform-browser about devextreme

[artem-kurchenko]

Hello @GustavoOrGuzz

We released the [email protected] and [email protected] packages to address this issue.
Please test them and share your results.

[JSoutoP]

I was doing some test with the 23.1.2.beta. I created a basic example with just with one button in the app.component and showing an alert with the text "Hello world", following the instructions in the tutorial: https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/.

Using webpack the results are:

√ Compiled successfully.
✔ Browser application bundle generation complete.

Initial Chunk Files | Names | Raw Size
runtime.js | runtime | 6.52 kB |
main.js | main | 6.44 kB |

3 unchanged chunks

Build at: 2023-05-27T18:59:49.547Z - Hash: 4019ea560ed9cfca - Time: 581ms

√ Compiled successfully.

Changing the angular.json for using vite ( "builder": "@angular-devkit/build-angular:browser-esbuild",) the results are:

Initial Chunk Files | Names | Raw Size
main.js | main | 14.73 MB |
styles.css | styles | 834.88 kB |
polyfills.js | polyfills | 82.88 kB |

                | Initial Total |  15.63 MB

Lazy Chunk Files | Names | Raw Size
chunk-RXUGBNBB.js | - | 2.66 kB |

Application bundle generation complete. [2.646 seconds]

What are the reasons to increase nearly 5 times the time of compilation ?

Thanks.

[artem-kurchenko]

Hi @JSoutoP

We didn't perform specific customizations for the Vite build. If this behavior affects your application development, please raise a ticket in our Support Center: https://supportcenter.devexpress.com/ticket/create

Our support team will perform further research.

[JSoutoP]

Hi,

I've already raised for a ticket but they tell me I need a valid license. I use Devextreme for teaching and personal purposes.

Thanks.

[artem-kurchenko]

okay @JSoutoP . I didn't reproduce the issue with a bundle size.
Please modify my example to demonstrate it or send one for testing.
test-app.zip

[JSoutoP]

Hi,

with Vite enabled in the angular.json "builder": "@angular-devkit/build-angular:browser-esbuild",

Application bundle generation complete. [1.379 seconds]
Reloading client(s)...

Initial Chunk Files | Names | Raw Size
main.js | main | 5.44 MB |
styles.css | styles | 1.04 MB |
polyfills.js | polyfills | 82.88 kB |

                | Initial Total |  6.56 MB

Lazy Chunk Files | Names | Raw Size
chunk-2VB6XM3M.js | - | 1.05 kB |

Application bundle generation complete. [1.281 seconds]
Reloading client(s)...

Initial Chunk Files | Names | Raw Size
main.js | main | 5.44 MB |
styles.css | styles | 1.04 MB |
polyfills.js | polyfills | 82.88 kB |

                | Initial Total |  6.56 MB

Lazy Chunk Files | Names | Raw Size
chunk-2VB6XM3M.js | - | 1.05 kB |

Application bundle generation complete. [1.476 seconds]

Around 1.4 seconds in generate new bundle.

With webpack:

√ Compiled successfully.
✔ Browser application bundle generation complete.

Initial Chunk Files | Names | Raw Size
main.js | main | 7.96 kB |
runtime.js | runtime | 6.51 kB |

3 unchanged chunks

Build at: 2023-06-12T09:15:49.266Z - Hash: 6492250a2f4effcb - Time: 733ms

√ Compiled successfully.
✔ Browser application bundle generation complete.

Initial Chunk Files | Names | Raw Size
main.js | main | 7.96 kB |
runtime.js | runtime | 6.51 kB |

3 unchanged chunks

Build at: 2023-06-12T09:15:53.284Z - Hash: a39bf2a0390ad5e8 - Time: 527ms

Around 0.5 seconds.

Thanks.

[artem-kurchenko]

@JSoutoP
I tested this option but didn't receive this file size. Please attach an example for further testing.

[JSoutoP]

The problem is not the file size. The problem it's the time of bundle creation. Vite is very fast, but with the Devextreme components you can't appreciate this increase in velocity. I dont know the reason.

Thanks

[artem-kurchenko]

Thank you for the clarification @JSoutoP . I re-tested this part and see that a new build configuration takes much time to perform tree shaking if short paths are used to import our modules.

Try using long paths across all application: https://js.devexpress.com/Documentation/Guide/Angular_Components/Common_Features/Tree_Shaking/