{"id":1762,"date":"2023-11-13T05:00:00","date_gmt":"2023-11-13T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1762"},"modified":"2023-11-10T15:27:22","modified_gmt":"2023-11-10T23:27:22","slug":"angular-17-new-esbuild-builder-with-vite","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-17-new-esbuild-builder-with-vite\/","title":{"rendered":"Angular 17: New esbuild builder with Vite"},"content":{"rendered":"\n<p>Who doesn&#8217;t like faster builds? Since Angular 2, the Angular team has consistently worked on making our builds quicker and faster. Angular 16 included a developer preview of a <a href=\"https:\/\/angular.io\/guide\/esbuild\" target=\"_blank\" rel=\"noopener\" title=\"\">new build system based on esbuild and Vite<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"180\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image-21.png\" alt=\"\" class=\"wp-image-1763\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image-21.png 650w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image-21-300x83.png 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>With Angular 17, this feature is now <strong>enabled by default for new apps<\/strong>, with reported speed improvements of over 67% in most applications.<\/p>\n\n\n\n<p>To enable this new build system in existing apps (that use v16+), open your <code>angular.json<\/code> file and look for all the places where <code>@angular-devkit\/build-angular:browser<\/code> is used:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"513\" height=\"120\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image-22.png\" alt=\"\" class=\"wp-image-1764\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image-22.png 513w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image-22-300x70.png 300w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Then, replace those instances with <code>@angular-devkit\/build-angular:browser-esbuild<\/code><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"566\" height=\"126\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image-23.png\" alt=\"\" class=\"wp-image-1765\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image-23.png 566w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/11\/image-23-300x67.png 300w\" sizes=\"auto, (max-width: 566px) 100vw, 566px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>And your next run of <code>ng serve<\/code> or <code>ng build<\/code> will automatically use this new build system. Nice and easy! If you use server-side rendering or have tweaked the builders in the past, you&#8217;ll want to look at the <a href=\"https:\/\/angular.io\/guide\/esbuild#using-the-application-builder\" target=\"_blank\" rel=\"noopener\" title=\"\">extra instructions listed on this page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Who doesn&#8217;t like faster builds? Since Angular 2, the Angular team has consistently worked on making our builds quicker and faster. Angular 16 included a developer preview of a new build system based on esbuild and Vite. With Angular 17, this feature is now enabled by default for new apps, with reported speed improvements of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,20,17],"tags":[],"class_list":["post-1762","post","type-post","status-publish","format-standard","hentry","category-angular","category-performance","category-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1762"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1762\/revisions"}],"predecessor-version":[{"id":1767,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1762\/revisions\/1767"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}