{"id":695,"date":"2017-12-04T14:32:18","date_gmt":"2017-12-04T09:02:18","guid":{"rendered":"http:\/\/www.concettolabs.com\/blog\/?p=695"},"modified":"2017-12-04T14:32:18","modified_gmt":"2017-12-04T09:02:18","slug":"angular-4-vs-angular-2-betterment-little-bitter-taste","status":"publish","type":"post","link":"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/","title":{"rendered":"Angular 4 vs Angular 2 \u2013 Betterment, but with little of a Bitter Taste"},"content":{"rendered":"<p>When we think about JavaScript, the first word that comes to our mind is <a href=\"https:\/\/www.concettolabs.com\/angular-development\" target=\"_blank\" rel=\"nofollow\"><strong><span style=\"text-decoration: underline;\">Angular JS<\/span><\/strong><\/a>. Not just because of its strong back-end pillar \u201cGoogle\u201d, who maintains it, but the framework itself has gained a lot of attention from the coders across the globe. If we look at the GitHub stats, there are approximately 1602 developers who contribute to Angular JS, which is one of the largest developers\u2019 communities across the different frontend frameworks.<\/p>\n<p>In the past few years, keeping in mind the rapid use of the framework, different versions have been released including the recent launch of much awaited Angular 4! The release of Angular 4 has taken a long lap after the release of Angular 2, which was released in September 2016. \u00a0So, being a developer, you might be juggling with Angular 4 vs Angular 2 and the question that comes in your mind is: Which one to go for?<\/p>\n<p>Of course, if we try to compare Angular 4 vs Angular 2 difference, there are some noticeable changes introduced in angular 4, but this time they have kept it a bit simple and in some way, it is similar to the version 2. This means if you\u2019re skilled in the previous version, but fed up with the <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.concettolabs.com\/blog\/comparative-study-angular-js-1-angular-js-2\/\" target=\"_blank\" rel=\"nofollow\"><strong>Angular 2 performance<\/strong><\/a><\/span>, then angular 4 will surely bring smile on your face.<\/p>\n<p>So, what are the things that make Angular 4 a better choice? You are working with version 2, but confused whether to go for the latest release or not? Well, let\u2019s have a quick comparison between the two releases to know more about Angular.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-697\" title=\"Angular 4 vs Angular 2\" src=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2017\/12\/Upgrade-Angular.jpg\" alt=\"Angular 4 vs Angular 2\" width=\"945\" height=\"378\" srcset=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2017\/12\/Upgrade-Angular.jpg 740w, https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2017\/12\/Upgrade-Angular-300x120.jpg 300w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Angular_4_vs_Angular_2_differences\"><\/span><strong>Angular 4 vs Angular 2 differences<\/strong>:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Angular 4 vs Angular 2<\/strong> \u2013 Application Size<\/li>\n<\/ul>\n<p>In terms of application size, the version 4 is on winning side. The code generated by the compiler in the version 2 is very large, which at the end makes the applications heavy in terms of size. The Angular team has considered this backlog and eliminated it in version 4. In Angular 4, they have reduced the code size significantly, up to 60%!!! So, the application size will be less as compared to that of previous version 2.<\/p>\n<ul>\n<li><strong>Template source maps<\/strong><\/li>\n<\/ul>\n<p>In earlier versions, as and when an issue arises within a template file, there were no source maps generated and thus, it was difficult to identify or troubleshoot the issues. With Angular 4, they\u2019ve started support of source map generation for the template files. So, now<\/p>\n<p>if you find errors originated from the template files, you will get the source maps generated for it.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/#Angular_4_vs_Angular_2_differences\" title=\"Angular 4 vs Angular 2 differences:\">Angular 4 vs Angular 2 differences:<\/a><\/li><\/ul><\/nav><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When we think about JavaScript, the first word that comes to our mind is Angular JS. Not just because of its strong back-end pillar \u201cGoogle\u201d, who maintains it, but the framework itself has gained a lot of attention from the coders across the globe. If we look at the GitHub stats, there are approximately 1602 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":696,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[40],"tags":[109,500,501,502],"class_list":["post-695","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to-guides","tag-angular-2","tag-angular-4","tag-angular-4-vs-angular-2","tag-angular-4-vs-angular-2-differences"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular 4 vs Angular 2 Betterment,but with little of Bitter Taste<\/title>\n<meta name=\"description\" content=\"We try to compare Angular 4 vs Angular 2 difference, there are some noticeable changes introduced in angular 4, but this time they have kept it a bit simple\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 4 vs Angular 2 Betterment,but with little of Bitter Taste\" \/>\n<meta property=\"og:description\" content=\"We try to compare Angular 4 vs Angular 2 difference, there are some noticeable changes introduced in angular 4, but this time they have kept it a bit simple\" \/>\n<meta property=\"og:url\" content=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/\" \/>\n<meta property=\"og:site_name\" content=\"concettolabs\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/manish.patel.710\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-04T09:02:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2017\/12\/imageedit_1_4286090761-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"945\" \/>\n\t<meta property=\"og:image:height\" content=\"532\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manish Patel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/withmanish\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manish Patel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/\",\"url\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/\",\"name\":\"Angular 4 vs Angular 2 Betterment,but with little of Bitter Taste\",\"isPartOf\":{\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2017\/12\/imageedit_1_4286090761-1.jpg\",\"datePublished\":\"2017-12-04T09:02:18+00:00\",\"dateModified\":\"2017-12-04T09:02:18+00:00\",\"author\":{\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/#\/schema\/person\/b27e0500ea2f536f7f0f5e7ab13566b9\"},\"description\":\"We try to compare Angular 4 vs Angular 2 difference, there are some noticeable changes introduced in angular 4, but this time they have kept it a bit simple\",\"breadcrumb\":{\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/#primaryimage\",\"url\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2017\/12\/imageedit_1_4286090761-1.jpg\",\"contentUrl\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2017\/12\/imageedit_1_4286090761-1.jpg\",\"width\":945,\"height\":532,\"caption\":\"Angular 4 vs Angular 2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular 4 vs Angular 2 \u2013 Betterment, but with little of a Bitter Taste\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/#website\",\"url\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/\",\"name\":\"concettolabs\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/#\/schema\/person\/b27e0500ea2f536f7f0f5e7ab13566b9\",\"name\":\"Manish Patel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2022\/03\/manish2-96x96.png\",\"contentUrl\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2022\/03\/manish2-96x96.png\",\"caption\":\"Manish Patel\"},\"description\":\"Manish Patel is a Co-Founder of Concetto Labs, a leading mobile app development company specialized in android and iOS app development. We provide a one-stop solution for all IT related services.\",\"sameAs\":[\"https:\/\/websitelaravel.concettoprojects.com\/blog\",\"https:\/\/www.facebook.com\/manish.patel.710\",\"https:\/\/in.linkedin.com\/in\/manishpatel2509\",\"https:\/\/x.com\/https:\/\/twitter.com\/withmanish\"],\"url\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/author\/manish-patel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular 4 vs Angular 2 Betterment,but with little of Bitter Taste","description":"We try to compare Angular 4 vs Angular 2 difference, there are some noticeable changes introduced in angular 4, but this time they have kept it a bit simple","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Angular 4 vs Angular 2 Betterment,but with little of Bitter Taste","og_description":"We try to compare Angular 4 vs Angular 2 difference, there are some noticeable changes introduced in angular 4, but this time they have kept it a bit simple","og_url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/","og_site_name":"concettolabs","article_author":"https:\/\/www.facebook.com\/manish.patel.710","article_published_time":"2017-12-04T09:02:18+00:00","og_image":[{"width":945,"height":532,"url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2017\/12\/imageedit_1_4286090761-1.jpg","type":"image\/jpeg"}],"author":"Manish Patel","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/withmanish","twitter_misc":{"Written by":"Manish Patel","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/","url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/","name":"Angular 4 vs Angular 2 Betterment,but with little of Bitter Taste","isPartOf":{"@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/#primaryimage"},"image":{"@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/#primaryimage"},"thumbnailUrl":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2017\/12\/imageedit_1_4286090761-1.jpg","datePublished":"2017-12-04T09:02:18+00:00","dateModified":"2017-12-04T09:02:18+00:00","author":{"@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/#\/schema\/person\/b27e0500ea2f536f7f0f5e7ab13566b9"},"description":"We try to compare Angular 4 vs Angular 2 difference, there are some noticeable changes introduced in angular 4, but this time they have kept it a bit simple","breadcrumb":{"@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/#primaryimage","url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2017\/12\/imageedit_1_4286090761-1.jpg","contentUrl":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2017\/12\/imageedit_1_4286090761-1.jpg","width":945,"height":532,"caption":"Angular 4 vs Angular 2"},{"@type":"BreadcrumbList","@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/angular-4-vs-angular-2-betterment-little-bitter-taste\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/websitelaravel.concettoprojects.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular 4 vs Angular 2 \u2013 Betterment, but with little of a Bitter Taste"}]},{"@type":"WebSite","@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/#website","url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/","name":"concettolabs","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/websitelaravel.concettoprojects.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/#\/schema\/person\/b27e0500ea2f536f7f0f5e7ab13566b9","name":"Manish Patel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2022\/03\/manish2-96x96.png","contentUrl":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2022\/03\/manish2-96x96.png","caption":"Manish Patel"},"description":"Manish Patel is a Co-Founder of Concetto Labs, a leading mobile app development company specialized in android and iOS app development. We provide a one-stop solution for all IT related services.","sameAs":["https:\/\/websitelaravel.concettoprojects.com\/blog","https:\/\/www.facebook.com\/manish.patel.710","https:\/\/in.linkedin.com\/in\/manishpatel2509","https:\/\/x.com\/https:\/\/twitter.com\/withmanish"],"url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/author\/manish-patel\/"}]}},"_links":{"self":[{"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/posts\/695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/comments?post=695"}],"version-history":[{"count":0,"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/posts\/695\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/media\/696"}],"wp:attachment":[{"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/media?parent=695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/categories?post=695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/tags?post=695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}