Migrate to Standalone Components using the Angular CLI
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- Let's use the Angular CLI to automatically migrate an existing Angular application to standalone components!
Standalone components were provided in Angular version 14 as a developer preview. In Angular v15 standalone components were released as a stable feature. In version 15.2, Angular provided a schematic to help migrate an existing project to standalone.
What's a schematic? A schematic provides the code generation feature behind the Angular CLI including: ng generate, ng add, and ng update. Any time you use the Angular CLI to generate some code, the instructions for how that code is generated is provided in a schematic.
In this video, I walk you through the steps of migrating an existing application to standalone components using the Angular CLI. And I detail the changes made at each point in the process.
Links
Simplify with Angular Standalone Components: • Simplify with Angular ...
Sample code: github.com/DeborahK/Angular-G...
Content
00:00 Angular standalone components
00:55 Angular CLI standalone migration schematic
01:43 Review of code without standalone components
03:42 Application structure with NgModules
05:04 Bootstrapping with NgModules
05:51 Migration prerequisites
06:27 Migrating to standalone with the Angular CLI
07:17 Converting components, directives, and pipes (step 1)
08:53 Reviewing the result of migration step 1 (Components)
12:04 Reviewing the result of migration step 1 (NgModules)
13:16 Removing unused NgModules (step 2)
14:27 Reviewing the result of migration step 2 (NgModules)
15:01 Switching to standalone bootstrapping (step 3)
14:27 Reviewing the result of migration step 3 (bootstrapping)
17:22 Confirming the result
17:40 What's next?
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and TH-cam content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 10,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
Contact me on Twitter: / deborahkurata
Find my Pluralsight courses: www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: www.freecodecamp.org/news/aut...
View my TH-cam content: / @deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #bestpractices #angulartutorial #angularstandalonecomponents #standalonecomponents #demo - วิทยาศาสตร์และเทคโนโลยี
Really appreciate the breakdowns of what all of the scripts do. It made debugging dependencies much easier when a couple were missed
Glad to hear it was helpful!
Awesome video Deboroah, very thorough. Thanks!
Thank you for watching!
One of the best channels about angular) I don't tired repeat it :)) Thank you !
Wow, thanks!
Wow, that must be the best Angular traditional to standalone video I've found. I've searched so much before finding your videos. Thank you a lot!
That it great to hear! Thank you.
Great video, Deborah. Thank you for it.
Glad it was useful! Thanks!
I got the theory, now I'm off to try the practical. Thanks and great job 👍
Have fun and good luck!
@@deborah_kurata I did and it worked as described. This will be a demo at my work (to get conversations going). Thanks, I appreciate the explanations. Subscribed 👍
great and easy explanation, thank you :).
Good to hear! Thanks!
Th great explanation mam .. great 👍👍👍👍
Thank you 😃
It was helpful
Excellent! Thanks!
excellent video! thank you! would you consider some videos on Cypress for Angular E2E testing?
Thank you for watching! And for the suggestion. I'll add it to my list for future videos.
Thanks Deborah, as always great job. The question I always ask at this point is: does upgrading to standalone affect performance or build size?
Thank you for watching.
Without the extra code in the NgModules, your total build size may be slightly smaller. But it mostly affects the size of the individual chucks.
If you migrate to standalone and leverage lazy loading, then you can potentially end up with much smaller bundles which are faster to load. So you could see a faster initial load time. And if you use component-level lazy loading, the bundle will be smaller and load more quickly when the user accesses that particular feature.
Thank you 🙏. What's your take on starting a dashboard project for a mobile app purely standalone instead of app module? My initial plan was to use app module to organize by features then standalone components for reusable components , (eg buttons, modals etc.), directives, guards, pipes etc. Thank you.
Yes, at this point I would be comfortable doing an Angular application that is purely standalone.
Here is a good discussion (be sure to read the comments along with the answer): stackoverflow.com/questions/74558393/when-to-use-standalone-components-or-modules-in-angular-14
@@deborah_kurata Thank you, I appreciate
Thanks!
Thank you so much! :-)
This is very helpful.
I am trying to migrate commons folder(this is created in my project to add all reusable components), I am not able to run migration on this folder.
Could you show how to migrate individual folders
Are you seeing an error? Or did it just not do anything?
The documentation provides a list of "common problems" here: angular.io/guide/standalone-migration#common-problems Would any of that help?
@@deborah_kurata I figured it out. I did this to navigate ./src/app/commons. Initially I didn't add ./ before path. Thank You.
I am building a core component library, I want to understand how can I export the standalone components so it can be imported by stakeholder apps.
The docs have a special section for library authors. Check it out here: angular.io/guide/standalone-components#standalone-components-for-library-authors
Let me know if that was helpful.
How to use lazy load in standalone
Great suggestion! I'm hoping to do this soon!
What for Standalone Component mode ? What it gives ? What it takes?
One of the primary drivers for standalone components was to make it easier to learn Angular. There is then no need to learn about and use NgModules.
For those that already know Angular, they can still simplify the code, again because you don't need NgModules. Everything that a component needs is defined within the component. It also allows for component-based lazy loading.
Have you seen this video ... it provides more of an introduction. th-cam.com/video/c8YGsPx0zVk/w-d-xo.html
@@deborah_kurataNice answer! i thought it was made for smaller app size.
@@deborah_kurata i ve seen that video. But it doesnt answer straight to the question "what for standalone components was made?"
With standalone components:
- Easier learning for new developers (don't need to learn about NgModule)
- Code is easier to read because everything you need to know about a component and what other features it needs is in one place, not dispersed and intermixed in an NgModule.
- Components are more "stand alone" (encapsulated) and can more readily be reused without worrying about adding their features to an NgModule
- Standalone components are better "tree-shakable", so Angular will only load the components that are actually used in your application.
- Easier component-based lazy loading. (Now you can easily lazy load at a component level, instead of a route)
All this is nice but little bit too late in the game. I give angular two more years before it's going to disappear in the space like angularjs did
What signs are you seeing that leads you to that?
As far as I have seen, the Angular team is working to keep moving Angular forward without having to rebuild from scratch (like they did to move from AngularJS to Angular). And with the ng update it makes it easier to keep your team moving forward as well.
As a developer that has actively been working with Angular applications in the business for 7+ years, it just keeps picking up in speed. At this rate, there's more angular apps that I need to develop than what I have time.
Where do you find docs like `ng g @angular/core:standalone` never knew that existed
The Angular team posts a "what's new in Angular version X" to their blog. You can find the one for V16 (that includes this command) here: blog.angular.io/angular-v16-is-here-4d7a28ec680d
@@deborah_kurata ok thanks, why do al examples use only primitive values? Is it bad practice for a complex object? If you had a state model in the signal you wouldn't have the problem of unmmutable signal in the video
@@bdcp You can use complex objects. In several of my examples I use complex objects:
vehicles = toSignal(this.vehicles$, {initialValue: [] as Vehicle[]});
selectedVehicle = signal(undefined);
Is that what you mean?
@deborah_kurata almost! I mean for example if you comebine them into a single model like:
Interface vehiclesState{
vehicles: Vehicle[]
selectedVehicle: Vehicle
}
Vehiclestate = signal({..})
Then you can mutate vehicles list no? I wrote this on mobile hope the format stayd
@@bdcp Using the signal creation function creates a writeable signal. So yes, you would be able to mutate the signal content. But you still need a way to get the data from an HTTP get request (ie an Observable) into that signal.
The down side of putting both vehicles and selectedVehicle in one signal is that the vehicles will then be told they are "changed" and redrawn if the selectedVehicle changes because only the one signal is tracked for changes to any of its properties.