Ionic 7 Released! Migrate (& Convert Project) from Ionic 6 to Ionic 7 | Ionic 7 Uber Eats App
HTML-код
- Опубликовано: 5 авг 2024
- Hello Friends, Welcome Back to @CodingTechnyks. In this video, we are going to learn "How to Migrate from Ionic 6 to Ionic 7 | Convert Ionic 6 Project to Ionic 7 | Ionic 7 Uber Eats App" #ionic #angular for #pwa, #android & #ios | #capacitor #firebase
Features:
Migrate from Ionic 6 to Ionic 7
Modular Approach (like Ionic 6)
Standalone Approach
► Uber-Eats Clone App Series: • Ionic Uber Eats App cl...
► App Auth Screen Playlist: bit.ly/authScreenSeries
► Udemy Firebase Chat App Course for free: www.udemy.com/course/ionic-ch...
► 89-95% off on Udemy Courses
1. Ionic 6+ with NodeJs - Complete Beginner to Pro Course 2023
₹389 / $9.99 - till May 20, 2023
www.udemy.com/course/ionic-6-...
2. Ionic 6+ From Beginner to Advanced - Build Food Delivery App
₹389 / $9.99 - till May 20, 2023
www.udemy.com/course/ionic5-b...
► Finance App Series: • Ionic Finance App UI S...
► Source Code: github.com/Nykz/Ionic-7-Uber-...
► Social Media
Facebook: / codingtechnyks
Github: github.com/Nykz
Instagram: / codingtechnyks
Twitter: / codingtechnyks
Timestamp
00:00 - Intro
00:40 - What's new in IONIC 7
04:40 - How to update IONIC CLI
05:51 - Create New Projects IONIC 7
07:49 - Understand Ionic 7 File structure
12:26 - Migrate Uber Eats App from IONIC 6 - ionic 7
(MODULAR APPROACH)
19:06 - Working with Guards in ANGULAR 15
23:30 - Angular fire Package in IONIC 7
27:21 - Install Plugins using Capacitor
33:01 - Testing Ionic 7 Uber Eats App
33:20 - Replacement for app.module.ts
35:46 - Making a component Standalone
59:40 - Testing Ionic 7 App with Standalone approach
01:00:03 - Understand loadcomponent vs loadchildren
01:01:38 - Implement New Changes in ion-input
Thank You! I found the answer to my question about where to import HttpClientModule in ionic 7!
Use provideHttpClient() in providers there directly instead of HttpClient Module
Excellent resource to migrate projects from ionic 6 to ionic 7. Cool.😀😃😄
Thank u sir, I will always be grateful to you
Thanks for the explanation. However according to the official Ionic's migration guide and the breaking changes doc, there are also changes in several event emitters as well as in some styles. Things like changing forcing to use empty string or undefined for a value instead of null, or setting the default height of an element from "auto" to "100%" are not trivial at all considering these components are used along your entire application.
I also noticed that several styles have also changed but they are not mentioned anywhere. I know this because my application looks odd in multiple places just by upgrading from 6 to 7.
To be honest once you have a huge application like I do, there's no big win on upgrading to Ionic 7 compared to the enormous amount of time you have to consume on checking -and/or updating- your event emitters, styles that have changed in the shadow and testing afterwards on web, iOS and Android.
If I wasn't using Ionic already I wouldn't use it cause the backwards compatibility and -most important- the migration guide documentation reliability are almost nonexistent
I have upgraded bigger apps also
It takes at max a day to migrate
Styling is also similar not much of a difference
If you think that your app is not that easy to upgrade then don’t do it
Any version of ionic will still work easily, just the environment should be proper
nice video dude, i subscribe
This is a great video. Do you accept requests for future videos? If so, an ideal solution would be to build a P2P app that can be deployed to all 5 platforms, Android, iOS, Linux, Windows, and Mac. I guess you would combine Ionic with Electron to do this and for the P2P aspect you could use Hypercore Protocol, so that the app could communicate to other users of the same app without any need to go through a server. The future of Web 3.0 is peer to peer communications and I think a video of a few hours that takes developers from start to finish producing an app for the future would be extremely useful. It would be my bible.
Great topic, great idea
Sir, my version is Ionic 7.1.1 . Should i try ro install this specific one, 7.0.0 or it will work fine?
That’s perfectly fine to work with latest one, just use the standalone one
what about the card-io plugin plz in version ionic 6
I haven’t used any such plugin in this video
Is your query is related to how to work with that plugin
@@CodingTechnyks thank you for your response , i know this plugin exists for cordova but for capacitor i can t find any documentation :(
May be it’s not available, you can use the Cordova one with capacitor
On ionic 7 how do you take a photo using a phone and ensure it has a predefine height, width and minimal size before uploading to the server? I am using PWA capacitor.
Use camera plugin of capacitor, as far as I remember it has the option of providing width and height, check documentation once
@@CodingTechnyks That option does not work, it saves the size based on the camera quality of the phone. So phones with good camera takes a lot of time to upload while those with poor camera quality are faster
If you want high quality, it takes time for good phone, lower quality for quick response
@@CodingTechnyks I dont want high quality, i want to have a preset quality i.e. max size 300mb, max height 400px. Is that possible
Change value of quality then
is this project use ng modules or
standalone angular
Standalone
For Ngmodule, you can use the earlier one only. Initially Ionic 7 only had standalone so migrated to that