I tried using AI tools for my Angular 17 migration and ran into issues. This video helped me resolve them. dont depend on AI tools, but detailed tutorials like this are essential. Thanks!
This video helped me to migrate easily my app to 17 standalone. Thanks a lot for all the tips. Specially these angular core commands (control-flow and standalone)
Thank you. Currently I don't have any application in v7. The migration process is same. Try to convert from v7 to v8 and then to 9, 10 and 11. If you face any error, please let me know. I will help.
Great tutorial!! Although I have few queries How to take care of the child routes? How does the lazy loading works if we have provided the routes in main.ts?
hii bro actullay i updated my application from v15 to v17 and resolved the errors as well .now iam getting blank screen and iam using node version 20.10.can u help me on this?
while migrating to standalone components. after the 3rd and last step. i am getting blank white screen when serving the app. no build errors and no console errors. can you throw some light on what can be the issue?. BTW great video.
If there are no errors it is difficult to find the root cause. Please check whether the routes and I router outlet are correct after migration. Also instead of the home page try navigating to some other page directly using the url.
@@WebTechTalk tried navigating to other page through url but still blank white page. What things i need to check to find the issue?. Upto the bootstrapping step the app is working
In my project i have module defined for respective module in the application. In each module i have routes defined for the components inside it. In this case how can i remove the module and use the routes?. In a component when i write providerouter inside providers giving me error
Don't need to provide your routes in each component. You can have separate route files for each logical module and then you can provide in app config file. Please see this video, you will get an idea. th-cam.com/video/RQFp-3bJ6IQ/w-d-xo.html
Will you share the commands for upgrade flow and standalone. Also will you please share will there be many circumstances to upgrade till 17 because I have very big project. Any command that it will change automatically with the updated tags in my files.
ng g @angular/core:control-flow - This is to change the old control flow to new syntax. ng g @angular/core:standalone - This is to convert your app to standalone. This will remove modules and make all components standalone.
ng g @angular/core:standalone ? Choose the type of migration: Convert all components, directives and pipes to standalone ? Which path in your project should be migrated? . Maximum call stack size exceeded
I have not faced this issue before, however when I google, I found that this error is because of some circular dependencies in your application between components, pipes, directives etc. They are suggesting to find that circular dependencies and resolve that. Otherwise, instead of using dot, using --path to specify a smaller folder to migrate. So that you can find in which folder you are facing that circular dependency. And then, you can manually migrate that particular folder.
Hi sir, I have migrated to angular 17,with no compliation errors,but when I run the project,the project appears blank on localhost. What should I do. Is it necessary to make the project standalone and app.routing?
@@adithyachitturi3246 If your header component selector is "app-header", then search in your workspace, in how many components you have referred. I am suspecting you should have placed the app-header in both app component and other components also.
Yes I installed the compatible version only for 16 but I don't why the error is coming up , finally I give skiplibcheack true in config.json file then it started working I don't know if it's a better approach or not
@@Dineshkumar-sw8ux If it is working after enabling skiplibcheck, the issue is definitely because of compatibility issue with the dependencies. skiplibcheck should be the last option to resolve this issue.
I updated from angular 15 to 16 , when i do ng s I'm getting lot of errors . Can't bind to 'formGroup' since it like ng model errors . can you tell me what to do for this
I have not faced this before. Make sure you are using the compatible version of the mat library. Also check mat library documentation for any implementation changes.
This is what happens when someone just make video with half information. MDC material based components are introduced in material 15. To fix those style material upgrade will automatically do that and somewhere if its lefts you need to manually change also if your style is still not fixing then you need to dive deep into by changing all the style manually to mdc based. Hope this helps
In the new control flow syntax, we should not use let inside for block. You can remove that to fix this. A more detailed video on the new control flow syntax is coming soon.
Merci beaucoup. Bien sûr que je le ferai. Avez-vous eu la chance de voir ça. th-cam.com/video/7_SzJnZy_kg/w-d-xo.html C’est en utilisant Angular 17. Il n’y aura pas de grande différence entre 17 et 18.
If your Angular 16 application is not standalone and if you migrate, it will migrate as a non-standalone application only. Even in this video you can see that.
This video does not talk about any components migration. Since there are a number of changes happened related to components in Angular 15, it will be be helpful
I got this error executing the first command: ng update @angular/core@12 @angular/cli@12 ----- Node.js version v14.21.3 detected. The Angular CLI requires a minimum Node.js version of v18.19. ---- i have node v14.21.3 and angular cli 11.2.1 Any suggestions?
@@WebTechTalk The problem was my version of Nodejs, I installed the node version manager (nvm), installed the compatible version and configured it to use it from nvm, now I have the Angular 17 version updated!! thanks for the video!
@@guillermoboh8479 Actually for angular 12, node 18 is not needed. That is why I asked for the version in package json. Anyways it is good to hear that you have resolved.
I tried using AI tools for my Angular 17 migration and ran into issues. This video helped me resolve them. dont depend on AI tools, but detailed tutorials like this are essential. Thanks!
@@kishorekumarreddykadapa2119 Thank you so much 🙏
he is life saver
Happy to hear this
This video helped me to migrate easily my app to 17 standalone. Thanks a lot for all the tips. Specially these angular core commands (control-flow and standalone)
Happy to hear that this video helped you in migrating your angular app.
8:00 -- 17V syntax changing
Sorry I didn't get you
best one and very crystel clear
Thank you so much
Superb video dude. Thank you so much.
Thank you bro.
nice explanation
Thank you 🙏
nice work! very detailed step by step guide.
Thank you so much
goooooooooooooooood. exelent ....
Thank you
Thanks for the great video, its clear all my queries :)
Thank you so much 🙏
Very nice explaination sir. Could you please share the video for migrating angular project v7 to v17
Thank you. Currently I don't have any application in v7. The migration process is same. Try to convert from v7 to v8 and then to 9, 10 and 11. If you face any error, please let me know. I will help.
Great tutorial!!
Although I have few queries
How to take care of the child routes?
How does the lazy loading works if we have provided the routes in main.ts?
Child routes and lazy loading works similar to previous versions.
Clear and clarity explanation
Thank you 🙏
Well done, it helped me in my work. Keep it up
Thank you :)
thanks alot. quick one and very helpful
Thank you
Excellent content. Thank you very much!🤩
Thank you so much
hii bro actullay i updated my application from v15 to v17 and resolved the errors as well .now iam getting blank screen and iam using node version 20.10.can u help me on this?
Hi bro. First you have to check for browser console logs.
Excellent 🤗
Thank you 👍
while migrating to standalone components. after the 3rd and last step. i am getting blank white screen when serving the app. no build errors and no console errors. can you throw some light on what can be the issue?. BTW great video.
If there are no errors it is difficult to find the root cause. Please check whether the routes and I router outlet are correct after migration. Also instead of the home page try navigating to some other page directly using the url.
@@WebTechTalk tried navigating to other page through url but still blank white page. What things i need to check to find the issue?. Upto the bootstrapping step the app is working
@@RaghuRam-y8y Check in your app.config.ts file, the routes have been provided using provideRouter function.
In my project i have module defined for respective module in the application. In each module i have routes defined for the components inside it. In this case how can i remove the module and use the routes?. In a component when i write providerouter inside providers giving me error
Don't need to provide your routes in each component. You can have separate route files for each logical module and then you can provide in app config file. Please see this video, you will get an idea.
th-cam.com/video/RQFp-3bJ6IQ/w-d-xo.html
Could you please make one which use angular material ui and ngrx store ? 11 to 17/18 ?
@@thankikaushik sure
I have same requirement. My project is in angular 9
Excellent 🎉 explanation
@@rajeshbt1772 Thank you
Is it necessary to downgrade the node version to 14 to upgrade my angular application from 11 to 17. My current node version is 20
@@dilnacorreya5510 it's good to downgrade and upgrade it when it reaches the compatible version. Is your angular 11 code running in node 20?
Super🎉
Thank you 🙏
Will you share the commands for upgrade flow and standalone. Also will you please share will there be many circumstances to upgrade till 17 because I have very big project. Any command that it will change automatically with the updated tags in my files.
ng g @angular/core:control-flow - This is to change the old control flow to new syntax.
ng g @angular/core:standalone - This is to convert your app to standalone. This will remove modules and make all components standalone.
Nice video! Thank you!!!
Thank you 😊
ng g @angular/core:standalone
? Choose the type of migration: Convert all components, directives and pipes to standalone
? Which path in your project should be migrated? .
Maximum call stack size exceeded
I have not faced this issue before, however when I google, I found that this error is because of some circular dependencies in your application between components, pipes, directives etc. They are suggesting to find that circular dependencies and resolve that. Otherwise, instead of using dot, using --path to specify a smaller folder to migrate. So that you can find in which folder you are facing that circular dependency. And then, you can manually migrate that particular folder.
how come angular v17 is working on your nodejs version 14?
I think you have skipped that part. I upgraded my node js version to 18 before upgrading local angular version from 15 to 16.
Hi sir,
I have migrated to angular 17,with no compliation errors,but when I run the project,the project appears blank on localhost. What should I do. Is it necessary to make the project standalone and app.routing?
Are you seeing any errors in the browser console?
@@WebTechTalk hi , I have cleared the error in the console,but I encountered another problem,the header is displaying twice. Can u help me please.
@@adithyachitturi3246 is it getting doubled in all the pages?
@@WebTechTalk yes sir,for all the pages.
@@adithyachitturi3246 If your header component selector is "app-header", then search in your workspace, in how many components you have referred. I am suspecting you should have placed the app-header in both app component and other components also.
I recently did migration from angular 12 up to 16 in that I am facing issue at angular 16
Node/@angular/common/common.d.ts file error TS2314;
@@Dineshkumar-sw8ux error seems to be more general. Make sure you have updated all your dependencies to the compatible version
Yes I installed the compatible version only for 16 but I don't why the error is coming up , finally I give skiplibcheack true in config.json file then it started working I don't know if it's a better approach or not
@@Dineshkumar-sw8ux If it is working after enabling skiplibcheck, the issue is definitely because of compatibility issue with the dependencies. skiplibcheck should be the last option to resolve this issue.
I updated from angular 15 to 16 , when i do ng s I'm getting lot of errors . Can't bind to 'formGroup' since it like ng model errors . can you tell me what to do for this
Are you using standalone components now?
@@WebTechTalk no I'm not using any standalone components, before converting my project into standalone I'm getting these errors
@@WebTechTalk I think the 16th version is only supporting standalone
@@RavuruIndu No even version 17 supports both standalone and non-standalone
@@RavuruIndu may be some compatibility issues with the dependencies
I updated angular 14 to 17, on 17 mat library (style) related changes are broke how to fix this, if you know can you tell me ?
I have not faced this before. Make sure you are using the compatible version of the mat library. Also check mat library documentation for any implementation changes.
This is what happens when someone just make video with half information. MDC material based components are introduced in material 15. To fix those style material upgrade will automatically do that and somewhere if its lefts you need to manually change also if your style is still not fixing then you need to dive deep into by changing all the style manually to mdc based. Hope this helps
@@kartikeykamal4809 yes, most of components automatically upgrade, and also I manually upgrade some components, Thank you for your reply🙏
awsome
Thank you 😊
Hi bro,
Is there any steps to migrate from angular 7 to angular 18
Could u make an video
The approach is similar bro. If you get a specific error let me know
@@WebTechTalk ok bro
Getting error while migrate A16 -A17 error NG5002: Parser Error: Unexpected token 'let' while migrate contol flow in angular 17
In the new control flow syntax, we should not use let inside for block. You can remove that to fix this. A more detailed video on the new control flow syntax is coming soon.
Thank you so much... waiting for new video
merci pour video
pourrais tu faire une video angular 18 ssr stp
Merci beaucoup. Bien sûr que je le ferai. Avez-vous eu la chance de voir ça.
th-cam.com/video/7_SzJnZy_kg/w-d-xo.html
C’est en utilisant Angular 17. Il n’y aura pas de grande différence entre 17 et 18.
error shows like this : Package '@angular/core' is not a dependency.
Use --force or --legacy-peer-deps along with your update or install or uninstall command
Hii sir, is there any way to migrate to 17 , without making my project standalone
If your Angular 16 application is not standalone and if you migrate, it will migrate as a non-standalone application only. Even in this video you can see that.
@@WebTechTalk but after migrating to angular 16 , after running my project I'm getting lot of ng module errors and there are no standalone components
@@RileyYang-pu9oe May I know what kind of errors you are getting
thanks
Thank you
Could you please share the URL which your following or any one else ???
This one?
angular.dev/update-guide
Can you share Github url
github.com/freelancer-surender/Angular-General/tree/main/final-project
This video does not talk about any components migration. Since there are a number of changes happened related to components in Angular 15, it will be be helpful
@@bharathvlogger4951 Are you mentioning about the standalone component. I believe I have covered that too.
I have error with ng update Cannot find module 'node-gyp/bin/node-gyp.js'
Try deleting your node modules folder, package lock dot json and then do npm install
I got this error executing the first command: ng update @angular/core@12 @angular/cli@12
-----
Node.js version v14.21.3 detected.
The Angular CLI requires a minimum Node.js version of v18.19.
----
i have node v14.21.3 and angular cli 11.2.1
Any suggestions?
What is the angular version mentioned in your package.json?
@@WebTechTalk The problem was my version of Nodejs, I installed the node version manager (nvm), installed the compatible version and configured it to use it from nvm, now I have the Angular 17 version updated!! thanks for the video!
@@guillermoboh8479 Actually for angular 12, node 18 is not needed. That is why I asked for the version in package json. Anyways it is good to hear that you have resolved.
Hi sir,
i migrated to version 15 , but files in the node_modules aren't updated , It says ''can't find stylesheets to import'' . what should i do?
Try deleting your node modules folder and package lock json and then do npm install.