Migrate An Angular 11 Project to 17: Step-by-Step Guide
Вставка
- Опубліковано 11 лют 2024
- Migrate An Angular 11 Project to 17: Step-by-Step Guide
Ready to unleash the power of Angular 17? Join this comprehensive guide as we migrate an Angular 11 project to the latest version, step-by-step!
Unlock these features:
🆕 Master new functionalities like standalone components, improved performance, and enhanced templating
Build a real-world project with routing, forms, and CRUD operations
Discover best practices and pro tips for a smooth transition
This beginner-friendly tutorial covers everything you need:
✅ Upgrade process, explained simply
️ Project setup and structure
Routing implementation
How to convert to standalone
How to remove ng modules
How to convert ngFor and ngIf in to new control flow syntaxes
Don't miss out! Start your Angular 17 journey today and learn by doing.
#angular17 #angular #angularproject #angularlivetutorial #angular17fullproject #angular17tutorial #angularupgradetutorial #angularmigration #angular16to17 #angular17crud #angular17course #angular17components #angular17beginner
Complete Project Tutorial: • Complete Project | A C...
Migrate An Angular 11 Project to 17: Step-by-Step Guide
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 🙏
Excellent 🎉 explanation
@@rajeshbt1772 Thank you
nice work! very detailed step by step guide.
Thank you so much
Superb video dude. Thank you so much.
Thank you bro.
Excellent content. Thank you very much!🤩
Thank you so much
Well done, it helped me in my work. Keep it up
Thank you :)
Excellent 🤗
Thank you 👍
Super🎉
Thank you 🙏
thanks
Thank you
awsome
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.
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.
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.
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.
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.
ua-cam.com/video/7_SzJnZy_kg/v-deo.html
C’est en utilisant Angular 17. Il n’y aura pas de grande différence entre 17 et 18.
Could you please make one which use angular material ui and ngrx store ? 11 to 17/18 ?
@@thankikaushik sure
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.
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🙏
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.
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
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
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
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.
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
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.