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

A quick guide on how to migrate to the new Angular CLI ESBuild system, including what code changes you need (besides running the migration), and the performance benefits that you get.

You need an HTTP/2 server in production for this new build to work well.

Timestamps:

0:00 Intro
02:32 Bundle Size Before
03:52 Migrating the the new EsBuild System
05:27 Code changes needed
07:17 bundle Size After
09:29 The Bottom Line

Related articles on the Angular University blog:

Free content at the Angular University:

Follow me:

[AleksandarT]

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 !

[hatsvids]

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

[flrjmce]

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

[margaridasemedo]

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

[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?

[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 🤔

[icoz]

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

[drax]

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

[giorgipaikidze]

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?

[Anbu_Sampath]

Will esbuild become default in future version of angular?