Migrate to Standalone Components using the Angular CLI

[@demidovmaxim1008]

One of the best channels about angular) I don't tired repeat it :)) Thank you !

[@deborah_kurata]

Wow, thanks!

[@pmnm113]

Thank you, I recently found your channel and now I can not stop going through each videos

[@deborah_kurata]

Welcome! Hope you are finding them to be useful. 😊

[@pascalbigras9102]

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!

[@deborah_kurata]

That it great to hear! Thank you.

[@thomasfisher1829]

Really appreciate the breakdowns of what all of the scripts do. It made debugging dependencies much easier when a couple were missed

[@deborah_kurata]

Glad to hear it was helpful!

[@stevewitman]

Awesome video Deboroah, very thorough. Thanks!

[@deborah_kurata]

Thank you for watching!

[@brewzonekeeone5724]

I got the theory, now I'm off to try the practical. Thanks and great job 👍

[@deborah_kurata]

Have fun and good luck!

[@brewzonekeeone5724]

@@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 👍

[@ErickCcsVzla]

Great video, Deborah. Thank you for it.

[@deborah_kurata]

Glad it was useful! Thanks!

[@matteofeliciani7336]

Thanks Deborah, as always great job. The question I always ask at this point is: does upgrading to standalone affect performance or build size?

[@deborah_kurata]

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.

[@mdotlic]

Great video, like always! I tried this migration process, but the first step doesn't change anything for some reason. I'm using Angular 17 (I deliberately didn't use standalone components because I wasn't familiar with them, but now I want to switch). I have the app module, a shared module and 2 other modules for 2 routes. I'm out of ideas of what could the issue be

[@mohammadarifamiri6500]

great and easy explanation, thank you :).

[@deborah_kurata]

Good to hear! Thanks!

[@austinZen8800]

excellent video! thank you! would you consider some videos on Cypress for Angular E2E testing?

[@deborah_kurata]

Thank you for watching! And for the suggestion. I'll add it to my list for future videos.

[@SadikulHaqueSadi]

It was helpful

[@deborah_kurata]

Excellent! Thanks!

[@priyankaravichandran851]

Th great explanation mam .. great 👍👍👍👍

[@deborah_kurata]

Thank you 😃

[@bhargavrg3094]

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

[@deborah_kurata]

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?

[@bhargavrg3094]

@@deborah_kurata I figured it out. I did this to navigate ./src/app/commons. Initially I didn't add ./ before path. Thank You.

[@jabezstephen.j4742]

How to use lazy load in standalone

[@deborah_kurata]

Great suggestion! I'm hoping to do this soon!

[@ugochukwuumerie6378]

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.

[@deborah_kurata]

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

[@ugochukwuumerie6378]

@@deborah_kurata Thank you, I appreciate

[@tanushreebhattacharji2611]

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.

[@deborah_kurata]

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.

[@austinZen8800]

Thanks!

[@deborah_kurata]

Thank you so much! :-)

[@trash2trash]

What for Standalone Component mode ? What it gives ? What it takes?

[@deborah_kurata]

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. kzbin.info/www/bejne/mWm8eKaGrZWtjM0

[@trash2trash]

​@@deborah_kurataNice answer! i thought it was made for smaller app size.

[@trash2trash]

@@deborah_kurata i ve seen that video. But it doesnt answer straight to the question "what for standalone components was made?"

[@deborah_kurata]

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)

[@igorr4682]

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

[@deborah_kurata]

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.

[@MrFraiyn]

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.

[@bdcp]

Where do you find docs like `ng g @angular/core:standalone` never knew that existed

[@deborah_kurata]

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

[@bdcp]

@@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

[@deborah_kurata]

@@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?

[@bdcp]

@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

[@deborah_kurata]

@@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.