🚨Angular URGENT Update #1: Angular 17 CLI EsBuild: OFF By Default

[@AngularUniversity]

Let me know if you turned on the EsBuild system, and what performance benefits did you notice? 😊 If you are looking to learn Angular, check out my courses at the Angular University 👍 - angular-university.io

[@lapin07]

Still trying, I have issue with alias and path

[@AngularUniversity]

@@lapin07 I hope the video will help then 👍

[@hatsvids]

I am using ESBuild... the final bundle size seems somewhat bigger (more 40/50Kb in the final build), but the compilation time has decreased from about 40 seconds to 16 seconds with ESBuild... I haven't had the chance to try the new 'application' method yet, I believe it requires some additional reconfiguration of the angular.json.

[@AngularUniversity]

@@hatsvids There is a new migration for that, plus a couple of code changes are likely needed. I think you will like the video then 😉

[@AleksandarT10]

Running the command + fixing some of the imports did the trick for me! Thanks a lot for that, it speed up our builds by more than 30-40%

[@AlainBoudard]

Spot on Vasco ! You're right, the v16 build was already much faster than previous versions, but now they made a big step ! Thanks for the hint about http2 I didn't know !

[@AngularUniversity]

You're welcome Alain, yes and Angular 17 build is even faster, even if it's not the ESBuild version. 😊 The ESBuild faster is slightly faster in development, but much faster while doing the production build.

[@ВолодимирНакутний]

Thank you for this. We already updated our project to ver17.1.3 Let's try it tomorrow 😊

[@AngularUniversity]

You're welcome, let me know how it went. 😊 👍

[@hatsvids]

Thank you for the tips, I will try to use the migration later on.

[@AngularUniversity]

You're welcome, I'm glad it helped and let me know how it went 👍

[@NoName-1337]

Great video, thank you very much.

[@AngularUniversity]

I'm glad it helped 😊

[@vasiliuandrei4971]

Hello! I have a problem after migrating to esbuild (automatic migration). When I try to test build production output using http-server , the application starts with the loading page but none of the http requests starts. No errors / warnings shown in the console. Reverting back to angular-build:browser, the problem is gone. Starting with Ng serve, it works as expected. Any ideas to solve build production with esbuild?

[@ChrisPHolder]

Have you considered that the bundle size decrease might just be because you were opting out of tree shaking by using require and CJS? Would be interesting to see if the bundle would decrease the same amount if you simply use ESM and don’t opt out of Tree shaking with require calls 🤔

[@AngularUniversity]

It could be, also this build splits the code into many smaller bundles. 👍

[@margaridasemedo7846]

Great video! Thank you for sharing. How would you suggest to set up environment variables. Esbuild doesn't seem to have anything out of the box. Been struggling with it. On build esbuild can't find my environment variables. Using Anguar 17.3.11

[@AngularUniversity]

you can try ng add environments

[@ico0z]

The status for ESBuilds wasn't it in preview and only for dev server?

[@AngularUniversity]

It was in preview for 16 and our of preview in 17.The new esbuild is now out of developer preview and it's the default for new applications. But existing applications need to migrate manually, that's the catch. 👍😊

[@walterluszczyk]

Great, I need to try in my code. Meanwhile I have a question. I've notice in start version of code, that there was massive amount of Angular Material in your main bundle. After migration it has disappeared. Was it automatically separated to some shared bundle?

[@AngularUniversity]

Yes, the ESbuild build system will split the main bundle into separate smaller chunks. It works in a very different way than the standard bundler. Remember that we need a production server with support for HTTP 2, but this shouldn't be an issue 👍

[@bullettime2808]

Still no fast refresh 😢

[@AngularUniversity]

Weird, are you sure you updated? The refresh is blazing fast for me, way better than in Angular 16. I often can't even switch to the browser enough to see the reload happening.

[@bullettime2808]

@@AngularUniversity I mean state-full fast refresh like React, Flutter and most other frameworks , In Angular if you make a change your entire app restarts

[@gleitonfranco1260]

🔝‼

[@AngularUniversity]

Thank you! Stay tuned and enjoy the videos

[@drax432]

By default (without any explicit configuration from developer), does Angular 18 uses vite and esbuild? Or is it still using webpack?

[@AngularUniversity]

Since Angular 17, the new ESbuild was enabled by default to new apps, but the migration to 17 did not migrate it, you had to migrate manually. The migration to 18 will now ask if you want to migrate to ESBuild. 👍

[@drax432]

thanks for replying. When i use angular 18 directly (no migration involved), i wonder if by default, ESbuild is enabled. Cos when i look at the package-lock.json, i saw dependencies related to Esbuild and webpack. So i wonder which is the default one used

[@AngularUniversity]

@@drax432 Check the output on the build folder. Webpack will only output 4 main files, plus one bundle part lazy loaded element, but esbuild will output way more files, and they are named chunk* I think the dependency with webpack is not yet fully removed with the CLI, or they install it both not knowing which one you will use.

[@КонстантинХ-у4ф]

where is source??????

[@AngularUniversity]

this source code is not public, it's my company code.

[@Anbu_Sampath]

Will esbuild become default in future version of angular?

[@AngularUniversity]

I'm guessing that it will be the default eventually, but I don't remember seeing that mentioned anywhere.

[@LarsRyeJeppesen]

I think it is already

[@giorgipaikidze85]

Thank you Vasco. I got an error when turned on esbuild. App build works fine, it's really fast, but it throws the following error when changing the route - dynamic require of is not supported. And it points to lazy lodede modules. After some research It seems esbuild does not support dynamic imports. Do you have any idea about this?

[@AngularUniversity]

How are you making the imports? I have my platform running on Esbuild, we use router dynamic imports and it works. This seems like something to your project? 👍

[@giorgipaikidze85]

@@AngularUniversity Yes, it seems something is missing in my project. I use nx and updated recently to 17.1 with nx. I am using standard lazy loading - loadChildren property. With old browser builder project works fine, but after switching to browser-esbuild it gives this error. After debugging it seems when dynamic import is triggered esbuild checks if require is defined or not and since it is not present in the browser it throws the error. here is the code which throws the error: var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) { if (typeof require !== "undefined") return require.apply(this, arguments); throw new Error('Dynamic require of "' + x + '" is not supported'); });

[@giorgipaikidze85]

@@AngularUniversity yes,something is miising in my project. I use nx and updated recently to 17.1 with nx. I am using standard lazy loading - loadChildren: () => import('some.module').then(m => m.SomeModule). With old browser builder project works fine, but after switching to browser-esbuild it gives the error. After debugging it seems when dynamic import is triggered esbuild checks if require is defined or not and since it is not present in the browser it throws the error. Here is the code which throws the error: var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) { if (typeof require !== "undefined") return require.apply(this, arguments); throw new Error('Dynamic require of "' + x + '" is not supported'); });

[@giorgipaikidze85]

@@AngularUniversity yes,something is miising in my project. I use nx and updated recently to 17.1 with nx. I am using standard lazy loading - loadChildren: () => import('some.module').then(m => m.SomeModule). With old browser builder project works fine, but after switching to browser-esbuild it gives the error. After debugging it seems when dynamic import is triggered esbuild checks if require is defined or not and since it is not present in the browser it throws the error.

[@AngularUniversity]

@@giorgipaikidze85 I did not try the new EsBuild with module-based lazy loading, as the platform had already been migrated to standalone components, but I assume that it not related. what I suspect that happens in your case is that maybe not all the EsBuild bindles are being sent to production. Does it work locally?