{"id":1491,"date":"2023-09-21T05:00:00","date_gmt":"2023-09-21T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1491"},"modified":"2023-09-15T14:59:54","modified_gmt":"2023-09-15T21:59:54","slug":"what-is-the-ivy-engine","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/","title":{"rendered":"What is the Ivy engine?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">You&#8217;ve probably heard about the <a href=\"https:\/\/angular.io\/guide\/glossary#ivy\" target=\"_blank\" rel=\"noopener\" title=\"\">Ivy engine<\/a> if you&#8217;ve been working with Angular for some time. Ivy is the code name of Angular&#8217;s current compilation and rendering pipeline.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before Ivy, Angular used a two-step process: Building a project would compile all Typescript code to Javascript. Then HTML templates would get compiled at runtime in the browser, using a second compiler called the <a href=\"https:\/\/angular.io\/guide\/glossary#view-engine\" target=\"_blank\" rel=\"noopener\" title=\"\">View Engine<\/a>. This was done for performance reasons in the past, but the toolchain and the framework evolved for much better performance using the Ivy Engine.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">View Engine was deprecated in version 9 and removed from the framework in version 13. Ivy is the only option now and results in:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Faster builds and smaller build output<\/strong>. Some applications became up to 80% smaller\/quicker when they started using Ivy &#8211; mostly because the View Engine compiler doesn&#8217;t need to be shipped to the browser anymore, but also because of the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/anti-pattern-not-using-production-builds-to-deploy-production-code\/\" target=\"_blank\" rel=\"noopener\" title=\"\">improved tree shaking<\/a>.<\/li>\n\n\n\n<li><strong>Faster runtime experience<\/strong> &#8211; The application loads faster since components no longer need to be compiled in the browser.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re stuck with an older version of Angular, you can look at this <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-update-my-version-of-angular\/\" target=\"_blank\" rel=\"noopener\" title=\"\">guide on upgrading Angular<\/a>. If the guide doesn&#8217;t work, 99% of the time, the problem comes from your dependencies, and following these <a href=\"https:\/\/blog.angulartraining.com\/how-to-pick-the-right-dependencies-for-your-angular-application-328ce637b982?sk=d6d83d6605b1adab22409e54d2cbe1bd\" target=\"_blank\" rel=\"noopener\" title=\"\">best practices to pick your dependencies<\/a> would help.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You&#8217;ve probably heard about the Ivy engine if you&#8217;ve been working with Angular for some time. Ivy is the code name of Angular&#8217;s current compilation and rendering pipeline. Before Ivy, Angular used a two-step process: Building a project would compile all Typescript code to Javascript. Then HTML templates would get compiled at runtime in the [&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],"tags":[],"class_list":["post-1491","post","type-post","status-publish","format-standard","hentry","category-angular","category-performance"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.9 - aioseo.com -->\n\t<meta name=\"description\" content=\"You&#039;ve probably heard about the Ivy engine if you&#039;ve been working with Angular for some time. Ivy is the code name of Angular&#039;s current compilation and rendering pipeline. Before Ivy, Angular used a two-step process: Building a project would compile all Typescript code to Javascript. Then HTML templates would get compiled at runtime in the\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Alain Chautard\"\/>\n\t<meta name=\"google-site-verification\" content=\"SXxD3jwe28P5x4KWwWlYlHobuesNDkT6VWG1oVG1GcQ\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.9\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/what-is-the-ivy-engine\\\/#article\",\"name\":\"What is the Ivy engine? | Angular Newsletter\",\"headline\":\"What is the Ivy engine?\",\"author\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/author\\\/alcfeoh\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/blue-logo-vertical.png\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/#articleImage\",\"width\":1234,\"height\":950},\"datePublished\":\"2023-09-21T05:00:00-07:00\",\"dateModified\":\"2023-09-15T14:59:54-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/what-is-the-ivy-engine\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/what-is-the-ivy-engine\\\/#webpage\"},\"articleSection\":\"Angular, Performance\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/what-is-the-ivy-engine\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/category\\\/angular\\\/#listItem\",\"name\":\"Angular\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/category\\\/angular\\\/#listItem\",\"position\":2,\"name\":\"Angular\",\"item\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/category\\\/angular\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/what-is-the-ivy-engine\\\/#listItem\",\"name\":\"What is the Ivy engine?\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/what-is-the-ivy-engine\\\/#listItem\",\"position\":3,\"name\":\"What is the Ivy engine?\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/category\\\/angular\\\/#listItem\",\"name\":\"Angular\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/#organization\",\"name\":\"Angular Training\",\"description\":\"Tutorials and updates about the Angular framework\",\"url\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/\",\"email\":\"contact@interstate21.com\",\"telephone\":\"+14089106087\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/blue-logo-vertical.png\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/what-is-the-ivy-engine\\\/#organizationLogo\",\"width\":1234,\"height\":950},\"image\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/what-is-the-ivy-engine\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/www.youtube.com\\\/@AngularTraining\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/achautard\\\/\",\"https:\\\/\\\/blog.angulartraining.com\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/author\\\/alcfeoh\\\/#author\",\"url\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/author\\\/alcfeoh\\\/\",\"name\":\"Alain Chautard\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/what-is-the-ivy-engine\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/26ae8a75f090f33d4e79871307246008907228871b691f47cf15d2e7353939fd?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Alain Chautard\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/alainchautard\",\"https:\\\/\\\/www.youtube.com\\\/@AngularTraining\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/achautard\\\/\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/what-is-the-ivy-engine\\\/#webpage\",\"url\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/what-is-the-ivy-engine\\\/\",\"name\":\"What is the Ivy engine? | Angular Newsletter\",\"description\":\"You've probably heard about the Ivy engine if you've been working with Angular for some time. Ivy is the code name of Angular's current compilation and rendering pipeline. Before Ivy, Angular used a two-step process: Building a project would compile all Typescript code to Javascript. Then HTML templates would get compiled at runtime in the\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/what-is-the-ivy-engine\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/author\\\/alcfeoh\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/author\\\/alcfeoh\\\/#author\"},\"datePublished\":\"2023-09-21T05:00:00-07:00\",\"dateModified\":\"2023-09-15T14:59:54-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/#website\",\"url\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/\",\"name\":\"Angular Newsletter\",\"description\":\"Tutorials and updates about the Angular framework\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.angulartraining.com\\\/daily-newsletter\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"What is the Ivy engine? | Angular Newsletter","description":"You've probably heard about the Ivy engine if you've been working with Angular for some time. Ivy is the code name of Angular's current compilation and rendering pipeline. Before Ivy, Angular used a two-step process: Building a project would compile all Typescript code to Javascript. Then HTML templates would get compiled at runtime in the","canonical_url":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"SXxD3jwe28P5x4KWwWlYlHobuesNDkT6VWG1oVG1GcQ","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/#article","name":"What is the Ivy engine? | Angular Newsletter","headline":"What is the Ivy engine?","author":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/author\/alcfeoh\/#author"},"publisher":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2018\/01\/blue-logo-vertical.png","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/#articleImage","width":1234,"height":950},"datePublished":"2023-09-21T05:00:00-07:00","dateModified":"2023-09-15T14:59:54-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/#webpage"},"isPartOf":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/#webpage"},"articleSection":"Angular, Performance"},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter#listItem","position":1,"name":"Home","item":"https:\/\/www.angulartraining.com\/daily-newsletter","nextItem":{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/#listItem","name":"Angular"}},{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/#listItem","position":2,"name":"Angular","item":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/#listItem","name":"What is the Ivy engine?"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/#listItem","position":3,"name":"What is the Ivy engine?","previousItem":{"@type":"ListItem","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/#listItem","name":"Angular"}}]},{"@type":"Organization","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/#organization","name":"Angular Training","description":"Tutorials and updates about the Angular framework","url":"https:\/\/www.angulartraining.com\/daily-newsletter\/","email":"contact@interstate21.com","telephone":"+14089106087","logo":{"@type":"ImageObject","url":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2018\/01\/blue-logo-vertical.png","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/#organizationLogo","width":1234,"height":950},"image":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/#organizationLogo"},"sameAs":["https:\/\/www.youtube.com\/@AngularTraining","https:\/\/www.linkedin.com\/in\/achautard\/","https:\/\/blog.angulartraining.com\/"]},{"@type":"Person","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/author\/alcfeoh\/#author","url":"https:\/\/www.angulartraining.com\/daily-newsletter\/author\/alcfeoh\/","name":"Alain Chautard","image":{"@type":"ImageObject","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/26ae8a75f090f33d4e79871307246008907228871b691f47cf15d2e7353939fd?s=96&d=mm&r=g","width":96,"height":96,"caption":"Alain Chautard"},"sameAs":["https:\/\/twitter.com\/alainchautard","https:\/\/www.youtube.com\/@AngularTraining","https:\/\/www.linkedin.com\/in\/achautard\/"]},{"@type":"WebPage","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/#webpage","url":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/","name":"What is the Ivy engine? | Angular Newsletter","description":"You've probably heard about the Ivy engine if you've been working with Angular for some time. Ivy is the code name of Angular's current compilation and rendering pipeline. Before Ivy, Angular used a two-step process: Building a project would compile all Typescript code to Javascript. Then HTML templates would get compiled at runtime in the","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/#website"},"breadcrumb":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/#breadcrumblist"},"author":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/author\/alcfeoh\/#author"},"creator":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/author\/alcfeoh\/#author"},"datePublished":"2023-09-21T05:00:00-07:00","dateModified":"2023-09-15T14:59:54-07:00"},{"@type":"WebSite","@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/#website","url":"https:\/\/www.angulartraining.com\/daily-newsletter\/","name":"Angular Newsletter","description":"Tutorials and updates about the Angular framework","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.angulartraining.com\/daily-newsletter\/#organization"}}]}},"aioseo_meta_data":{"post_id":"1491","title":null,"description":null,"keywords":[],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2023-09-15 21:45:02","updated":"2025-06-03 23:52:09","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/\" title=\"Angular\">Angular<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tWhat is the Ivy engine?\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.angulartraining.com\/daily-newsletter"},{"label":"Angular","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/angular\/"},{"label":"What is the Ivy engine?","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/"}],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1491","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=1491"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1491\/revisions"}],"predecessor-version":[{"id":1492,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1491\/revisions\/1492"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}