Martina Kraus is a highly experienced software developer, a web development lecturer at the University of Applied Sciences Mannheim, and a Google Developer Expert (GDE). She has always been enthusiastic about implementing large software solutions in Node.js and Angular, enjoys sharing Angular knowledge at national and international conferences, and organises ngGirls events (free Angular workshops for women) and the local Angular Heidelberg Meetup. We spoke with her about her passion for Angular and her upcoming live event on devmio.

devmio: Hello Martina, and thank you for taking the time to answer our questions. First of all, what can you tell us about Angular’s newest feature, standalone components? What are they, and what are they used for?

Martina Kraus: Thank you for having me! They make Angular Modules optional, in a nutshell. This has been eagerly anticipated for a very long time. Understanding the difference between Angular Modules and ECMAScript Modules can be difficult, especially for newcomers to the Angular world. In order to declare components and their dependencies, we needed Angular Modules to set the correct scope for visibility. We import all dependencies directly inside the component decorator itself and define them as a component standalone. Everything that a component needs — whether it's a structural directive or a simple date pipe — is part of the component itself. With that said, Angular Modules are no longer needed.

devmio: How do standalone components differ from ngModule? Does this make using ngModule obsolete?

Martina Kraus: Angular Modules, as previously mentioned, typically define the whole compiler context, but since each component can hold all of its dependencies, there is no need for a "surrounding" Module. Because of this, creating Angular components is significantly simpler. Another big advantage is the bundle size. We only import what we really need inside the component and not just some way too big Shared Modules inside our Feature Modules. In conclusion, ngModules are rendered obsolete by this. However, this does not obligate us to convert the entire application right away to standalone components. In the real world, I believe, a hybrid approach would be more appropriate.

devmio: Can standalone components use lazy loading?

Martina Kraus: Yes, absolutely, which is pretty cool. We can lazy load single components in the same way that we lazy load modules. Even though it is still possible to have the same behaviour of lazy loading modules, instead of lazy loading a feature module, we lazy load a route configuration and all the components registered for routing inside of it.

devmio: What benefits do standalone components bring? Will it make creating Angular applications easier?

Martina Kraus: One extremely important benefit it brings, in my opinion, is the reduced bundle size. Plus, using isolated components to develop feels really lightweight. Also, we get a better understanding of what component actually needs to be initialised. As an Angular teacher and speaker, I often see developers having trouble using Angular Modules. They often fail to understand the difference between Angular and ECMAScript modules. Without ngModules, there is less of a barrier to getting started with Angular.

devmio: How do the new features introduced in Angular 14 change how developers will work with the framework?

Martina Kraus: Angular 14 introduced a bunch of cool new features. In addition to the standalone components, which were a developer preview in version 14 but are now ready for production in version 15, we also got new use cases for the inject function. It allows us to inject dependencies inside a function or a component without using a constructor. Having said that, it will undoubtedly change the way we develop Angular Applications in the future. And I'm excited to share more about how in my upcoming workshop.

devmio: You have an upcoming live workshop with us on December 6 titled “Bye, Bye ngModule.” What will viewers learn during the workshop, and who is the intended audience?

Martina Kraus: I would like to give viewers an overview of how to bootstrap their Angular application with standalone components. The main focus is, of course, on how to use standalone components, lazy load them, and provide Services without requiring a RootModule. After we've covered these basics, I'd like to demonstrate how to migrate an existing Angular Application to the world of standalone components. Some best practices and basic principles will be covered, as well as a lot of live coding.

devmio: What are some of the best resources for Angular developers?

Martina Kraus: Even though it may appear overly simple, the Angular documentation is absolutely fantastic: https://angular.io/. There is even a great tutorial that will walk you through each step of developing an Angular Application. Aside from that, I really like the Angular Update guide: https://update.angular.io/, which tells me exactly what to do if I want to upgrade my Angular App, say, from version 13 to 15. I also recommend dev.to for excellent Angular Blog articles. The blog posts from the "This is Angular" team are among my favourites: https://dev.to/this-is-angular. They consistently produce high-quality posts about Angular or the whole ecosystem that surrounds it.