{"id":4505,"date":"2021-11-24T06:23:27","date_gmt":"2021-11-24T06:23:27","guid":{"rendered":"https:\/\/techpearl.io\/?p=4505"},"modified":"2024-02-14T13:13:48","modified_gmt":"2024-02-14T13:13:48","slug":"migrating-ionic-3-to-ionic-4-and-ionic-5","status":"publish","type":"post","link":"https:\/\/techpearl.com\/1719395789229\/migrating-ionic-3-to-ionic-4-and-ionic-5\/","title":{"rendered":"Migrating IONIC 3 To IONIC 4 And IONIC 5"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4505\" class=\"elementor elementor-4505\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-ca55e79 elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"ca55e79\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5f69425 jltma-glass-effect-no\" data-id=\"5f69425\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d7bb818 jltma-glass-effect-no elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading\" data-id=\"d7bb818\" data-element_type=\"widget\" data-widget_type=\"theme-post-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/techpearl.com\/1719395789229\/migrating-ionic-3-to-ionic-4-and-ionic-5\/\">Migrating IONIC 3 To IONIC 4 And IONIC 5<\/a><\/h1>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3956b11 elementor-align-left jltma-glass-effect-no elementor-widget elementor-widget-post-info\" data-id=\"3956b11\" data-element_type=\"widget\" data-widget_type=\"post-info.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<ul class=\"elementor-inline-items elementor-icon-list-items elementor-post-info\">\n\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-repeater-item-32351d2 elementor-inline-item\" itemprop=\"author\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-author\">\n\t\t\t\t\t\t\t\t\t\tAishwarya Patil\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3732187 bdt-ss-btns-view-icon bdt-ss-btns-shape-rounded bdt-ss-btns-align-left bdt-ep-grid-0 bdt-ss-btns-style-flat bdt-ss-btns-color-original jltma-glass-effect-no elementor-widget elementor-widget-bdt-social-share\" data-id=\"3732187\" data-element_type=\"widget\" data-widget_type=\"bdt-social-share.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"bdt-social-share bdt-ep-grid\">\n\t\t\t\t\t\t\t<div class=\"bdt-social-share-item bdt-ep-grid-item\">\n\t\t\t\t\t<div class=\"bdt-ss-btn bdt-ss-linkedin\" data-social=\"linkedin\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"bdt-ss-icon\">\n\t\t\t\t\t\t\t\t<i class=\"ep-linkedin\"><\/i>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"bdt-social-share-item bdt-ep-grid-item\">\n\t\t\t\t\t<div class=\"bdt-ss-btn bdt-ss-twitter\" data-social=\"twitter\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"bdt-ss-icon\">\n\t\t\t\t\t\t\t\t<i class=\"ep-twitter\"><\/i>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"bdt-social-share-item bdt-ep-grid-item\">\n\t\t\t\t\t<div class=\"bdt-ss-btn bdt-ss-facebook\" data-social=\"facebook\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"bdt-ss-icon\">\n\t\t\t\t\t\t\t\t<i class=\"ep-facebook\"><\/i>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-07ef6b9 elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"07ef6b9\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f5bb6c9 jltma-glass-effect-no\" data-id=\"f5bb6c9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-96ce6ac jltma-glass-effect-no elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image\" data-id=\"96ce6ac\" data-element_type=\"widget\" data-widget_type=\"theme-post-featured-image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2240\" height=\"1260\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/Migrating-IONIC-3-To-IONIC-4-And-IONIC-5-1.jpg\" class=\"attachment-full size-full\" alt=\"Migrating IONIC 3 To IONIC 4 And IONIC 5 1\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/Migrating-IONIC-3-To-IONIC-4-And-IONIC-5-1.jpg 2240w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/Migrating-IONIC-3-To-IONIC-4-And-IONIC-5-1-300x169.jpg 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/Migrating-IONIC-3-To-IONIC-4-And-IONIC-5-1-1024x576.jpg 1024w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/Migrating-IONIC-3-To-IONIC-4-And-IONIC-5-1-768x432.jpg 768w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/Migrating-IONIC-3-To-IONIC-4-And-IONIC-5-1-1536x864.jpg 1536w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/Migrating-IONIC-3-To-IONIC-4-And-IONIC-5-1-2048x1152.jpg 2048w\" sizes=\"auto, (max-width: 2240px) 100vw, 2240px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-c9c387f elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"c9c387f\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9319366 jltma-glass-effect-no\" data-id=\"9319366\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3378a1f jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"3378a1f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Ionic framework is an open-source framework that is available under the MIT License for the development of hybrid mobile and desktop applications. It uses web technologies like HTML, CSS, Javascript along with javascript frameworks that are Angular, React, and Vue. It is a single codebase running on all mobile and web platforms.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27c79f1 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"27c79f1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><a href=\"https:\/\/ionicframework.com\/blog\/introducing-ionic-4-ionic-for-everyone\/\" target=\"_blank\" rel=\"noopener\">Ionic 4<\/a> was released in January 2019. Ionic 4 had a considerable change in the Syntax of the Ionic Angular codebase along with it also added official support for React, Vue, and web components.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c993892 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"c993892\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Note: There is not much difference between Ionic 4 and Ionic 5 syntax. I will be referring to Ionic 4 in this article, but you can use the same article to move to Ionic 5.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-70b3877 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"70b3877\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>To get started with Ionic 4 you can either install or update the Ionic CLI and then you can start the application.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7621497 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"7621497\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1258\" height=\"124\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img1-9.png\" class=\"attachment-full size-full\" alt=\"img1 9\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img1-9.png 1258w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img1-9-300x30.png 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img1-9-1024x101.png 1024w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img1-9-768x76.png 768w\" sizes=\"auto, (max-width: 1258px) 100vw, 1258px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df07f16 jltma-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"df07f16\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Migrating from Ionic 3.0 to 4.0<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2bd16b8 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"2bd16b8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The new Ionic change has significant advantages over Ionic 3. The Ionic framework has entirely revamped from scratch using standard web API\u2019s and each component is packaged as a web component. It is always a good approach to initiate the migration process from scratch by creating a new project for your application, rather than trying to enhance the existing application.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-1620353 elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"1620353\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2847cdb jltma-glass-effect-no\" data-id=\"2847cdb\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d09645d jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"d09645d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/techpearl.com\/1719395789229\/contact-us\/\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"220\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/mobile.jpg\" class=\"attachment-full size-full\" alt=\"mobile\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/mobile.jpg 1024w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/mobile-300x64.jpg 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/mobile-768x165.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68a6b4a jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"68a6b4a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ol><li>Firstly before migrating to any framework, we need to familiarize ourselves with the changes that happened so that are aware before hand of what changes has to be done in our application. You can always refer Ionic framework\u2019s official page.<br \/>Now let\u2019s get started with the migration. Make sure your Ionic CLI is updated. Let\u2019s create a new Ionic4 application which is a blank starter and then copy all your code in the relevant folder one by one. Make sure you upgrade your Angular version too so that we get to experience new features of Angular and Ionic 4.<\/li><li>This approach is suitable when there is a notable change in the structure of the project, Ionic 4\u2019s project structure is fully altered. Now your whole code will reside within the app folder of your project unlike Ionic 3 where all the code was in the src folder and not in the app folder.<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a37e0d jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"1a37e0d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Ionic 3 project folder structure:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5a1e4f jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"a5a1e4f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"304\" height=\"568\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img2-8.png\" class=\"attachment-full size-full\" alt=\"img2 8\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img2-8.png 304w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img2-8-161x300.png 161w\" sizes=\"auto, (max-width: 304px) 100vw, 304px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3353969 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"3353969\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Ionic 4 project folder structure:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccb8ce7 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"ccb8ce7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"396\" height=\"826\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img3-8.png\" class=\"attachment-full size-full\" alt=\"img3 8\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img3-8.png 396w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img3-8-144x300.png 144w\" sizes=\"auto, (max-width: 396px) 100vw, 396px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51b3b9e jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"51b3b9e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>You may get many syntax errors once you copy all your code and run the project this is because Ionic 4 uses an upgraded version of Angular wherein there are several changes. But we will explore further how to solve individually.<br \/>You need to copy files in their particular folder. This will help in categorizing the files and keeping the structure intact. For instance, service files should be saved under the service folder same as pipe files should be saved under the pipes folder, page files should be saved under the pages folder, components should be saved under components, and so on. You might also need to rename the files since the nomenclature has changed in Ionic 4.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c40635 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"1c40635\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Nomenclature in Ionic 3:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f9c557 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"7f9c557\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"342\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img4-5.png\" class=\"attachment-full size-full\" alt=\"img4 5\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img4-5.png 340w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img4-5-298x300.png 298w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img4-5-150x150.png 150w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f2f7ae jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"8f2f7ae\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\tNaming practice in Ionic 4:\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-120e802 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"120e802\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"322\" height=\"330\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img5-3.png\" class=\"attachment-full size-full\" alt=\"img5 3\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img5-3.png 322w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img5-3-293x300.png 293w\" sizes=\"auto, (max-width: 322px) 100vw, 322px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c814757 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"c814757\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>3. The 3rd step will be the important one and i.e. installing dependencies. You need to install all the dependencies which you have added to your Ionic 3 application. After you copy the files from the Ionic 3 project to Ionic 4 and you run the project by initiating an Ionic serve you\u2019ll get a bunch of errors in which some of the errors will be related to the missing packages from your Ionic 4 project. You have to install all the missing dependencies by doing the following &#8211; either add the package in your package.json and run the following command:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e4db5c5 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"e4db5c5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1162\" height=\"84\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img6-2.png\" class=\"attachment-full size-full\" alt=\"img6 2\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img6-2.png 1162w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img6-2-300x22.png 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img6-2-1024x74.png 1024w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img6-2-768x56.png 768w\" sizes=\"auto, (max-width: 1162px) 100vw, 1162px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94cdbd4 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"94cdbd4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\tor you can run the below command\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-caca868 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"caca868\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1162\" height=\"88\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img7-3.png\" class=\"attachment-full size-full\" alt=\"img7 3\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img7-3.png 1162w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img7-3-300x23.png 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img7-3-1024x78.png 1024w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img7-3-768x58.png 768w\" sizes=\"auto, (max-width: 1162px) 100vw, 1162px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-992fa3f jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"992fa3f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Make sure you add the relevant packages since a few of the package names might have changed.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e16db7 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"3e16db7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>4. Next is to add your Angular routes because in Ionic 3 the routes were completely different. Here you will have to add all your routes in the app-routing.module.ts file in order to travel from one page to another. Your route navigation code in Ionic 4 will also be different from Ionic 3\u2019s Push and Pop. This file will be imported into the app.module.ts file.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e1b3e27 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"e1b3e27\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Your app-routing.module.ts file will look like this:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1370f34 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"1370f34\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1156\" height=\"610\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img8-3.png\" class=\"attachment-full size-full\" alt=\"img8 3\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img8-3.png 1156w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img8-3-300x158.png 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img8-3-1024x540.png 1024w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img8-3-768x405.png 768w\" sizes=\"auto, (max-width: 1156px) 100vw, 1156px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a81c62 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"1a81c62\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ol><li style=\"list-style-type: none;\"><ol><li class=\"blog-li\">At this point when you run your code, you might get many syntax errors. So what you have to do is read the errors carefully and go through each page, each service, each component and change the code\/syntax accordingly and ensure the application up and running. You even have to change your ionic tags in an HTML file.<p>Here are few changes:<\/p><\/li><\/ol><\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eadfe22 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"eadfe22\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ol><li>In service file the injectable decorator has been changed from @Injectable() to @Injectable({provideIn:\u2019root&#8217;})<\/li><li>&lt; button ion-button&gt;Click Me &lt; \/button&gt; Ionic 3 syntax &lt; ion-button&gt;Click Me&lt; \/ion-button&gt; Ionic 4 syntax<\/li><li>ion-navbar is changed to ion-toolbar<\/li><li>ion-option is changed to ion-select-option<\/li><li>Now all the inline styles need to be wrapped inside class attribute e.g. &lt; ion-button class=\u201dion-padding\u201d&gt;Click Me&lt; \/ion-button<\/li><li>@IonicPage decorator has been removed in Ionic 4<\/li><li>The col size is now written like size=\u201d1\u201d and if you want to add a position to any element add it like position=\u201dfloating\u201d.<\/li><li>Angular lifecycle hooks like ngOnInit, ngOnDestroy has replaced Ionic lifecycles.<\/li><li>In Ionic 4, the package name is @ionic\/angular. While migrating an app, update the imports from ionic-angular to @ionic\/angular.<\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5131bc0 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"5131bc0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>6. Now will see changes related to CSS. In ionic 4 the main css file is changed from the app.scss to global.scss. Copy all the CSS from app.scss to global.scss. The custom CSS\/theming works slightly differently in Ionic 4. Ionic 4 uses CSS4 variable instead of SASS variables. You need to change your variable.scss file to change the variable declaration to CSS4 variables.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-aa46a90 elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"aa46a90\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c0cd64e jltma-glass-effect-no\" data-id=\"c0cd64e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-941e93b jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"941e93b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"864\" height=\"96\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img9-2.png\" class=\"attachment-full size-full\" alt=\"img9 2\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img9-2.png 864w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img9-2-300x33.png 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2021\/11\/img9-2-768x85.png 768w\" sizes=\"auto, (max-width: 864px) 100vw, 864px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-bfcec57 elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"bfcec57\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7c8ddb4 jltma-glass-effect-no\" data-id=\"7c8ddb4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d60483b jltma-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"d60483b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-feff562 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"feff562\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>If you follow the above steps then your fresh Ionic 4 application should be up and running. The quantum of changes required varies according to the app primarily. You might also need to update your Cordova plugins which you have used in your application. You can always refer to the Ionic 4 Official Page for syntax changes\/plugin changes.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0682de9 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"0682de9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><a href=\"https:\/\/techpearl.com\/1719395789229\/contact-us\/\">Contact us<\/a> to find out how to implement Ionic 4 and 5 for your applications.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-831dddd bdt-ss-btns-view-icon bdt-ss-btns-shape-rounded bdt-ss-btns-align-left bdt-ep-grid-0 bdt-ss-btns-style-flat bdt-ss-btns-color-original jltma-glass-effect-no elementor-widget elementor-widget-bdt-social-share\" data-id=\"831dddd\" data-element_type=\"widget\" data-widget_type=\"bdt-social-share.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"bdt-social-share bdt-ep-grid\">\n\t\t\t\t\t\t\t<div class=\"bdt-social-share-item bdt-ep-grid-item\">\n\t\t\t\t\t<div class=\"bdt-ss-btn bdt-ss-linkedin\" data-social=\"linkedin\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"bdt-ss-icon\">\n\t\t\t\t\t\t\t\t<i class=\"ep-linkedin\"><\/i>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"bdt-social-share-item bdt-ep-grid-item\">\n\t\t\t\t\t<div class=\"bdt-ss-btn bdt-ss-twitter\" data-social=\"twitter\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"bdt-ss-icon\">\n\t\t\t\t\t\t\t\t<i class=\"ep-twitter\"><\/i>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"bdt-social-share-item bdt-ep-grid-item\">\n\t\t\t\t\t<div class=\"bdt-ss-btn bdt-ss-facebook\" data-social=\"facebook\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"bdt-ss-icon\">\n\t\t\t\t\t\t\t\t<i class=\"ep-facebook\"><\/i>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-f12c6af elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"f12c6af\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f3aaad2 jltma-glass-effect-no\" data-id=\"f3aaad2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8619070 jltma-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"8619070\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Read More Articles<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-13725a6 elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"13725a6\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b3fa1e0 jltma-glass-effect-no\" data-id=\"b3fa1e0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ebdd849 elementor-grid-3 elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-posts--thumbnail-top elementor-card-shadow-yes elementor-posts__hover-gradient jltma-glass-effect-no elementor-widget elementor-widget-posts\" data-id=\"ebdd849\" data-element_type=\"widget\" data-settings=\"{&quot;cards_row_gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:46,&quot;sizes&quot;:[]},&quot;cards_columns&quot;:&quot;3&quot;,&quot;cards_columns_tablet&quot;:&quot;2&quot;,&quot;cards_columns_mobile&quot;:&quot;1&quot;}\" data-widget_type=\"posts.cards\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-posts-container elementor-posts elementor-posts--skin-cards elementor-grid\">\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-20585 post type-post status-publish format-standard has-post-thumbnail hentry category-blog\">\n\t\t\t<div class=\"elementor-post__card\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/techpearl.com\/1719395789229\/breaking-the-api-mold\/\">\n\t\t\t<div class=\"elementor-post__thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2025\/09\/14-768x432.jpg\" class=\"attachment-medium_large size-medium_large\" alt=\"\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2025\/09\/14-768x432.jpg 768w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2025\/09\/14-300x169.jpg 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2025\/09\/14.jpg 1024w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__badge\">blog<\/div>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/techpearl.com\/1719395789229\/breaking-the-api-mold\/\">\n\t\t\t\tBreaking the API Mold: A new era of AI-Driven Customer Journeys\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>React vs. Angular: Choosing the Right Framework for Your Project In the fast- paced world of financial services, speed, accuracy and scalability are critical. Yet,<\/p>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-author\">\n\t\t\tSiddharth Singh\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-20556 post type-post status-publish format-standard has-post-thumbnail hentry category-blog\">\n\t\t\t<div class=\"elementor-post__card\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/techpearl.com\/1719395789229\/react-vs-angular\/\">\n\t\t\t<div class=\"elementor-post__thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2025\/07\/6-1-768x432.jpg\" class=\"attachment-medium_large size-medium_large\" alt=\"6 1\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2025\/07\/6-1-768x432.jpg 768w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2025\/07\/6-1-300x169.jpg 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2025\/07\/6-1.jpg 1024w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__badge\">blog<\/div>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/techpearl.com\/1719395789229\/react-vs-angular\/\">\n\t\t\t\tReact vs. Angular: Choosing the Right Framework for Your Project\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>React vs. Angular: Choosing the Right Framework for Your Project In the world of frontend development, React and Angular are two of the most popular<\/p>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-author\">\n\t\t\tTrupti Panchal\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-20547 post type-post status-publish format-standard has-post-thumbnail hentry category-blog\">\n\t\t\t<div class=\"elementor-post__card\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/techpearl.com\/1719395789229\/amazon-q-for-developers\/\">\n\t\t\t<div class=\"elementor-post__thumbnail\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"432\" src=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2025\/07\/6-768x432.jpg\" class=\"attachment-medium_large size-medium_large\" alt=\"6\" srcset=\"https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2025\/07\/6-768x432.jpg 768w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2025\/07\/6-300x169.jpg 300w, https:\/\/techpearl.com\/1719395789229\/wp-content\/uploads\/2025\/07\/6.jpg 1024w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__badge\">blog<\/div>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/techpearl.com\/1719395789229\/amazon-q-for-developers\/\">\n\t\t\t\tAmazon Q for Developers: Level Up Your Productivity with AI\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Amazon Q Developer is AWS&#8217;s new generative AI assistant purpose-built to transform the workflow of software developers and IT professionals. Unlike generic AI chatbots, Amazon<\/p>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-author\">\n\t\t\tVinod Charan Kumar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/article>\n\t\t\t\t<\/div>\n\n\n\t\t\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-82f3b70 elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"82f3b70\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-96be1bf jltma-glass-effect-no\" data-id=\"96be1bf\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-113bb00 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"113bb00\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>\u00a0Contact Us <span style=\"color: #f26a22;\">Now<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ca1eb3 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"1ca1eb3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Talk to us to find out about our flexible engagement models.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-698388c elementor-align-center elementor-tablet-align-center elementor-mobile-align-center jltma-glass-effect-no elementor-widget elementor-widget-button\" data-id=\"698388c\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a href=\"#\" class=\"elementor-button-link elementor-button elementor-size-md\" role=\"button\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Get Started<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ionic framework is an open-source framework that is available under the MIT License for the development of hybrid mobile and desktop applications. It uses web technologies like HTML, CSS, Javascript along with javascript frameworks that are Angular, React, and Vue. It is a single codebase running on all mobile and web platforms. Ionic 4 was &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/techpearl.com\/1719395789229\/amazon-q-for-developers\/\"> <span class=\"screen-reader-text\">Amazon Q for Developers: Level Up Your Productivity with AI<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":5,"featured_media":10834,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[63,9,21,23],"tags":[57,52],"class_list":["post-4505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ionic","category-software-development","category-web-development","tag-ionic","tag-software-development"],"_links":{"self":[{"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/posts\/4505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/comments?post=4505"}],"version-history":[{"count":118,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/posts\/4505\/revisions"}],"predecessor-version":[{"id":17143,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/posts\/4505\/revisions\/17143"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/media\/10834"}],"wp:attachment":[{"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/media?parent=4505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/categories?post=4505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techpearl.com\/1719395789229\/wp-json\/wp\/v2\/tags?post=4505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}